CSS coverage (used vs unused)
Of the CSS shipped, how much was used during load (Chrome coverage).
At a glance the headline numbers for CSS coverage (used vs unused)
Of the CSS shipped, how much was used during load (Chrome coverage).
316 KB of CSS on the typical page was never used during load.
Where the milliseconds go the phases at the median, against the budget
At the median the whole stack uses 357ms, inside the 2.5s LCP budget. The biggest piece is Unused kb at 316ms. computed
Passing LCP per phase the share of sites passing, by how long each phase takes
Each line is one phase: left = sites where it is quick, right = sites where it drags (buckets, short to long). The steeper the fall, the more that phase decides LCP.
Unused kb falls hardest: from its fastest to its slowest bucket the LCP pass rate drops 20 points, down to 63%. computed
The 2 distributions how each phase spreads across sites - color is the share passing in that range
Used kb stays green across its whole range: it never decides LCP. Unused kb turns red in its tail - the failing sites live there. computed
Why this matters for the Core Web Vitals, and where to start fixing it
CSS blocks rendering, so unused CSS is blocking time spent on rules that style nothing. The browser downloads and parses the whole stylesheet before it paints: the framework components you never used, the styles for pages this one is not.
The cost continues after load. Style recalculation considers the rule set on every DOM change, so unused rules keep taxing every update. Removing unused CSS beats compressing it.
How does unused CSS affect the Core Web Vitals?
CSS coverage (used vs unused) correlates with the LCP. Of the 2 parts, unused CSS separates passing sites from failing sites the most. Where the unused CSS is low, 83% of sites pass the LCP. Where it is high, 63% do. The decline is gradual. There is no point where sites suddenly start failing.
Chrome field data from 94,910 sites, representing millions of real page loads. How we measured.