Best methods to reduce unused CSS in WordPress for better performance

A common issue on most WordPress websites, often flagged by Google PageSpeed Insights, is ‘Reduce and remove unused CSS files from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity.‘

Unused CSS refers to CSS (styling code) within your WordPress theme or plugins that isn’t actively used on your website. This unnecessary code bloats your CSS files, increasing download times, significantly hindering page rendering, and ultimately impacting user experience and potentially SEO. In this article, we’ll cover the causes of unused CSS and provide practical methods for identifying and removing it, leading to a faster, more efficient website.

What causes unused CSS?

There are several factors contribute to the accumulation of unused CSS, they are:

• Design Changes: When website designs are updated or elements are removed, the corresponding CSS may remain, even though it’s no longer needed.
  
• Code Updates: Theme and plugin updates can introduce new styles, some of which may not be utilised on your specific site configuration.
  
• Unused Stylesheets: WordPress themes often include stylesheets from CSS frameworks (like Bootstrap) that contain a vast library of styles. If your site only uses a small fraction of these styles, the rest becomes unused overhead.

The most effective way to remove unused CSS in WordPress

While several techniques and plugins are available that can help to remove the unsed CSS, one of the most effective approaches involves creating custom CSS tailored to your site’s specific needs.

Creating a custom theme for your site and organising your CSS by templates or components is one of the very effective way to remove unused CSS.

Breaking your CSS in terms of parts or templates

This method focuses on including only the necessary CSS for each part of your website. For example, you might create separate CSS files for different components, such as:

• heading.css
• button.css
• hero.css
• sample-page.css

By organising your CSS in this way, you gain fine-grained control over which styles are loaded on each page, minimising the risk of including unused rules. This approach, while more time-consuming upfront, significantly improves long-term CSS maintainability and prevents the accumulation of unused styles.

When working on a new website design project at our agency, we take two different approaches depending on the team member handling the front end.

Some of our team prefer a single skin.css file with all of the CSS compiled at one time. That loads fewer request times, with a single file loaded for the site. That being stated, such a practice comes with both positive and negative aspects, and these must be kept in mind with careful consideration.

How to find unused CSS on your website?

Finding the unused CSS definitions that haven’t been referenced in any part of the page and the most used and most intensive ones is the starting point in trimming unCSS. To reveal the most-used and unused CSS files, utilise your browser’s dev tools coverage and inspect which one loads most of the time.

Using Browser Developer Tools (Chrome DevTools, Firefox Developer Tools)

Modern browsers, like  Chrome, Firefox, and Safari, provide developer tools, including DevTools Coverage, allowing WordPress developers to see which CSS files are loaded and how much code per separate file is used versus unused.

To open Chrome DevTools’ Coverage, press Ctrl+Shift+I or right-click on the page and select “Inspect.”

Navigate to the ‘Coverage‘ tab. If it’s not visible, open the command menu with Ctrl+Shift+P and type ‘Coverage‘ to find and open it.

Click on ‘Start instrumenting coverage and reload page‘ to see a report on CSS usage.

This tool will display the percentage of code in each CSS file loaded when the website loads.

PageSpeed Insights and Other Performance Testing Tools

Google’s PageSpeed Insights and GTmetrix are two performance tests that can possibly enable you to see how your Website’s performance is impacted by CSS and other files. These speed testing tools can enable you to detect any unnecessary code and CSS that can be stripped in an attempt to make your site run faster and detect files that have slow loads.

PageSpeed Insights

Google’s PageSpeed Insights tool evaluates the content of a webpage and makes recommendations for speeding it up. It offers measurements on how well a particular page name works both in controlled environments (lab data) and in the real world (field data), providing information on a range of performance factors, including the use of CSS.

• Field Data: Usually displayed through the Chrome User Experience Report, this makes use of past performance data of the page for real users.
• Lab Data: In order to fix performance problems and find and remove unused CSS features in real time, lab data offers a snapshot of performance measurements from a controlled environment.

To use PageSpeed Insights for CSS analysis:

1. Enter the page URL you wish to analyze using the PageSpeed Insights tool.
2. Please review the report for suggestions on reducing CSS file sizes and recommendations on eliminating rules not applied to the page.
3. PSI specifically flags CSS’s impact on critical rendering paths, helping you prioritize which files to optimize or trim for speed enhancements.

GTmetrix and Waterfall Charts

A Waterfall chart is part of GTmetrix’s study of a webpage’s loading speed. This chart is very important for showing how each resource on your Website loads with the others and identifying those that take longer to load, frequently as a result of complicated execution or huge file sizes.

• The Waterfall Chart: This graph shows how long it takes for each resource to load and all network queries a website has made in chronological order. You can observe whether CSS files are large or take a long load.
  
• Similar to PageSpeed Insights, GTmetrix provides information on individual CSS improvements. However, it also includes a comprehensive timeline that helps see how stylesheets impact page rendering time.

Other Ways of Removing Unused CSS Code

Manual Techniques for Identifying and Removing Unused CSS files and codes

1. Code Review Sessions

Code review sessions are an important part of having efficient and organized codebases, including CSS. In a review session of codes, development team members review each other’s codes in a systematized fashion.

Following is how specifically they can contribute towards CSS:

• Unrecognised Unused CSS: Unused CSS rules can be discovered by a development team member in a scenario when a feature is changed or removed, but its respective style is present in a stylesheet.
  
