Reduce Unused CSS

A single global stylesheet shared across an entire site is convenient to maintain, but it usually means every page downloads CSS rules for components that page doesn't even contain. This audit measures exactly how much of that is happening.

What it means

Lighthouse runs the same coverage analysis it uses for unused JavaScript against your stylesheets: it loads the page, records which CSS rules were actually applied to something on screen, and flags the rest as unused. A framework-wide stylesheet with every component's styles, loaded on a page that renders three of those components, is the classic case.

Why it matters

Unlike most JavaScript, a <link rel="stylesheet"> is render-blocking by default (see eliminating render-blocking resources): the browser won't paint anything until it has parsed the full stylesheet, whether or not most of those rules apply to the current page. So unused CSS isn't just extra bytes, it's extra bytes directly on the critical path to first paint.

How to fix it

• Purge unused rules from the shipped CSS. Tools like PurgeCSS scan your actual HTML/template/component files and strip out any CSS selector that never appears, producing a much smaller final stylesheet:

// postcss.config.js
module.exports = {
  plugins: [require('@fullhuman/postcss-purgecss')({
    content: ['./src/**/*.html', './src/**/*.jsx'],
  })],
};

• If you use Tailwind CSS, this is largely automatic: Tailwind's JIT engine only generates the utility classes it finds referenced in the files listed in your content array, so an accurate content config is the single most important setting for output size:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,php}'],
};

• Split CSS by route or component in larger applications, so a page only loads the styles its own components need instead of one monolithic file for the whole site.
• Inline critical, above-the-fold CSS and load the rest asynchronously, the same non-blocking pattern described in the guide on eliminating render-blocking resources.

How to verify

Re-test the page; the unused-css-rules audit should report a much smaller number of wasted bytes. To check a specific page manually, open DevTools' Coverage panel and reload. The CSS section shows the exact percentage of each stylesheet that was used.