Shopify CSS @import chains and the Core Web Vitals

Sites with no @import rules CSS @import rules have a good LCP most often: 96%, against 95% 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: 285 ms median for no @import rules against 397 ms for CSS @import. Overall median field LCP is 1.3s for no @import rules (TTFB 393 ms, load delay 572 ms, load duration 215 ms, render delay 285 ms) versus 1.6s for CSS @import.

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

FrameworkCSS @import rules on its sitesGood LCP

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

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

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

No @import rules Uses CSS @import

Does the framework explain the CSS @import rules difference?

On jQuery, 94% of sites with no @import rules CSS @import rules have a good LCP, against 90% 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 92% 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 96% (1.3s median), while the 1,870 sites (22.7%) using @import record 93% good LCP (1.5s median).