How to reduce unused CSS
Most sites ship stylesheets where 80-90 % of the rules never apply to the page. Removing or splitting them cuts render-blocking bytes.
Step by step, with screenshots: Critical CSS: is it still worth doing in 2026? →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Unused CSS/JS checker.
What it is
Unused CSS is style rules that a page downloads but never applies to any element on it. It usually comes from themes, page builders and CSS frameworks that ship one large stylesheet for every page type, so a blog post also downloads the rules for the shop, the slider and the checkout.
Stylesheets are render-blocking, so every unused kilobyte still has to download and be parsed before the first paint. Lighthouse flags stylesheets with more than about 10 KiB of unused rules, and getReport shows the bytes and time you could save. Some unused CSS is normal, because menus, hover states and other pages need it; a page is OK when the CSS for its first screen is not buried in large shared files.
What a passing site looks like
- Little unused CSS is downloadedwarning · −4 ptseffort M
Unused CSS
Why it matters. Most of the CSS on a typical page is never used on that page. It still has to download and parse before anything renders.
- Remove or split stylesheets so each page loads only what it needs; page builders and themes often ship one giant file.
- Use a "remove unused CSS" feature (WP Rocket, LiteSpeed Cache, PurgeCSS in your build).
- Load below-the-fold or component CSS on demand.
Questions people ask
How do I remove unused CSS?
Split CSS by page or component so each page loads only what it uses, and delete rules for features you have removed. Build tools such as PurgeCSS strip unused selectors automatically. Be careful with styles that JavaScript adds later, such as open menus, modals or error states: a purge tool cannot see them and may remove them, so keep a safelist and test those states.
How do I remove unused CSS in WordPress?
Use the remove unused CSS feature of a performance plugin such as WP Rocket, LiteSpeed Cache, Perfmatters or FlyingPress, which builds a smaller stylesheet for each page type. Also stop plugins loading their CSS everywhere: a slider or form plugin needs its styles only on pages that use it. Clear caches and check menus, pop-ups and forms after switching it on.
How do I find unused CSS?
Open Chrome DevTools, press Ctrl+Shift+P (Cmd+Shift+P on a Mac), run Show Coverage and reload the page. The Coverage panel shows how much of each stylesheet was used, with unused lines marked in red. getReport and Lighthouse list the stylesheets with the most unused bytes. Check several pages and interactions before deleting anything, since coverage reflects only what ran.