If PageSpeed Insights keeps nagging you to remove unused CSS in WordPress, you’re not alone. It’s one of the most common Lighthouse warnings on WordPress sites, and it’s also one of the most misunderstood. The good news: you rarely need to touch your theme’s code. With the right approach — and the right plugin — you can strip out unused CSS and generate Critical CSS automatically, without breaking your design.
This guide explains what unused CSS actually is, why it hurts your Core Web Vitals, and exactly how to remove unused CSS in WordPress safely. We’ll also cover Critical CSS in plain English, because the two features work together and the terminology trips people up constantly.
What is unused CSS, and why does WordPress have so much of it?
Every WordPress theme and plugin ships its own stylesheet. Your theme loads CSS for every layout it could render. Your page builder loads styling for every module in its library. Your contact form plugin, your slider, your cookie banner, your social-share buttons — each one enqueues CSS on every page, whether that page uses those features or not.
The result is that a typical homepage might load 300–500 KB of CSS while actually using only 10–20% of it. The rest is “unused CSS”: rules for components that never appear on that page. The browser still has to download, parse, and evaluate all of it before it can paint anything meaningful.
That’s the real cost. CSS is render-blocking by default. The browser refuses to show your page until it has processed the stylesheets in the <head>. So bloated CSS directly delays your First Contentful Paint and, very often, your Largest Contentful Paint — the metrics Google measures.
How removing unused CSS helps Core Web Vitals
When you remove unused CSS in WordPress, you’re attacking the render-blocking chain in two ways. First, there’s simply less CSS to download and parse. Second — and this is the part that moves the needle — you can deliver the tiny slice of CSS the page actually needs inline, and load the rest later without blocking the paint.
This is where the two features on your PageSpeed report connect:
- Remove Unused CSS (RUCSS) analyzes each page (or template), works out which CSS rules are genuinely used, and discards the rest — producing a lean, page-specific stylesheet instead of the full bloated one.
- Critical CSS extracts just the styles needed to render everything “above the fold” (what’s visible before scrolling) and inlines them directly in the HTML. The full stylesheet is then loaded asynchronously so it never blocks the initial paint.
Used together, they’re one of the highest-impact optimizations you can make for the LCP and CLS scores that decide whether you pass Core Web Vitals in WordPress. If you’ve been fighting a stubborn “poor” LCP, unused CSS is one of the first places to look — right alongside your images and your unused JavaScript.
Critical CSS explained (without the jargon)
Think of Critical CSS as a fast-loading preview of your page’s styling. Instead of making the browser fetch a big external stylesheet before painting, you hand it a small, hand-picked set of rules baked straight into the HTML — enough to draw the header, hero section, and anything else visible on first load.
The browser paints that immediately. Meanwhile, the complete stylesheet downloads in the background and swaps in once it’s ready. The visitor sees content almost instantly, and the “rest” of the styling arrives before they scroll far enough to notice it was ever missing.
The catch: Critical CSS is fiddly to generate accurately. A good implementation needs to render your page the way a real browser does, at real viewport sizes, so it captures exactly the rules that matter and nothing that causes a visible flash of unstyled content. That’s why generating Critical CSS by hand is a nightmare, and why the quality of your plugin’s Critical CSS engine matters more than almost any other setting.
How to remove unused CSS in WordPress: the practical options
Option 1: Do it manually (only for the brave)
You can use Chrome DevTools’ Coverage tab to see which CSS is unused, then dequeue specific stylesheets with wp_dequeue_style() in a child theme or code snippet. This works for surgically removing one obviously-pointless stylesheet — say, a plugin loading its CSS site-wide when you only use it on one page.
But it does not scale. Coverage results change page by page, you’ll break things constantly, and you’ll spend hours re-testing every template. For a full unused-CSS strategy, manual dequeuing is the wrong tool.
Option 2: A script/asset manager
Tools like Perfmatters let you toggle scripts and styles on or off per page or per post type from a visual interface — no code required. This is excellent for disabling a whole plugin’s assets on pages that don’t need them. It’s a scalpel, not an automatic engine, though: it won’t extract Critical CSS or generate page-specific stylesheets for you. And a script manager is not a cache plugin, so you’ll still need caching alongside it.
Option 3: A performance plugin with automatic RUCSS + Critical CSS
For most site owners, this is the right answer. A capable performance plugin will scan your pages, generate a used-CSS file per template, inline the Critical CSS automatically, and load the remainder asynchronously — all from a single toggle. You get the benefit without touching code or babysitting DevTools.
The important thing is to pick a tool whose CSS engine is accurate enough that it doesn’t strip styles your pages actually use. When RUCSS gets it wrong, you see broken layouts, missing hover states, or a flash of unstyled content — which is why testing after you enable it is non-negotiable.
Which plugins remove unused CSS well?
Most serious WordPress performance plugins now include some form of unused-CSS removal and Critical CSS. Here’s how the popular options compare on the features that matter for CSS optimization — and where each one draws the line.
| Plugin | Remove Unused CSS | Critical CSS | Built-in image optimization | Built-in object cache (Redis) |
|---|---|---|---|---|
| Speed of Light | Yes | Yes | Yes (WebP + AVIF, on your own server) | Yes |
| WP Rocket | Yes | Yes | Add-on (Imagify, separate) | No |
| FlyingPress | Yes | Yes | Yes (WebP/AVIF) | No |
| LiteSpeed Cache | Yes (via QUIC.cloud) | Yes (via QUIC.cloud) | Yes (metered via QUIC.cloud) | Yes |
| Perfmatters | Manual asset toggles | Yes (basic) | No | No |
A few honest observations. All of these can produce good CSS results — the difference is usually in the surrounding package. WP Rocket has a well-regarded CSS engine, but you’ll pay separately for its image optimization (Imagify) and it has no object cache. FlyingPress has excellent CSS and image handling but no Redis object cache and no auto-configuration. LiteSpeed Cache is free and capable, but its CSS generation, images, and CDN all run through QUIC.cloud, which is metered above a free quota and works best on a LiteSpeed server. Perfmatters is a great companion tool but isn’t a full cache plugin. For a fuller breakdown, see our ranked comparison of the best WordPress caching plugins and our head-to-head on WP Rocket vs LiteSpeed vs FlyingPress.
Where Speed of Light fits
Speed of Light includes both Remove Unused CSS and Critical CSS as part of one license — no add-ons, no metered CSS quota. Its Critical CSS is generated by rendering your pages the way a real browser sees them, so the above-the-fold styles it inlines actually match what visitors load.
What tends to matter more, though, is what comes with it. CSS optimization alone won’t pass Core Web Vitals if your images are huge, your server is slow, and every visit rebuilds the page from scratch. Speed of Light bundles the whole stack in a single license: three caching layers (a disk full-page cache served before WordPress even boots, full-page Cloudflare edge caching on the free plan, and a native Redis object cache with a GUI), plus image optimization to WebP and AVIF on your own server, ad-safe JavaScript delay/defer, self-hosted Google Fonts, and LCP/CLS tuning.
The differentiator is that the object cache, disk cache, Cloudflare edge caching, and image optimization are all included — where WP Rocket, FlyingPress and NitroPack make you buy image optimization, a CDN, or an object cache separately. It’s also anonymous-only and WooCommerce-safe: logged-in users are bypassed and carts and checkout are never cached, which matters if you run a store. (If you do, our guide on speeding up WooCommerce without breaking checkout goes deeper.)
How to remove unused CSS safely: a testing checklist
Whatever tool you choose, treat CSS optimization as a “flip the switch, then verify” task. Aggressive CSS removal is the single most common cause of a plugin “breaking” a site.
- Enable Remove Unused CSS and Critical CSS, then let the plugin finish generating (it usually processes pages in the background).
- Clear all caches and load your key templates in a private/incognito window — homepage, a post, a page, your shop, your contact page.
- Look for a flash of unstyled content on first paint. A small flash means your Critical CSS is missing something above the fold.
- Check interactive and hover states — menus, buttons, sliders, accordions. These are the rules RUCSS most often strips by mistake.
- Test on mobile and desktop widths, since above-the-fold content differs by viewport.
- Use the exclusion list if a specific stylesheet or selector gets stripped. Good plugins let you exclude individual files or rules so you keep the benefit everywhere else.
If something looks off, exclude the offending stylesheet rather than disabling the whole feature. You almost never need to give up unused-CSS removal entirely — you just need to protect the handful of rules the engine misjudged.
Frequently asked questions
Will removing unused CSS break my WordPress site?
It can, if the engine strips styles your page actually uses — usually showing up as missing hover states or a brief flash of unstyled content. That’s why you should always test key templates in an incognito window after enabling it, and use your plugin’s exclusion list to protect any file or selector that gets incorrectly removed. A quality Critical CSS engine that renders pages in a real browser makes this far less likely.
What’s the difference between Remove Unused CSS and Critical CSS?
Remove Unused CSS discards the CSS rules a page doesn’t use, leaving a smaller stylesheet. Critical CSS takes the styles needed to render the above-the-fold content and inlines them directly in the HTML so the page paints instantly. They complement each other: RUCSS shrinks the total, and Critical CSS makes what remains non-render-blocking.
Do I still need Critical CSS if my site uses caching?
Yes. Page caching speeds up how fast the server delivers your HTML, but it doesn’t change the fact that render-blocking CSS delays the paint in the visitor’s browser. Critical CSS addresses a different bottleneck. The best results come from combining both — which is why all-in-one plugins that handle caching, CSS, and images together tend to score highest.
Can I remove unused CSS without a plugin?
Technically yes, using Chrome DevTools’ Coverage tab and manually dequeuing stylesheets with wp_dequeue_style(). In practice it’s impractical for a whole site: coverage varies per page, it’s easy to break layouts, and there’s no automatic Critical CSS generation. For anything beyond removing one obviously-unused stylesheet, an automated plugin is far safer and faster.
Does removing unused CSS improve my PageSpeed score?
Usually, yes — it directly clears the “Remove unused CSS” and often the “Eliminate render-blocking resources” opportunities in Lighthouse, which can improve First Contentful Paint and Largest Contentful Paint. Just remember that lab scores are one signal; what ultimately matters is your real-user Core Web Vitals, which respond to the combination of fast CSS, optimized images, and good caching.
The bottom line
Removing unused CSS in WordPress is one of the highest-leverage things you can do for page speed — but only if it’s done accurately and paired with Critical CSS so the styles that remain stop blocking your paint. Manual dequeuing is a scalpel for one-off fixes; an automatic engine is the right tool for a whole site. Whichever you pick, enable it, then test.
If you’d rather not stitch together a CSS tool, an image optimizer, an object cache, and a page cache from four separate products, Speed of Light packages all of it in one license — Critical CSS and unused-CSS removal included alongside disk, edge, and object caching. See Speed of Light plans and pricing (from $49/year, with a 14-day money-back guarantee).