Remove Unused CSS: How to Find and Fix It
TL;DR
Your page is downloading CSS rules it never uses. That wastes bytes and, because stylesheets block rendering, it delays the moment visitors see your content. Find the dead weight with Chrome DevTools Coverage, inline the small set of styles needed for the first paint, defer the rest, and strip out CSS from plugins, themes, or frameworks the page does not actually use. Tools like PurgeCSS automate the cleanup. Check for false positives before deleting anything, because Lighthouse cannot see styles that only apply on hover, click, or other interaction states.
What this means
When a browser loads your page, it downloads every stylesheet linked in the HTML. "Remove unused CSS" (Lighthouse labels it "Reduce unused CSS") flags stylesheets that contain a meaningful amount of CSS the current page never applies to any element. Lighthouse reports an external stylesheet when it carries at least 2 KiB of unused rules.
This is common on sites built with large frameworks or page builders. A theme might ship one big stylesheet covering every layout, widget, and component across the whole site, while any single page uses only a fraction of it. The rest is downloaded, parsed, and held in memory for nothing.
Why it matters
Unused CSS hurts performance two ways, both confirmed by Chrome's documentation:
- Wasted bytes and network trips. CSS is render-blocking. An external stylesheet must download before the browser paints content, so a bloated file adds a network delay to your first paint.
- Slower style calculation. To build the render tree, the browser walks the DOM and checks which rules apply to each node. The more rules it has to evaluate, the longer that calculation takes.
Because this delays first paint, it feeds directly into your Largest Contentful Paint. If LCP is one of your problem metrics, trimming render-blocking CSS is one of the highest-leverage fixes available. See our complete guide to LCP for the bigger picture.
How it gets flagged
Lighthouse runs the audit during a lab test and lists each stylesheet with the unused bytes it could save. To see exactly which rules are dead, use the Coverage tool in Chrome DevTools: open DevTools, press the command menu, run "Show Coverage," reload the page, and pick a CSS file. DevTools shows used rules in green and unused rules in red, plus a usage percentage per file.
Remember that lab tools test one page in one state. Coverage reflects what loaded during that single run, which is the root of most false positives below. For how lab numbers relate to real visitor data, read field vs lab data.
How to fix it
Work through these in order. The first two give the biggest wins for most sites.
1. Inline critical CSS, defer the rest
Identify the small set of styles needed to render the above-the-fold area, inline them in a <style> block in the <head>, then load the full stylesheet asynchronously with a preload link so it no longer blocks the first paint. The Critical tool can extract and inline above-the-fold CSS automatically.
2. Split your CSS
Break one monolithic stylesheet into smaller files and load only what each page or template needs. Code-splitting means a given page no longer pulls in styles for components it never renders.
3. Purge unused rules with tooling
PurgeCSS runs on Node.js and integrates with Webpack, PostCSS, and Vite. It scans your HTML, JavaScript, and templates for class names, then strips selectors it cannot find. This is the cleanest way to shrink framework CSS such as Bootstrap or Tailwind down to only what you actually use.
4. Remove CSS from unused frameworks and plugins
On WordPress, Drupal, or Joomla, audit which plugins and theme modules enqueue stylesheets on pages that do not need them. Dequeue or conditionally load them. A slider plugin loading its CSS site-wide when the slider appears on one page is a classic offender.
If your page is rendered or hydrated by JavaScript, the styles a crawler sees may differ from what users get. Our JavaScript SEO and rendering guide covers those rendering gaps.
False positives
Do not blindly delete every rule Coverage marks red. Lighthouse captures a single page load in one state, so it cannot see styles that apply only under conditions it never triggered:
- Interaction states such as
:hover,:focus, and:activethat need a real user action. - JavaScript-toggled classes for modals, dropdowns, menus, tabs, and accordions that open after load.
- Responsive and media-query rules for viewports or print that the test viewport did not match.
- Form, error, and dynamic states that appear only after validation or input.
Treat the report as a shortlist, not a delete order. Test interactions and breakpoints before removing rules, and re-run Coverage across a few key states. Removing genuinely used styles will break your layout, so verify first.
FAQ
Will fixing unused CSS improve my Core Web Vitals?
It can. Because CSS is render-blocking, trimming it speeds up first paint, which often improves LCP. Confirm the gain with field data, since lab and real-user results differ.
How much unused CSS is acceptable?
Lighthouse only flags stylesheets with at least 2 KiB of unused rules, so small amounts will not trigger the audit. Aim to reduce waste, not to chase a perfect zero, which is rarely realistic on a real site.
Is PurgeCSS safe to run automatically?
Mostly, but configure a safelist for class names added dynamically by JavaScript that PurgeCSS cannot detect in your source. Always test the build before shipping.
Do I need critical CSS if I already purge?
They solve different problems. Purging shrinks the file; critical CSS plus deferral stops the remaining file from blocking the first paint. Used together they give the best result.
Want this fixed properly, not just flagged?
Our advanced SEO audit pinpoints exactly which CSS to inline, defer, and purge, and ties each fix to the metric it moves.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
