Shopify stylesheet loading and placement and the Core Web Vitals

Sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP most often: 95%, against 95% of all Shopify sites. Sites with <body> stylesheets CSS loading have it least often, at 95%.

Sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS most often: 94%, against 94% of all Shopify sites. Sites with render-blocking <head> stylesheets CSS loading have it least often, at 94%.

Inline <style> blocks is the most used: 99.9% of Shopify sites. Non-blocking <head> stylesheets is 90.8% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between non-blocking <head> stylesheets and <body> stylesheets sits in element render delay: 315 ms median for non-blocking <head> stylesheets against 302 ms for <body> stylesheets. Overall median field LCP is 1.4s for non-blocking <head> stylesheets (TTFB 402 ms, load delay 590 ms, load duration 207 ms, render delay 315 ms) versus 1.4s for <body> stylesheets.

Across the four LCP sub-parts in Chrome's field data, the largest gap between non-blocking <head> stylesheets and <body> stylesheets sits in element render delay: 315 ms median for non-blocking <head> stylesheets against 302 ms for <body> stylesheets. Overall median field LCP is 1.4s for non-blocking <head> stylesheets (TTFB 402 ms, load delay 590 ms, load duration 207 ms, render delay 315 ms) versus 1.4s for <body> stylesheets.

Vue sets the stylesheet loading and placement to non-blocking <head> stylesheets on 93% of its sites, and 94% of Vue sites have a good LCP, against 95% of all sites. jQuery sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 93% of jQuery sites have a good LCP.

Vue sets the stylesheet loading and placement to non-blocking <head> stylesheets on 93% of its sites, and 90% of Vue sites have a good CLS, against 94% of all sites. jQuery sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 91% of jQuery sites have a good CLS.

FrameworkStylesheet loading and placement on its sitesGood LCP

Shopify sites with stylesheet loading and placement 8,243 sitesInline <style> blocks 100%Render-blocking in <head> 98%Non-blocking in <head> (preload / media) 91%Stylesheets inside <body> 77%95%

Vue 933 sitesInline <style> blocks 100%Render-blocking in <head> 99%Non-blocking in <head> (preload / media) 93%Stylesheets inside <body> 89%94%

jQuery 3,150 sitesInline <style> blocks 100%Render-blocking in <head> 98%Non-blocking in <head> (preload / media) 89%Stylesheets inside <body> 71%93%

Inline <style> blocks Render-blocking in <head> Non-blocking in <head> (preload / media) Stylesheets inside <body>

Does the framework explain the stylesheet loading and placement difference?

On jQuery, 93% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP, against 93% of jQuery sites with inline <style> blocks. Within jQuery, sites with non-blocking <head> stylesheets and inline <style> blocks have a good LCP about equally often. On Vue, 95% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP, against 94% of Vue sites with inline <style> blocks. Within Vue, sites with non-blocking <head> stylesheets and inline <style> blocks have a good LCP about equally often.

On jQuery, 92% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS, against 91% of jQuery sites with inline <style> blocks. Within jQuery, sites with non-blocking <head> stylesheets and inline <style> blocks have a good CLS about equally often. On Vue, 91% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS, against 90% of Vue sites with inline <style> blocks. Within Vue, sites with non-blocking <head> stylesheets and inline <style> blocks have a good CLS about equally often.

Why <link rel="stylesheet"> inside <body> hurts LCP and triggers late style recalculation

Standard <link rel="stylesheet"> tags in <head> (98.2% of sites, 8,097) block first paint until downloaded (95% good LCP, 1.4s median), while inline <style> blocks (99.9%) reach 95% good LCP and non-blocking <head> stylesheets (90.8%) reach 95% good LCP (1.4s median). Scattering <link rel="stylesheet"> tags inside <body> (76.8% of sites, 6,327) forces late parser pauses and mid-render style passes, dropping good LCP to 95% (1.4s median).