Uses @import
Whether any stylesheet pulls more CSS via @import - a serial request chain.
At a glance the headline numbers for Uses @import
Whether any stylesheet pulls more CSS via @import - a serial request chain.
Uses @import sites that have it vs sites that don't
0.0% of sites use CSS @import (0 of 0). With use: CLS —, 0.0% pass. Without: CLS —, 0.0% pass. computed
Why this matters for the Core Web Vitals, and where to start fixing it
@import inside a stylesheet is a serial chain. The browser downloads the first stylesheet, parses it, finds the @import, and only then requests the next file. Each level adds a full round trip to the render-blocking path, and the page paints nothing until the chain resolves.
It survives in old themes and design systems because it looks harmless. Replace it with link tags, which download in parallel, or bundle at build time into one file. There is no defensible use of @import on the request path.
Chrome field data from 189,915 sites, representing millions of real page loads. How we measured.
Live queries (1) — admin only
SELECT m.stylesheets.has_css_import AS val, 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,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls > 0.1 AND crux."phone".cls <= 0.25) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS ni,
COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL AND crux."phone".cls > 0.25) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."phone".cls IS NOT NULL), 0) AS poor
FROM sites WHERE 1=1 GROUP BY m.stylesheets.has_css_import;