How to Remove Unused CSS for Faster Load Times in WordPress

In today’s digital landscape, website performance is not just a technical concern but a pivotal factor in ensuring user engagement and retention. Particularly for WordPress sites, where themes and plugins often contribute bountifully to the site’s design, the accumulation of unused CSS can silently throttle load times, affecting user experience and SEO rankings.

This article delves into performance tuning, focusing on CSS optimization—specifically, how to remove unused CSS or reduce unused CSS to enhance site speed.

Key Points

Unused CSS consists of style rules in your CSS frameworks that are not applied to any elements on your website. These rules add unnecessary bulk to your site’s resources, potentially slowing down page loading.

1. What is Unused CSS?

CSS breathes life into website design but can become a double-edged sword when not managed properly. While it shapes the aesthetic appeal, excess baggage in the form of CSS rules that are not used can weigh down page rendering and slow down your site, leading to a poor user experience.

Recognizing and eliminating these redundant styles trims down the load time and streamlines your website’s functionality.

Unused CSS in websites refers to style rules included in a site’s themes and plugins that are not applied to the site’s content or layout. But why are there unused CSS rules in the first place?

What are the sources of Unused CSS in WordPress?

1. Themes: WordPress themes are designed to be versatile to fit various types of websites. They often come with pre-written styles or templates that cater to numerous potential layouts and design elements, many of which a particular site may never use. You probably select one of the pre-designed templates and use that design for all pages on your website.
2. Plugins: Each plugin added to a site can inject additional CSS into the site’s pages. If certain plugin features are not used, this can lead to a surplus of unused CSS.
3. Custom CSS: Over time, site administrators or developers may add custom CSS to tweak the site’s appearance. Some custom styles may become irrelevant as the site evolves but remain in the site’s stylesheet.

How does CSS impact WordPress Site Performance?

1. Page Load Time: Each piece of CSS, whether used or unused, has to be downloaded by the user’s browser. Unused CSS increases the size of style sheets, causing longer download times, especially for users with slower internet connections.
2. Render Time: Browsers need to parse all the CSS rules received, and parsing unnecessary rules can slow down the rendering of the page. This can be especially problematic for rendering critical above-the-fold content vital for user experience.
3. Maintenance Complexity: For developers, wading through a complex web of unused CSS can make website maintenance, updates, and debugging more complex and time-consuming in the long run.
4. SEO Impact: Search engines like Google use page speed as a ranking factor. Slower loading times due to bloated CSS can negatively affect a site’s search engine ranking.

Unused CSS can also impact your website’s Core Web Vitals, a metric used by Google to measure website performance. Unused CSS can impact your website’s Largest Contentful Paint (LCP) and Total Blocking Time (TBT). So addressing this issue upfront is key for website owners and administrators to ensure their site runs optimally.

If you run a Google Pagespeed Insights test on your website and get the Reduce Unused CSS recommendation, as shown in the image below, you know this is an issue you must tackle.

How to Use Chrome Dev Tool to Identify Unused CSS?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It provides an array of features to debug and profile the performance of web pages, including the ability to identify unused CSS.

Here’s how you can use Chrome DevTools for this purpose:

Open the Chrome Coverage Tool:

1. Open Google Chrome, and navigate to the webpage you want to analyze.
2. Right-click and select “Inspect” to open Chrome DevTools, or use the shortcut Ctrl+Shift+I (or Cmd+Option+I on Mac).
3. Once Chrome DevTools is open, click on the “More options” menu (three dots), and then select “Coverage”.

Start running the Coverage Tool:

1. A new panel will open, displaying a “Click the record button to start capturing coverage”. Click this button to begin the coverage test.
2. The page will reload, and the Coverage tool will record all the CSS (and JavaScript) executed while the page loads.
3. After the page reloads, you’ll see a list of all your CSS and JavaScript files. Each file will have a visual indicator showing the amount of code used versus the code that wasn’t executed.

Analyzing the Results:

1. The Coverage panel will list all the stylesheet files loaded by the page. Each entry includes:
   • The URL of the file.
   • A bar representing the proportion of used and unused code. Red indicates unused CSS, while green shows used CSS.
   • The total bytes of code and the amount of used and unused bytes.
2. Click on a file to view the source code. The unused CSS will be highlighted in red, indicating that those selectors were not used when the page was loaded.

Watch the video below for a visual explanation of Chrome Devtools:

Things to Keep in Mind:

