How to Reduce Unused CSS in WordPress

If you’ve ever run a website performance test using tools like Google PageSpeed Insights or GTmetrix, you may have seen a warning about “unused CSSCSS CSS is a design language used to control the appearance and formatting of a website. It's used to define colors, typography, layout, and other visual aspects. CSS is either inserted directly into the HTML code or can be added as external .css files referenced by the HTML code.”.

This warning can be confusing, especially if you’re not familiar with how CSS works or why it impacts your site’s performance. In this blog post, we’ll break down what unused CSS is, what the warning means, and how you can fix it to improve your WordPress site’s speed and efficiency.

What is “Unused CSS”?

CSS (Cascading Style SheetsCSS CSS is a design language used to control the appearance and formatting of a website. It's used to define colors, typography, layout, and other visual aspects. CSS is either inserted directly into the HTML code or can be added as external .css files referenced by the HTML code.) is the code used to style your website. It controls everything from fonts and colors to layouts and animations. However, not all the CSS loaded on your website is actually used on every page. Unused CSS refers to the portions of your CSS code that are loaded but never applied to the elements on a specific page.

Let’s look at a very simple example and see how PageSpeed Insights reacts. We create a basic page with an <h1> and <p> elements and style it using this CSS code:

h1 {
    color: white;
    background-color: blue;
}

When testing the page, the warning does not appear because all the CSS is being used.

However, let’s add at least 10 KB of unused CSS, as this is the threshold set by PageSpeed Insights.

h1 {
    color: white;
    background-color: blue;
}
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
...

Since there is no container element or any other relevant styles from the additional CSS applied to the page, the warning now appears.

Over time, as your site grows and plugins or themes add more CSS, the amount of unused CSS can accumulate, slowing down your site.

Why is the unused CSS bad for performance?

When your website is loading more CSS code than necessary, it can negatively impact your site’s performance in two main ways:

Increased load time: Unused CSS adds extra bytes to your page, which increases the time it takes for the browser to download and process the files.
Render-blocking resources: CSS is a render-blocking resource, meaning the browser must download and process it before displaying the page to the user. To build the render tree, which is similar to the DOM tree but with styles included, the browser goes through the entire DOM, determining which CSS rules apply to each element. The more unused CSS there is, the more time the browser wastes checking which elements a specific, unnecessary CSS rule applies to.

Why does my WordPress site have unused CSS?

Okay, so we understand what’s the unused CSS and why it’s bad for performance. But why do WordPress sites have unused CSS at all? That happens because most themes and plugins load their styles globally, even if they’re not needed on a specific page. Here are the main reasons:

Themes – Many themes include a single large CSS file that covers all possible elements, even if some aren’t used on every page.
Plugins – Plugins often load their styles site-wide as well, even if they’re only needed on specific pages (e.g., a contact form plugin loading CSS on every page, like Contact Form 7 does).
WordPress – WordPress itself loads styles for the block editorGutenberg The block editor is a WordPress tool that allows you to create and edit content using individual blocks. Internally, it's known as Gutenberg. Each block can contain different types of content, like text, images, videos, and more, and each block can be organized into different rows and columns to achieve the desired appearance. (GutenbergGutenberg The block editor is a WordPress tool that allows you to create and edit content using individual blocks. Internally, it's known as Gutenberg. Each block can contain different types of content, like text, images, videos, and more, and each block can be organized into different rows and columns to achieve the desired appearance.) even if you don’t use certain blocks.
Third-party libraries – If your theme or plugins use frameworks like Bootstrap or FontAwesome, they load all styles even if only a small part is used.
Page builders – Builders like Elementor or WPBakery often load global CSS that covers all possible elements, leading to unused styles.

So why do developers code their stuff this way? Why not add only the necessary CSS on every page as it should be done? Well, the answer is different depending on who you ask, but it all comes down to complexity, compatibility and foolproofness.

