If you’ve run your site through Google PageSpeed Insights or Lighthouse and seen a warning that says “Remove unused CSS,” you’ve found one of the most common reasons WordPress sites load slower than they should. This guide explains what unused CSS actually is, why WordPress sites are especially prone to it, and how to fix it, including a free plugin that does it automatically.
TL;DR: WordPress themes and plugins load CSS for features a given page doesn’t use, which is what triggers the “Remove unused CSS” PageSpeed warning. You can check the damage with Chrome DevTools’ Coverage tab, but fixing it across a whole site by hand isn’t realistic. Berq Used CSS, a free WordPress.org plugin, automates this for sites that don’t have BerqWP. If you already run BerqWP, this is handled for you automatically, no extra plugin needed.
What Unused CSS Actually Means
Every stylesheet your site loads contains a set of rules: instructions for how different elements should look. “Unused CSS” is the portion of that stylesheet your browser downloads and processes but never actually applies to the page you’re looking at, because the elements those rules describe aren’t on that particular page.
The browser still has to download the full file, parse every rule in it, and figure out which ones apply, before it can finish rendering anything. The bigger that file is, the longer that takes. PageSpeed Insights flags this because it’s a direct, measurable drag on how fast your page becomes visible and usable.
Why WordPress Sites Are Especially Prone to This
WordPress themes and plugins tend to load CSS for every feature they’re capable of, on every page, whether that page uses the feature or not. A theme that supports sliders, mega menus, pop-ups, and contact forms loads styling for all of it on your simple blog post too, even if that post has none of those elements. Page builders like Elementor and Divi add their own layer of CSS on top, often loading styles for every block type available in the builder rather than just the ones used on a given page.
None of this is a bug. It’s just how WordPress plugins and themes are built to work everywhere, for everyone, by default. The tradeoff is that almost every WordPress page ends up loading CSS it never uses.
How to Check If This Is Slowing Down Your Site
The fastest way to confirm it is to run your page through PageSpeed Insights. If “Remove unused CSS” or “Reduce unused CSS” shows up under opportunities, it’s affecting your score. For a closer look at exactly which rules are unused, Chrome’s DevTools has a built in Coverage tab (open DevTools, go to the three-dot menu, More tools, then Coverage) that shows you a live breakdown of how much of each loaded CSS file is actually being used on the page you’re viewing.
Doing this manually, page by page, across an entire WordPress site is realistic for a single landing page but not practical for a site with dozens or hundreds of pages, especially since the unused portion changes from page to page depending on what each one actually contains.
How to Remove Unused CSS in WordPress Automatically
This is where a tool built specifically for this problem helps. Berq Used CSS is a free WordPress plugin that automates the process described above across your entire site.
Here’s how it works: the first time a visitor loads a page, the plugin analyzes the CSS that page actually renders and builds a trimmed version containing only the rules that page uses. From that point on, every visitor to that page gets the smaller file instead of the full stylesheet. You don’t need an account, there’s no sign up, and no data is sent to an external server, the whole process runs on your own site.
You get to choose how the original stylesheets are handled once the trimmed CSS is ready, through three modes:
- Keep originals loads the trimmed CSS first so the page renders fast, while still loading the original stylesheets normally afterward. This is the safest starting point.
- Load after interaction delays the original stylesheets until the visitor scrolls or clicks something, which pushes the speed benefit further for visitors who don’t interact right away.
- Remove completely drops the original stylesheets entirely and relies only on the generated used CSS. This gives you the maximum speed improvement, but it’s worth using only once you’ve confirmed the generated CSS actually covers everything your pages need, since anything genuinely missing from the trimmed version won’t load at all in this mode.
Berq Used CSS works with any WordPress theme or page builder, including Elementor, Divi, WPBakery, Gutenberg, and WooCommerce, without needing any configuration to recognize them. It also runs fine alongside cache plugins you may already have installed, including WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache, SiteGround Optimizer, and Nginx Helper. If you update a plugin, switch themes, or change something in the Customizer, the plugin clears and regenerates the saved CSS automatically, so you’re not left with stale, broken styling after a change.
If You Already Use BerqWP, You Don’t Need This Plugin
Berq Used CSS is built for sites that don’t have BerqWP installed. If you’re already running BerqWP, this is handled for you automatically and you don’t need to add Berq Used CSS on top.
On Local Optimization, the free, self-hosted version of BerqWP, the plugin strips unused CSS from each page on its own, using the same kind of approach described above. On BerqWP Premium, this is replaced with something more thorough: full per-page critical CSS generation, which inlines exactly the CSS each page needs to render immediately rather than trimming an existing stylesheet down.
Removing unused CSS also only addresses one specific cause of a slow PageSpeed score. If you’re also dealing with large images, unoptimized JavaScript, or no caching at all, neither Berq Used CSS nor manual CSS trimming will fix those, they’re focused specifically on CSS. BerqWP handles the rest of that picture, caching, image optimization, and JavaScript handling, as part of the same plugin.
