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: 97%, against 97% 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: 86%, against 86% of all Shopify sites. Sites with <body> stylesheets CSS loading have it least often, at 85%.

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 time to first byte (TTFB): 305 ms median for non-blocking <head> stylesheets against 304 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.3s for non-blocking <head> stylesheets (TTFB 305 ms, load delay 630 ms, load duration 153 ms, render delay 306 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 time to first byte (TTFB): 305 ms median for non-blocking <head> stylesheets against 304 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.3s for non-blocking <head> stylesheets (TTFB 305 ms, load delay 630 ms, load duration 153 ms, render delay 306 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 97% of Vue sites have a good LCP, against 97% of all sites. jQuery sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 95% 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 80% of Vue sites have a good CLS, against 86% of all sites. jQuery sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 80% 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%97%

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

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

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, 95% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP, against 95% 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, 97% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good LCP, against 97% 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, 80% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS, against 80% 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, 81% of sites with non-blocking <head> stylesheets stylesheet loading and placement have a good CLS, against 80% 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 97% good LCP and non-blocking <head> stylesheets (90.8%) reach 97% 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 97% (1.3s median).