Loading a single CSS file site-wide is easier to manage than dynamically enqueuing styles based on the content of each page. It reduces the risk of missing styles and breaking layouts.
While unused CSS increases page weight, multiple CSS files can increase HTTP requests, which may slow down performance. Many developers prefer to load one larger file and let caching/CDNs handle efficiency.
Plugins often don’t know in advance where their features will be used. Instead of complex logic to detect usage, they just enqueue CSS everywhere to avoid missing styles.
Themes and especially page builders need flexibility. Since users can add elements anywhere, developers include global styles to ensure everything works without extra setup. That’s one of the reasons why page builders slow down your site.
And sometimes, there are those who just don’t care or don’t know that unused CSS affects the performance.

How to fix unused CSS on WordPress

The process to reduce unused CSS for WordPress is thankfully easier to do than with other platforms. That’s what’s good about popularity 🙂

Replace plugins or themes

The most straightforward way of removing the unused CSS on WordPress is to simply get rid of those components causing the problem. More often than not you won’t be able to remove them, but it’s always worth looking for a better performing alternatives of plugins and themes. For example, check this case:

3 out of the 4 causes of the issues are related to the Enfold theme, which is known for being super-bloated. Solution? Replace it with a better theme. In this particular case, the 4th file is block-library/style.css, which belongs to WordPress and there’s not much you can do about it unless you decide to not use Gutenberg, in which case you can disable Gutenberg altogether.

If you want to see a list of all your CSS files and see which ones contain the most unused CSS, look no further than your browser’s developer tools. Open the Coverage tab and type ‘css’ in the filter, as shown in this image:

Don’t use page builders

We know that page builders are bad for performance, no matter how many caching and optimization options they include (they wouldn’t need those options if they performed well from the start…). That includes Elementor, Divi, WPBakery, Beaver Builder, and others. One of the main reasons is that page builders often include big CSS libraries to accommodate a wide range of design elements and functionalities. This approach ensures that users have access to many styling options without the need for custom coding. However, it also means that many CSS rules remain unused on specific pages, leading to bloated stylesheets and to the famous “Remove unused CSS” message.

We have a useful guide on how to replace your page builder, but if you cannot do it, you can try adjusting its CSS dynamic/optimization settings to ensure only the necessary styles load on the frontend—or at least, that’s the theory. For example, Divi has an option called “Dynamic CSS”:

Disable CSS or even whole plugins where they are not used

In an ideal world, plugins would load their CSS files only on the pages where they are supposed to be active. However, we often find plugins that, either due to laziness, convenience, or simply bad coding practices, load all their resources on every single page.

For example, WooCommerce loads CSS and JSJS JavaScript, abbreviated as "JS," is a programming language used to create interactivity on websites. It allows you to add elements like animations, dynamic forms, and real-time updates without needing to reload the page. JavaScript, like CSS, can be inserted directly into the HTML code or can be added as external .js files referenced by the HTML code. files on every page even if WooCommerce is not involved at all, likely for convenience, as it is a huge plugin that needs to accommodate many customers and use cases. Another well-known example is Contact Form 7: even on pages without a form, the plugin runs in the background, and some CSS files are loaded.

To fix this, we recommend using Perfmatters‘ Script Manager. It’s an extremely useful tool that lets you control exactly which CSS and JS files load on each page. Additionally, it includes a special feature called MU Mode, which allows you to completely disable entire plugins on specific pages, as if they didn’t exist.

We recommend you checking out the official documentation on how to use the Script Manager to learn more about this.

Replace the YouTube iFrame with a preview thumbnail

Have a YouTube video? Don’t just copy and paste the YouTube URL into your editor and let the entire YouTube player load after the page loads. If you do, this will happen:

The solution is to replace the iframe with a static preview thumbnail and load the player only after the user clicks on it. Perfmatters, FlyingPress and WP Rocket all let you do this with a single click. For example, in Perfmatters, you just need to:

Go to Settings > Perfmatters > Lazy Loading
Enable the “iFrames and Videos” option
Enable the “YouTube Preview Thumbnails” option too.

But if you need or want a free option, you must check out WP YouTube Lyte by the amazing Frank Goossens!

Cache/optimization plugins

All of our favorite cache/optimization plugins, with the exception of Autoptimize, include a function to remove the unused CSS: WP Rocket, LiteSpeed Cache, FlyingPress and Perfmatters.

