Unused CSS.

CSS rules that don't match any element — increases parse time

What does this check test?

This check identifies CSS rules that are downloaded and parsed but do not match any element on the current page. Large CSS frameworks, component libraries, and accumulated project styles often result in 80-95% of CSS being unused on any individual page. The browser must parse all CSS to build the CSSOM before rendering, and every unused rule adds to this parsing time. Since CSS is render-blocking by default, unused CSS directly delays First Contentful Paint.

Why does it matter?

Unused CSS increases the render-blocking time during page load because all CSS must be parsed before the browser can render content. Large CSS files take longer to download, especially on slow mobile connections where every kilobyte matters. CSS parsing is synchronous and blocks rendering — a 500KB CSS file with 90% unused rules forces the browser to process 450KB of wasted rules before showing anything. Reducing CSS size improves FCP, LCP, and overall page load time. Additionally, large CSS files consume more memory and can slow down dynamic style recalculations.

Who is affected?

Sites using CSS frameworks like Bootstrap, Tailwind CSS (without purging), Material UI, or Bulma are most affected because these frameworks include styles for every possible component. Sites that have accumulated CSS over years of development without cleanup, and sites that load a single global stylesheet for all pages regardless of which components are used, are common offenders.

Where does this apply?

Use Chrome DevTools Coverage panel to see CSS usage per file — red bars indicate unused bytes. The Styles panel in Elements shows which rules match the selected element. Common sources of unused CSS: full CSS framework imports, styles for components not on the current page, legacy styles for removed features, vendor-prefixed rules for unsupported browsers, and print/media-query styles loaded for all contexts.

How to fix it

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
  theme: { extend: {} },
  plugins: [],
};

<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/desktop.css" media="(min-width: 1024px)" />

References

• Remove unused CSS — Chrome Developers
• Extract Critical CSS — web.dev
• PurgeCSS Documentation