Stylesheets per page
How many stylesheets the page loads and their over-the-wire weight.
At a glance the headline numbers for Stylesheets per page
How many stylesheets the page loads and their over-the-wire weight.
The typical page loads 14 stylesheets weighing 77 KB.
Distribution & median CLS site count and median CLS at each level of stylesheets per page — n
Passing CLS by stylesheets per page — n which level passes the CLS most often
Stylesheets per page — n 14. p75 29. p99 118. At the low end (0–4): CLS 0.00. At the high end (50+): CLS 0.00. computed
Distribution & median CLS site count and median CLS at each level of stylesheets per page — size
Passing CLS by stylesheets per page — size which level passes the CLS most often
Stylesheets per page — size 77 KB. p75 153 KB. p99 1.2 MB. At the low end (0–49 KB): CLS 0.00. At the high end (300+ KB): CLS 0.00. computed
Why this matters for the Core Web Vitals, and where to start fixing it
Every blocking stylesheet is a render gate. The browser paints nothing until the last one arrives, so the count multiplies the risk: more requests on the critical path, more chances that one of them is the slow one.
Few files beat many here. The request side costs more than the byte side: one round trip on a cold connection outweighs a lot of kilobytes on a warm one. Bundle the critical CSS into as few files as the architecture allows.
Chrome field data from 189,915 sites, representing millions of real page loads. How we measured.
Live queries (4) — admin only
SELECT COUNT(*) AS count,
quantile_disc(m.stylesheets.total.n, 0.10) AS p10,
quantile_disc(m.stylesheets.total.n, 0.25) AS p25,
quantile_disc(m.stylesheets.total.n, 0.50) AS p50,
quantile_disc(m.stylesheets.total.n, 0.75) AS p75,
quantile_disc(m.stylesheets.total.n, 0.90) AS p90,
quantile_disc(m.stylesheets.total.n, 0.99) AS p99
FROM sites WHERE m.stylesheets.total.n IS NOT NULL;
SELECT CASE WHEN m.stylesheets.total.n >= 0 AND m.stylesheets.total.n < 5 THEN 0 WHEN m.stylesheets.total.n >= 5 AND m.stylesheets.total.n < 10 THEN 1 WHEN m.stylesheets.total.n >= 10 AND m.stylesheets.total.n < 15 THEN 2 WHEN m.stylesheets.total.n >= 15 AND m.stylesheets.total.n < 20 THEN 3 WHEN m.stylesheets.total.n >= 20 AND m.stylesheets.total.n < 25 THEN 4 WHEN m.stylesheets.total.n >= 25 AND m.stylesheets.total.n < 30 THEN 5 WHEN m.stylesheets.total.n >= 30 AND m.stylesheets.total.n < 35 THEN 6 WHEN m.stylesheets.total.n >= 35 AND m.stylesheets.total.n < 40 THEN 7 WHEN m.stylesheets.total.n >= 40 AND m.stylesheets.total.n < 45 THEN 8 WHEN m.stylesheets.total.n >= 45 AND m.stylesheets.total.n < 50 THEN 9 WHEN m.stylesheets.total.n >= 50 THEN 10 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.stylesheets.total.n IS NOT NULL GROUP BY bucket_idx;
SELECT COUNT(*) AS count,
quantile_disc(m.stylesheets.total.size, 0.10) AS p10,
quantile_disc(m.stylesheets.total.size, 0.25) AS p25,
quantile_disc(m.stylesheets.total.size, 0.50) AS p50,
quantile_disc(m.stylesheets.total.size, 0.75) AS p75,
quantile_disc(m.stylesheets.total.size, 0.90) AS p90,
quantile_disc(m.stylesheets.total.size, 0.99) AS p99
FROM sites WHERE m.stylesheets.total.size IS NOT NULL;
SELECT CASE WHEN m.stylesheets.total.size >= 0 AND m.stylesheets.total.size < 50 THEN 0 WHEN m.stylesheets.total.size >= 50 AND m.stylesheets.total.size < 100 THEN 1 WHEN m.stylesheets.total.size >= 100 AND m.stylesheets.total.size < 150 THEN 2 WHEN m.stylesheets.total.size >= 150 AND m.stylesheets.total.size < 200 THEN 3 WHEN m.stylesheets.total.size >= 200 AND m.stylesheets.total.size < 250 THEN 4 WHEN m.stylesheets.total.size >= 250 AND m.stylesheets.total.size < 300 THEN 5 WHEN m.stylesheets.total.size >= 300 THEN 6 END AS bucket_idx, COUNT(*) AS n,
quantile_disc(crux."phone".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS good_pct
FROM sites WHERE m.stylesheets.total.size IS NOT NULL GROUP BY bucket_idx;