Please note that while removing unused CSS is beneficial, you must be careful. Automated tools more often than not remove styles that are used by JavaScriptJS JavaScript, abbreviated as "JS," is a programming language used to create interactivity on websites. It allows you to add elements like animations, dynamic forms, and real-time updates without needing to reload the page. JavaScript, like CSS, can be inserted directly into the HTML code or can be added as external .js files referenced by the HTML code. or dynamic elements on your site such as menus that appear on hover or form error messages, leading to broken layouts or functionality. To avoid this, always test your site thoroughly after removing the unused CSS.

WP Rocket

First of all, WP Rocket is not a free plugin, so take it into account.

In WP Rocket, all you need to do is go to Settings > WP Rocket > File Optimization and enable the “Optimize CSS delivery” option. Once enabled, additional settings will appear, and you only need to select the “Remove Unused CSS” option.

That should be enough. Now, you’ll need to wait a few minutes because WP Rocket will fetch the non-cached version of your pages to scan the CSS—whenever they decide to do so. You can keep checking the source code of your pages, and eventually, you will see the <style id="wpr-usedcss"> tag, which means the unused CSS has been removed.

If you notice that some styles are missing or things look off, you may need to add CSS filenames, IDs, or classes that should not be removed to the CSS safelist box.

To learn more about how to troubleshoot the Remove Unused CSS issues, we recommend you checking the official documentation: Troubleshoot Used CSS generation issues

LiteSpeed Cache

In LiteSpeed Cache, the option you need to look for is called “Generate UCSS“, located under LiteSpeed Cache > Page Optimization > CSS Settings.

Unfortunately, there are two drawbacks.

To use the Generate UCSS option, you must have an active subscription to QUIC.cloud, LiteSpeed’s CDN service, which provides page optimization features like unused CSS removal. This is a drawback because the free plan has a limited number of optimization requests, meaning you may need to upgrade to a paid plan.
The Generate UCSS option requires enabling “CSS Combine”, which can be counterproductive for performance. This is because most websites today use HTTP/2 or HTTP/3, which allow multiple smaller files to load in parallel, making file combination unnecessary. Additionally, keeping files separate allows individual caching, so updates to one file don’t invalidate the entire combined file.

Because of these drawbacks, we don’t recommend using LiteSpeed Cache to remove unused CSS. However, if you still want to proceed, you can enable the option and wait a few minutes for QUIC.cloud to process your page and for LiteSpeed Cache to inject the generated Used CSS into your site.

You can identify the generated Used CSS in the page source code by looking for the <style id="litespeed-ucss"> tag.

If some styles are missing or the page looks off, you may need to adjust the settings by:

Adding CSS filenames to the “UCSS File Excludes and Inline” box.
Adding IDs or classes to the “UCSS Selector Allowlist” box.

These settings can be found under LiteSpeed Cache > Page Optimization > Tuning – CSS.

For more details on troubleshooting “Generate UCSS” issues in LiteSpeed Cache, we recommend checking the official documentation: CSS/JS Issues

FlyingPress

To remove unused CSS with FlyingPress, install it on your WordPress site, then go to the FlyingPress menu, navigate to the CSS section, and enable the “Remove Unused CSS” option. It’s as simple as that!

Now, you might be wondering what to choose for the “Load Unused CSS” option when it appears. First, it’s important to understand how the plugin works: On the first page load after the cache has been flushed, FlyingPress processes the page before delivering it to the browser. It gathers all the used CSS and injects it inline into the source code with the <style class='flying-press-used-css'> tag. Unlike WP Rocket or LiteSpeed Cache, FlyingPress gives you control over what happens to the unused CSS it extracts. You have three options:

Asynchronously – This loads the unused CSS in the background without blocking page rendering. It’s similar to deferring or async loading JavaScript (though these techniques differ, the goal is the same: preventing render-blocking). While this speeds up loading times, it has two main drawbacks:
- The user still downloads the same amount of CSS, just in the background.
- Cumulative Layout Shift (CLS) may increase due to late adjustments made by the browser when the rest of the CSS loads later.
On user interaction – This goes a step further by loading the unused CSS only when the user interacts with the page (e.g., a touch, mouse move, or key press). However, the same drawbacks as the “Asynchronously” option apply: the full CSS still loads, and CLS issues may occur.
Remove – This is the most aggressive method. FlyingPress warns against using it if it causes issues, but it’s the one we recommend for the best performance improvement since only the used CSS is loaded. However, in 90% of cases, you’ll need to fine-tune the settings by using the Exclude Stylesheets or Include Selectors options to ensure necessary CSS isn’t removed.

