Shopify CSS @import chains and the Core Web Vitals

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

No @import rules is the most used: 77.3% of Shopify sites.

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: 599 ms median for no @import rules against 692 ms for CSS @import. Overall median field LCP is 1.2s for no @import rules (TTFB 302 ms, load delay 599 ms, load duration 162 ms, render delay 277 ms) versus 1.5s for CSS @import.

jQuery sets the CSS @import rules to no @import rules on 73% of its sites, and 95% of jQuery sites have a good LCP, against 97% of all sites.

FrameworkCSS @import rules on its sitesGood LCP

All Shopify sites 8,246 sitesNo @import rules 77%Uses CSS @import 23%97%

Vue 933 sitesNo @import rules 70%Uses CSS @import 30%97%

jQuery 3,153 sitesNo @import rules 73%Uses CSS @import 27%95%

No @import rules Uses CSS @import

Does the framework explain the CSS @import rules difference?

On jQuery, 97% of sites with no @import rules CSS @import rules have a good LCP, against 93% of jQuery sites with CSS @import. Within jQuery, sites with no @import rules have a good LCP more often. On Vue, 98% of sites with no @import rules CSS @import rules have a good LCP, against 95% of Vue sites with CSS @import. Within Vue, sites with no @import rules and CSS @import have a good LCP about equally 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 6,376 sites (77.3%) without @import, good LCP reaches 97% (1.2s median), while the 1,870 sites (22.7%) using @import record 95% good LCP (1.4s median).