• Dynamic Content: If your site has interactive elements that change the DOM or load additional content requiring different CSS rules, you should interact with your site while the coverage process runs to ensure all used CSS is accounted for.
• Media Queries: CSS may be unused at one viewport size and used at another. You should check your coverage for various screen sizes if your site is responsive.
• Web Fonts: Sometimes, CSS rules that include web fonts might appear unused even though they are not. Be cautious about removing these rules.
• Testing: After identifying and removing the unused CSS, it’s crucial to thoroughly test your website to ensure that the removal has not affected the visual or functional aspects of the site.

The Coverage tool can be invaluable for a developer looking to optimize their website, as it helps streamline CSS and JavaScript, making pages lighter and faster to load.

However, the decision to remove CSS should always be made with consideration of the full range of site functionality and content.

2. How to Remove Unused CSS in WordPress

There are three primary methods to tackle this task: the first option is to manually inspect the CSS and remove any unused code, the second option is to use a online tool to scan your CSS file, identify unused code, remove it and generate a clean CSS file for you to use, or the third and final option of deleting unused code automatically using a plugin.

Remove the Unused CSS code Manually from your Website

The manual approach involves hands-on inspection and editing of your site’s CSS files. This requires a solid understanding of CSS and the structure of your theme.

Basically, you need to have some good technical chops:)

You’ll need to comb through your stylesheet, identify styles not in use by reviewing your site’s pages, and carefully remove them. This can be aided by tools like Chrome DevTools, which can highlight unused CSS.

The manual method is time-consuming and demands a meticulous review to ensure no essential styles are deleted.

Remove the Unused CSS Code using PurifyCSS or PurgeCSS

You can simplify this process using a tool like PurifyCSS or PurgeCSS to clean up your stylesheets.

These tools work by analyzing your your CSS files and identifying any unused CSS rules, delete them and then generate an optimized CSS file which you can upload to your website.

If you have a constantly growing and evolving website, this approach can also be cumbersome and impractical.

Remove the Unused CSS using a Plugin

Plugins can greatly simplify the process of removing CSS that is not being used by automating the detection and removal of styles that are not needed.

They generally work by scanning your pages, identifying CSS selectors that aren’t being used, and either removing them or allowing you to dequeue (disable) them.

This automation can save significant time and reduce the risk of human error compared to the manual process.

Here is a list of recommended plugins that you can use to remove unused CSS:

1. WP Rocket

How to use: After installing WP Rocket, navigate to the “File Optimization” tab in the plugin settings. Enable Optimize CSS delivery, and click on the Remove Unused CSS option. Upon activation, WP Rocket will scan your website, starting with your home page, and generate the used CSS for the website pages. If you want to know more, read this in-depth review of WP Rocket.

2. FlyingPress

How to use: Flying Press has a straightforward setup where you can enable ‘Remove Unused CSS’ in the CSS tab. On top of this, FlyingPress also lets you decide how to handle the unused CSS – you can either:

• Remove it completely from the CSS files, or
• Load the unused CSS only on user interaction, or
• Load it asynchronously in the background without affecting page performance.

3. Asset Cleanup

How to use: The Asset Cleanup plugin checks or scans your pages and then lets you selectively disable scripts and styles you identify as unnecessary on specific pages or posts, which can greatly improve your site’s loading times and overall efficiency.

It also includes a test mode which helps you see the impact of your changes before you roll it out to your visitors. It also includes a number of other optimization features that can further improve page speed.

While this is great, the plugin requires some additional knowledge and skill because you have to make the decisions on what to load or unload – so this is not a plugin for beginners or non-tech folks.

4. Perfmatters

• How to use: You will find the Remove Unused CSS option under the Assets menu in the settings for this plugin. Activate this option. You also have the option of configuring how both the used and unused CSS are handled:
  • You can choose to have the Used CSS inline or in a separate file. Inline CSS will be loaded above the fold and help with Google Pagespeed scores. File-based CSS is best for performance as perceived by the user since the file can be cached and doesn’t need to be loaded every time.
  • For the unused CSS, just like FlyingPress, you can Delay the CSS (loads on user interaction), load it Asynchronously (Loaded in the background), or Remove the CSS completely. Removal of CSS is best for performance, but it can also break your website unless you are able to identify and add the stylesheets you need.

Like WP Rocket or FlyingPress, Perfmatters also offers other optimization features that enhance website performance.

