Shopify stylesheet initiators and the Core Web Vitals
99.1% of audited sites (8,168) load stylesheets directly via the HTML parser (95% good LCP, 1.4s median), whereas the 59.0% (4,863) injecting stylesheets via JavaScript drop to 94% good LCP (1.4s median).
52.7% of Shopify sites use other CSS initiators stylesheet initiator type, and 96% of those sites have a good LCP, against 95% of all Shopify sites.
LCP pass rate
Sites with other CSS initiators stylesheet initiator type have a good LCP most often: 96%, against 95% of all Shopify sites. Sites with script-injected stylesheets CSS initiators have it least often, at 94%.
Stylesheet initiator type usage
Inline <style> blocks is the most used: 99.9% of Shopify sites. Other CSS initiators is 52.7% of Shopify sites.
LCP phase breakdown by stylesheet initiator
Across the four LCP sub-parts in Chrome's field data, the largest gap between other CSS initiators and script-injected stylesheets sits in resource load delay: 567 ms median for other CSS initiators against 631 ms for script-injected stylesheets. Overall median field LCP is 1.4s for other CSS initiators (TTFB 400 ms, load delay 567 ms, load duration 201 ms, render delay 344 ms) versus 1.4s for script-injected stylesheets.
Stylesheet initiator type per framework
Vue sets the stylesheet initiator type to other CSS initiators on 56% of its sites, and 94% of Vue sites have a good LCP, against 95% of all sites. jQuery sets the stylesheet initiator type to inline <style> blocks on 100% of its sites, and 93% of jQuery sites have a good LCP.
Vue 933 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 100%Script-injected CSS 83%Other initiators (@import / headers) 56%94%
jQuery 3,150 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 99%Script-injected CSS 68%Other initiators (@import / headers) 41%93%Stylesheet initiator or the framework
Does the framework explain the stylesheet initiator type difference?
On jQuery, 93% of sites with other CSS initiators stylesheet initiator type have a good LCP, against 93% of jQuery sites with inline <style> blocks. Within jQuery, sites with other CSS initiators and inline <style> blocks have a good LCP about equally often. On Vue, 96% of sites with other CSS initiators stylesheet initiator type have a good LCP, against 94% of Vue sites with inline <style> blocks. Within Vue, sites with other CSS initiators and inline <style> blocks have a good LCP about equally often.
Why JavaScript-injected stylesheets delay rendering and trigger layout recalculation
Stylesheets declared in HTML (99.1% of sites, 8,168) are discovered immediately by the preload scanner (95% good LCP, 1.4s median), and inline <style> blocks (99.9%) require zero network round-trips (95% good LCP). When stylesheets are injected at runtime by JavaScript (59.0% of sites, 4,863), CSS discovery waits for script download and execution, dropping good LCP to 94% (1.4s median).
Understanding stylesheet initiators
Extract component CSS at build time into static <link rel="stylesheet"> tags or inline critical <style> blocks instead of injecting stylesheets dynamically from JavaScript at runtime. Across all audited sites, 99.1% use parser-initiated CSS (95% good LCP) while 59.0% inject CSS via JavaScript (94% good LCP).
By Arjen Karel · 8,246 crawled Shopify sites (5,825 with phone Chrome field data, 8,243 sites with stylesheet initiator type, October 2026). How we measured.