CSS @import chains and the Core Web Vitals
96.3% of audited sites (194,124) avoid @import in their stylesheets (82% good LCP, 1.6s median), while 3.7% (7,498) chain stylesheets via @import (82% good LCP, 1.6s median).
96.3% of sites use no @import rules CSS @import rules, and 82% of those sites have a good LCP, against 82% of all sites.
LCP pass rate
Sites with no @import rules CSS @import rules have a good LCP most often: 82%, against 82% of all sites. Sites with CSS @import CSS @import have it least often, at 82%.
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: 330 ms median for no @import rules against 491 ms for CSS @import. Overall median field LCP is 1.6s for no @import rules (TTFB 655 ms, load delay 330 ms, load duration 150 ms, render delay 233 ms) versus 1.7s 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 194,124 sites (96.3%) without @import, good LCP reaches 82% (1.6s median), while the 7,498 sites (3.7%) using @import record 82% good LCP (1.6s 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 (82% good LCP, 1.6s median) and 3.7% still use it (82% good LCP, 1.6s median).
How CSS @import rules plays out per platform
What the field data shows when you isolate a single CMS or framework.
Shopify 8,573 stores 22.7% of Shopify stores use CSS @import rules (1.5s median LCP vs 1.3s without @import).
Across Shopify storefronts, 77.3% have no CSS @import rules (96% good LCP, 1.3s median) and 22.7% include at least one stylesheet with @import (93% good LCP, 1.5s median).
WordPress 65,509 sites 2.9% of WordPress sites use CSS @import rules, passing LCP 3 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 (70% good LCP, 1.9s median) and 2.9% contain @import rules (67% good LCP, 2.1s median).
React & Next.js 9,570 sites React & Next.js sites without CSS @import pass LCP 11 percentage points more often than sites with @import.
Across React sites, 96.1% ship stylesheets without runtime @import rules (85% good LCP, 1.4s median) compared with 3.9% that include a runtime CSS @import (74% good LCP, 1.9s median).
By Arjen Karel · 210,902 crawled sites (126,761 with phone Chrome field data, 201,622 sites with CSS @import rules, October 2026). How we measured.