For more details on troubleshooting “Remove unused CSS” issues in FlyingPress, we recommend checking the official documentation: Remove Unused CSS

Also, FlyingPress is not a free plugin either.

Perfmatters

The process in Perfmatters is mostly the same as in FlyingPress. After installing the plugin, go to Settings > Perfmatters > CSS and enable the “Remove Unused CSS” option.

The way Perfmatters generates used CSS is also similar to FlyingPress: On the first page load after the cache has been flushed, Perfmatters processes the page before delivering it to the browser. It gathers all the used CSS and injects it inline into the source code using the <style id="perfmatters-used-css"> tag.

Perfmatters also allows you to store the used CSS in an external file instead of inlining it. This is controlled by the “Used CSS Method” setting, and it’s actually the approach we prefer. While inlining the CSS may improve PageSpeed Insights scores, it can be counterproductive in some cases because:

It increases the HTMLHTML HTML is the fundamental language used to create and structure content on web pages. It consists of a set of tags or codes used to describe a web page's structure and content. Each HTML tag has a specific function, like indicating headings, paragraphs, images, links, and other visual elements on a page. Through these tags, web browsers interpret and display content in an organized and understandable manner for users. HTML is essential for building any web page and provides the foundation upon which other elements and styles are added to achieve the desired design. size (sometimes negligibly, sometimes significantly).
It cannot be cached in the user’s browser like a regular .css file.

By using an external file, returning visitors can load the cached CSS instead of downloading it again, leading to better times and Core Web Vitals.

As for the “Stylesheet Behaviour” option, Perfmatters offers three options for handling unused CSS, which are equivalent to those in FlyingPress:

Delay – Loads the unused CSS only when the user interacts with the page (e.g., a touch, mouse move, or key press). However, while this speeds up loading times, it has two main drawbacks:
- The user still downloads the same amount of CSS, just with a delay.
- Cumulative Layout Shift (CLS) may increase due to late adjustments made by the browser when the rest of the CSS loads later.
Async – Loads the unused CSS in the background without blocking page rendering. It’s similar to deferring or async loading JavaScript (though these techniques differ, the goal is the same: preventing render-blocking). The same drawbacks as the “Delay” option apply: the full CSS still loads, and CLS issues may occur.
Remove – This is the most aggressive method. We recommend it for the best performance improvement since only the used CSS is loaded. However, in 90% of cases, you’ll need to fine-tune the settings by using the Exclude Stylesheets or Excluded Selectors options to ensure necessary CSS isn’t removed.

For more details on troubleshooting “Remove Unused UCSS” issues in Perfmatters, we recommend checking the official documentation: Troubleshooting unused CSS

Lastly, it’s worth mentioning that Perfmatters is not a free plugin either.

Manual implementation

If you prefer a more hands-on approach, you can manually remove unused CSS. Tools like PurgeCSS, UnCSS or UnusedCSS can analyze your HTML files and remove any CSS rules that are not used on your pages. However, this method requires a deeper understanding of CSS and your site’s structure.

Here’s a basic example of how you might use UnCSS to remove unused CSS from your WordPress homepage:

Open the Developer Tools in your browser and go to the Elements tab. There, copy the DOM (the rendered HTML structure you see in the Elements tab). Why not use the source code from Ctrl+U? The DOM reflects the HTML after JavaScript modifications, which means it includes dynamically added elements, classes, or IDs targeted by CSS. Using the source code could lead to mistakenly removing CSS that’s actually in use.
Paste the copied DOM into the “Your HTML” box in the UnCSS tool.
Copy all your CSS (both inline styles and loaded .css files) and paste it into the “Your CSS” box.
Click “UNCSS MY STYLES” to process the CSS.
Add the used CSS only to your homepage
Remove all previously loaded .css files and inline styles from the page.

As you can see, this option is clearly time-consuming and risky if you accidentally remove styles that are needed for dynamic content. That’s why we always prefer going with the more automatic option, with one of our plugins of choice.