Whatever option you choose, test your website after making these changes to ensure that the visual layout and functionality remain intact.

Always back up your site before making any changes and check the results on different devices and browsers.

Each plugin may have a slightly different approach to removing unused CSS, so it’s important to review the documentation provided by the plugin team for the best results.

3. How to minimize Unused CSS

While we have been talking so far about how to fix, reduce, or remove unused CSS, it is important that we also consider how we can minimize unused CSS in the first place.

Minimizing unused CSS can be crucial for maintaining an efficient, fast-loading website in the long run.

Here are some preventive measures or practices that you can implement to help reduce the accumulation of unused CSS:

1. Choose Lightweight Themes and Plugins: Select themes and plugins known for being lightweight and well-coded. Avoid those that add excessive bloat or unused styles.
2. Customize Carefully: When customizing themes, don’t go overboard. Adding a lot of styles and blocks means more CSS generation. Keep your page design simple, and only add what’s needed for your specific design and layout requirements.
3. Use Conditional Loading: Load CSS files conditionally, especially for plugins that don’t need to run on every page. This can be achieved through custom coding or certain performance plugins.
4. Critical CSS: Implement a critical CSS strategy where only the CSS needed for above-the-fold content is initially loaded, with the non-critical CSS loaded asynchronously.
5. Avoid Inline CSS: Inline CSS slows page loading time by adding to page size and can be harder to manage. Use external stylesheets and link them to your HTML.
6. Minify CSS: Always minify your CSS files. This process removes unnecessary characters (like spaces and comments) without changing the functionality.
7. Regularly Update and Clean Themes and Plugins: Outdated themes and plugins can contribute to unused CSS. Regular updates and cleaning out old or unused plugins can help minimize this.

4. Conclusion: Removing Unused CSS

Removing unused CSS from your website is not just good practice but a necessary step towards optimizing site performance and enhancing user experience.

As we have explored, unused CSS can significantly bloat your website, leading to slower loading times, which can impact both user engagement and search engine rankings.

You can reduce this bloat by implementing manual techniques or leveraging powerful plugins like WP Rocket, Flying Press, Asset Cleanup, or Perfmatters.

The journey to a streamlined, efficient, and fast WordPress website requires a balance of vigilance and continuous optimization.

Choosing lightweight themes, implementing critical CSS, ensuring regular updates and maintenance, and being mindful of the CSS added by plugins will go a long way in maintaining a lean and efficient website.

Remember, a well-optimized website is not just about the content it hosts but also about the efficiency and speed with which it delivers that content.

6. Frequently Asked Questions

Can the Remove unused CSS option break my website?

Caution is needed. Some CSS might be used conditionally (e.g., for hover states, responsive designs, or dynamically loaded content). Always verify and test after removal to ensure site functionality remains intact.

What is the difference between removing unused CSS and minimizing CSS?

Removing unused CSS eliminates unnecessary style rules while minifying CSS reduces file size by removing whitespace and comments and optimizing syntax without changing functionality.

Should I remove unused CSS from Third-Party Plugins?

Exercise caution with third-party plugins, as updates can overwrite direct modifications. Instead, use plugin management tools or custom CSS to override unnecessary styles from plugins.

How often should I check for unused CSS?

Regularly, especially after adding new content, themes, or plugins to your site or making significant design changes. This ensures your CSS remains optimized over time.

Does removing unused CSS help with mobile performance?

Mobile devices often have slower network speeds, so reducing CSS size can significantly improve loading times and the overall mobile user experience.

What is the difference between Critical CSS and Unused CSS?

The difference between Critical CSS and Unused CSS is in their purpose and impact on website performance:

Critical CSS refers to the minimal set of CSS rules that are essential to render the visible part of a web page. This is the above-the-fold content (the part of the webpage visible without scrolling). This is the CSS needed to style the page’s initial view, and it’s crucial for faster page rendering. The idea is to load this CSS in the HTML document or inline, so it’s quickly available to the browser. This will speed up the time to first paint (when the first content appears on the screen). This helps improve user experience and perceived performance.

Unused CSS, consists of CSS rules present in your stylesheets that are not being used to style any elements on the page. Over time, as sites evolve and change, they often accumulate styles that are no longer needed. These styles add unnecessary bulk to the CSS files. This bulk means increasing the amount of data the browser needs to download, parse, and process, which slows down the site. Removing these unused styles can decrease file size and improve loading times.