WordPress CSS @import chains and the Core Web Vitals

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

No @import rules is the most used: 97.1% of WordPress 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): 1114 ms median for no @import rules against 1163 ms for CSS @import. Overall median field LCP is 2.0s for no @import rules (TTFB 1114 ms, load delay 354 ms, load duration 182 ms, render delay 242 ms) versus 2.1s for CSS @import.

Vue sets the CSS @import rules to no @import rules on 98% of its sites, and 67% of Vue sites have a good LCP, against 70% of all sites.

FrameworkCSS @import rules on its sitesGood LCP

All WordPress sites 63,295 sitesNo @import rules 97%70%

Alpine 380 sitesNo @import rules 96%78%

jQuery 60,314 sitesNo @import rules 97%69%

Vue 4,844 sitesNo @import rules 98%67%

React 2,233 sitesNo @import rules 95%63%

No @import rules Uses CSS @import

Does the framework explain the CSS @import rules difference?

Almost every site with no @import rules CSS @import rules is a jQuery site, and almost every jQuery site has no @import rules CSS @import rules, so the data can't tell no @import rules CSS @import rules and jQuery apart. On Vue, 67% of sites with no @import rules CSS @import rules have a good LCP, against 67% of Vue sites with CSS @import. Within Vue, sites with no @import rules and CSS @import have a good LCP about equally often. On React, 64% of sites with no @import rules CSS @import rules have a good LCP, against 51% of React sites with CSS @import. Within React, 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 61,463 sites (97.1%) without @import, good LCP reaches 70% (2.0s median), while the 1,832 sites (2.9%) using @import record 67% good LCP (2.1s median).