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: 96%, against 96% of all Shopify sites. Sites with render-blocking <head> stylesheets CSS loading have it least often, at 96%.

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 render-blocking <head> stylesheets sits in element render delay: 301 ms median for non-blocking <head> stylesheets against 298 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.3s for non-blocking <head> stylesheets (TTFB 389 ms, load delay 589 ms, load duration 209 ms, render delay 301 ms) versus 1.3s for render-blocking <head> stylesheets.

Across the four LCP sub-parts in Chrome's field data, the largest gap between non-blocking <head> stylesheets and render-blocking <head> stylesheets sits in element render delay: 301 ms median for non-blocking <head> stylesheets against 298 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.3s for non-blocking <head> stylesheets (TTFB 389 ms, load delay 589 ms, load duration 209 ms, render delay 301 ms) versus 1.3s for render-blocking <head> stylesheets.

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

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

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

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, 94% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP, against 94% 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 95% 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, 91% 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, 92% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS, against 91% 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 (96% good LCP, 1.3s median), while inline <style> blocks (99.9%) reach 96% good LCP and non-blocking <head> stylesheets (90.8%) reach 96% good LCP (1.3s 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 96% (1.3s median).