Stylesheet loading mix
How CSS arrives: head-blocking, non-blocking, inline, or in the body.
At a glance the headline numbers for Stylesheet loading mix
How CSS arrives: head-blocking, non-blocking, inline, or in the body.
41.6% of stylesheets load render-blocking in the head.
The stylesheet loading mix mix who uses what, and how fast each group loads
Stylesheet loading mix. On the fleet: 49.4% inline, 41.6% head blocking, 6.8% body. 87.1% of sites use at least one inline.
By count inline leads (49.4%); by bytes it is head blocking (57.3%). computed
Passing INP per bucket every category and count level at once - color is the pass rate
Each row is a category, each column its own count bucket (few on the left, many on the right); the cell is the share of those sites passing INP.
Head nonblocking swings the hardest: 100% of sites pass INP with few, 94% with many. computed
Few vs many - does quantity cost INP? the pass rate with few vs many of each category
Per category: the pass rate among pages with FEW of it (hollow ring) against pages with MANY (solid dot), worst trend first. Thin buckets are excluded from the endpoints.
More Head nonblocking costs the most: the INP pass rate falls from 100% with few to 94% with many. computed
Why this matters for the Core Web Vitals, and where to start fixing it
Where and how CSS loads decides when the page can first paint. A blocking stylesheet in the head is the normal case: rendering waits for it. Inline CSS skips the request but bloats every HTML response and cannot be cached separately. A stylesheet in the body is a surprise that can block rendering halfway down the page.
CSS that is not needed for the first paint (print styles, below-the-fold components) can load at low priority, off the render path. The hard part is honesty about what is critical: guess wrong and the page paints unstyled.
Chrome field data from 94,910 sites, representing millions of real page loads. How we measured.