CSS @import chains on React sites

Sites with no @import rules CSS @import rules have a good LCP most often: 85%, against 85% of all React sites. Sites with CSS @import CSS @import have it least often, at 74%.

No @import rules is the most used: 96.1% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between no @import rules and CSS @import sits in time to first byte (TTFB): 512 ms median for no @import rules against 568 ms for CSS @import. Overall median field LCP is 1.4s for no @import rules (TTFB 512 ms, load delay 439 ms, load duration 145 ms, render delay 174 ms) versus 1.8s for CSS @import.

Wix sets the CSS @import rules to no @import rules on 99% of its sites, and 94% of Wix sites have a good LCP, against 85% of all sites.

PlatformCSS @import rules on its sitesGood LCP

All React sites 9,570 sitesNo @import rules 96%85%

Wix 5,824 sitesNo @import rules 99%94%

WordPress 2,342 sitesNo @import rules 96%61%

No @import rules Uses CSS @import

Does the platform explain the CSS @import rules difference?

On WordPress, 61% of sites with no @import rules CSS @import rules have a good LCP, against 48% of WordPress sites with CSS @import. Within WordPress, sites with no @import rules have a good LCP more often.

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 9,199 sites (96.1%) without @import, good LCP reaches 85% (1.4s median), while the 371 sites (3.9%) using @import record 74% good LCP (1.8s median).