CSS @import chains and the Core Web Vitals
96.3% of audited sites (195,474) avoid @import in their stylesheets (86% good LCP, 1.4s median), while 3.7% (7,553) chain stylesheets via @import (86% good LCP, 1.5s median).
96.3% of sites use no @import rules CSS @import rules, and 86% of those sites have a good LCP, against 86% of all sites.
LCP pass rate
Sites with no @import rules CSS @import rules have a good LCP most often: 86%, against 86% of all sites. Sites with CSS @import CSS @import have it least often, at 86%.
CSS @import rules usage
No @import rules is the most used: 96.3% of sites.
How CSS @import chains affect the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between no @import rules and CSS @import sits in resource load delay: 267 ms median for no @import rules against 473 ms for CSS @import. Overall median field LCP is 1.4s for no @import rules (TTFB 576 ms, load delay 267 ms, load duration 109 ms, render delay 188 ms) versus 1.5s for CSS @import.
Understanding CSS @import chains
Why CSS @import defeats the browser preload scanner
Every external stylesheet blocks rendering by default, but <link rel="stylesheet"> tags are visible in the initial HTML markup so the preload scanner fetches them in parallel. @import hides dependencies inside CSS files: the browser must download the parent stylesheet, parse its rules, and only then open a second request for the imported file. Across 195,474 sites (96.3%) without @import, good LCP reaches 86% (1.4s median), while the 7,553 sites (3.7%) using @import record 86% good LCP (1.5s median).
Replace every @import url(...) rule inside your stylesheets with parallel <link rel="stylesheet"> tags in the HTML <head>, or inline imported CSS files at build time with your bundler. Eliminating the serial CSS hop lets the browser preload scanner discover all stylesheets and fonts during the initial HTML parse. Across all audited sites, 96.3% avoid @import (86% good LCP, 1.4s median) and 3.7% still use it (86% good LCP, 1.5s median).
How CSS @import rules plays out per platform
What the field data shows when you isolate a single CMS or framework.
Shopify 8,634 stores 22.7% of Shopify stores use CSS @import rules (1.4s median LCP vs 1.2s without @import).
Across Shopify storefronts, 77.3% have no CSS @import rules (97% good LCP, 1.2s median) and 22.7% include at least one stylesheet with @import (95% good LCP, 1.4s median).
WordPress 65,939 sites 2.9% of WordPress sites use CSS @import rules, passing LCP 7 points less often than @import-free sites.
WordPress recommends enqueueing parent and child theme stylesheets with wp_enqueue_style(). Across WordPress, 97.1% of sites have no CSS @import (76% good LCP, 1.7s median) and 2.9% contain @import rules (69% good LCP, 2.0s median).
React & Next.js 9,658 sites React & Next.js sites without CSS @import pass LCP 13 percentage points more often than sites with @import.
Across React sites, 96.1% ship stylesheets without runtime @import rules (80% good LCP, 1.5s median) compared with 3.9% that include a runtime CSS @import (67% good LCP, 1.8s median).
By Arjen Karel · 212,308 crawled sites (70,213 with desktop Chrome field data, 203,027 sites with CSS @import rules, October 2026). How we measured.