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 96% of all Shopify sites. Sites with CSS @import CSS @import have it least often, at 93%.

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 element render delay: 274 ms median for no @import rules against 391 ms for CSS @import. Overall median field LCP is 1.3s for no @import rules (TTFB 382 ms, load delay 570 ms, load duration 219 ms, render delay 274 ms) versus 1.5s for CSS @import.

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

FrameworkCSS @import rules on its sitesGood LCP

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

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

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

No @import rules Uses CSS @import

Does the framework explain the CSS @import rules difference?

On jQuery, 95% of sites with no @import rules CSS @import rules have a good LCP, against 91% of jQuery sites with CSS @import. Within jQuery, sites with no @import rules have a good LCP more often. On Vue, 96% of sites with no @import rules CSS @import rules have a good LCP, against 93% 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.3s median), while the 1,870 sites (22.7%) using @import record 93% good LCP (1.5s median).