At a glance
CSS bytes downloaded but not applied to the rendered page, ranked per stylesheet. Lighthouse’s Coverage analysis identifies which CSS rules never matched any element during the audit; the bytes those rules occupy are “unused CSS”. Brands routinely ship 30-60 percent of their CSS bundle on every page with only 40-70 percent actually applied. Smaller impact than psi_unused_js but easier to fix, tree-shaking unused CSS is largely automatic with modern build tools.
Calculation
Calculated automatically from your Website Performance (PageSpeed + CrUX) data. See the At a glance summary above for what the metric tracks and the worked example below for a typical reading.Worked example
A UK-based BigCommerce fashion store homepage audit, mobile, Wednesday 15 May 26.
What the ranked list is telling us:
- 63 percent of all CSS shipped is unused on this page-load. Smaller proportion than the typical 66 percent unused JS but still a meaningful 128KB of dead bytes downloaded and parsed.
- Stencil theme bundle at 82KB unused (rank 1) is the dominant fix. Stencil themes ship rules for many use cases (blog templates, multi-language layouts, alternate skins, demo content) that the merchant doesn’t use. PurgeCSS during build scans the actual theme templates, removes unmatched rules, typically cuts 40-60 percent of theme CSS bundle size.
- Klaviyo popup CSS at 24KB unused (rank 2) is loaded synchronously on every page even though the popup fires only on certain triggers. Defer the load to when the popup is about to mount; saves 24KB on most page-loads where the popup never shows.
- Tidio chat at 16KB unused (rank 3) has similar pattern, chat widget styles loaded site-wide but only ~27 percent of rules apply on a typical page. Defer to post-load; the chat is invisible until hovered anyway.
- Web fonts CSS at 4KB unused (rank 4) is mostly applied. Tightening this is polish; not worth significant effort.
- Cookie consent at 2KB unused (rank 5) is acceptable. Skip.
- Cumulative impact post-fixes: PurgeCSS theme work (-50KB) + Klaviyo defer (-24KB) + Tidio defer (-16KB) = roughly 90KB reduction. Total CSS bytes drop from 204KB to ~115KB, with most CSS deferred to post-load. Page-weight reduction is meaningful; render-blocking impact is the bigger win because deferred CSS no longer blocks first paint.
- Read top 3 entries. Theme bundle is almost always #1; third-party widget styles next.
- Verify in DevTools Coverage tab. Confirms unused-CSS estimates and shows exactly which rules never fired.
- Apply build-time tree-shaking (PurgeCSS, UnusedCSS) for first-party CSS.
- Defer third-party CSS loads that don’t need to render at first paint.
Sibling cards merchants should reference together
Reconciling against the vendor’s own dashboard
Where to look:- PageSpeed Insights, “Reduce unused CSS” opportunity in the Diagnostics section.
- Chrome DevTools → Coverage tab, line-level visibility of which CSS rules matched DOM elements; the most useful diagnostic tool.
- PurgeCSS / UnusedCSS / CleanCSS, build-time tools that automate the cleanup.
Cross-connector reconciliation: primarily internal (with
psi_render_blocking, psi_total_weight, psi_third_party_cost).
Quick rule for support tickets: if a merchant says “I removed unused rules from my CSS but Vortex IQ still shows the same unused bytes”, the most common cause is build/bundle caching, the published bundle still contains the old rules. Verify the deployed CSS file matches the source.