Fix Unused CSS: Remove Dead Stylesheets for Faster Pages

Lighthouse flags "Remove unused CSS" when your stylesheets contain rules that don't apply to the current page. Large CSS frameworks like Bootstrap or Tailwind (without purging) can ship hundreds of kilobytes of unused rules.

Why It Matters

Every byte of CSS is render-blocking by default. Unused CSS:

• Increases download time — especially on mobile networks
• Delays rendering — the browser must parse all CSS before painting
• Wastes memory — the browser stores rules it never uses

How to Find Unused CSS

Chrome DevTools Coverage

1. Open DevTools → Ctrl+Shift+P → "Show Coverage"
2. Click the reload button in the Coverage panel
3. Red bars show unused bytes per file

Lighthouse Audit

BadPageSpeed's dashboard shows this automatically. The audit lists each CSS file with the number of unused bytes.

How to Fix It

Option 1: PurgeCSS (Build-Time Removal)

PurgeCSS scans your HTML/JS templates and removes CSS selectors that don't appear:

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.{html,js,jsx,tsx}'],
      defaultExtractor: content =>
        content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['modal-open', 'tooltip-visible'],
    }),
  ],
};

Option 2: Tailwind CSS JIT Mode

If you use Tailwind, enable JIT mode (default in v3+) — it only generates classes you actually use:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // JIT is default in v3 — only used classes are generated
};

Option 3: Route-Based CSS Splitting

Load CSS only for the routes that need it:

// Next.js: CSS modules are automatically code-split
import styles from './ProductPage.module.css';

Option 4: Remove Framework CSS You Don't Need

If you imported all of Bootstrap but only use the grid:

/* Instead of importing everything: */
/* @import "bootstrap"; */

/* Import only what you use: */
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities";

Measuring Your Fix

After cleanup, check:

• CSS file size: Should be significantly smaller
• Coverage tab: Red (unused) percentage should drop
• FCP/LCP: Should improve with less CSS to parse

Key Takeaway

Ship only the CSS the current page needs. Use PurgeCSS or Tailwind JIT at build time, split CSS by route, and audit regularly with the Coverage tab.