• Avoid Over-Specification: Over-specification in terms of CSS can be discovered through review, such that one can search for regions in a style sheet and a respective style sheet selector placed in a position that is not overridden with ease and is hard to maintain.
  
• Minimise Inline Styles: Inline styles, for convenience in a scenario, cause a lot of redundancy in a code and are not easy to maintain, but through review, one can insist on the usage of an external style sheet.
  
• Enforce Best Practices: Code review instills best practices such as the use of a shorthand property, minimum use of a declaration, and the use of techniques of CSS such as the use of BEM (Block Element Modifier) in order to make a style sheet efficient and organized.

2. Linting Tools

CSS linting tools can be instructed to report potential redundancy and errors in CSS files:

Stylelint

Stylelint is a popular linter for CSS, including preprocessor languages such as SCSS(Syntactically Awesome Style Sheets) and Less(Leaner Style Sheets). It makes the developer’s life easier by enforcing conventions in stylesheets and catching errors. Here’s how it benefits your coding process:

• Uniformity and Consistency: Stylelint ensures that everyone on a team follows the same styling conventions, which simplifies reading and maintaining the codebase over time.
  
• Error Detection: It warns about common mistakes that may occur in CSS files, such as syntax errors, wrong units, or incompatible CSS properties, saving users from runtime problems.
  
• Extensibility with Plugins: The true power of stylelint lies in extensibility through plugins developed by people or written in-house. With the plugins, one can look for unused CSS selectors, probable leftovers after refactorings, and report too specific selectors which could overly complicate subsequent maintenance or end.
  
• Stylelint can be integrated into development workflows: running as part of a build process or within code editors at the point of typing, providing immediate feedback and speeding up the development and review process.

3. Refactoring CSS files

Refactoring CSS is important for maintaining efficient and readable stylesheets, especially for projects with thousands of styles. Now, let’s look into three important refactoring strategies: combining selectors, managing media queries, and using CSS variables. Each of these approaches has a different way of helping make your CSS maintainable and less buggy.

• Merging Selectors

Over time, CSS can collect many duplicate selectors in a stylesheet. Merging those selectors reduces file size and redundancy.

Example:

Before refactoring, you might have:

h1 {
  color: blue;
  font-size: 20px;
}

h2 {
  color: blue;
  font-size: 18px;
}

.article-title {
  color: blue;
  font-weight: bold;
}

After refactoring, you could merge the common Colour property:

h1, h2, .article-title {
  color: blue;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

.article-title {
  font-weight: bold;
}

This would minimize the CSS by declaring a shared colour property across multiple selectors into one spot, reducing lines and increasing clarity.

• Optimising Media Queries

In responsive designs, media queries can become repetitive throughout a stylesheet. Cleaning these up can clean up readability and performance.

Example:

You might see something like this before refactoring:

.header {
  background: black;
}

@media (max-width: 600px) {
  .header {
    background: navy;
  }
}

.sidebar {
  width: 250px;
}

@media (max-width: 600px) {
  .sidebar {
    width: 100%;
  }
}

After refactoring, consolidate the media queries:

.header {
  background: black;
}

.sidebar {
  width: 250px;
}

@media (max-width: 600px) {
  .header {
    background: navy;
  }
  .sidebar {
    width: 100%;
  }
}

• CSS Variables

CSS variables, also known as custom properties, are handy when there is a certain value that is to be reused throughout a stylesheet, like colours, spacing, or sizes of fonts.

.button-primary {
  background-color: #4CAF50;
  border: 1px solid #4CAF50;
}

.link-primary {
  color: #4CAF50;
}

After introducing CSS variables, your code becomes:

:root {
  --primary-color: #4CAF50;
}

.button-primary {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.link-primary {
  color: var(--primary-color);
}

Using CSS variables simplifies modifications. Changes to something such as the primary colour require updating in one place rather than throughout your entire stylesheet.

By applying these refactorings, your CSS code can scale and perform much better and be more maintainable, remaining robust and easier to manage while your project grows.

4. Documentation and Guides

Maintaining documentation and generating coding guides can go a long way towards getting a proper handle on CSS effectively:

• Documentation: Having a record of the styling conventions, methodologies, and any quirks of the CSS code rules and code base can allow new developers to grasp the setup in less time.
  
• Guidelines: Having a guideline in place for the use of CSS can allow for consistency and stop the creation of unused styles in the first instance.

Automating CSS Optimisation in WordPress Website

• Plugin Capabilities: Plugins like Asset Cleanup Pro scan your web pages, identify unused CSS per page, and offer options to un-load CSS styles that are unnecessary. They can also defer non-critical CSS by loading it only after the main content has been rendered, thereby improving perceived load times.
  
• Automated Housekeeping: There are plugin provisions for scheduled automatic cleaning, automatic script management, and conditional loading intelligence that can save a tremendous amount of hands-on work with regard to managing CSS files.

Conclusion: Unused CSS Files Cleanup and its Importance

Unused CSS trimming is not an activity that involves quick scraping of files. It is a meaningful optimisation practice that has an immediate impact on website performance and user experiences. Optimising CSS files lessens the amount of information browsers have to download, scan, and execute, and therefore, page loading times will become shorter, and a less jerky user experience will result.

FAQs about reducing unused CSS code