Stylesheet loading and placement on React sites

Sites with inline <style> blocks stylesheet loading and placement have a good LCP most often: 79%, against 79% of all React sites. Sites with non-blocking <head> stylesheets CSS loading have it least often, at 60%.

Sites with inline <style> blocks stylesheet loading and placement have a good CLS most often: 80%, against 80% of all React sites. Sites with <body> stylesheets CSS loading have it least often, at 71%.

Inline <style> blocks is the most used: 99.3% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between inline <style> blocks and non-blocking <head> stylesheets sits in time to first byte (TTFB): 715 ms median for inline <style> blocks against 1134 ms for non-blocking <head> stylesheets. Overall median field LCP is 1.6s for inline <style> blocks (TTFB 715 ms, load delay 414 ms, load duration 142 ms, render delay 192 ms) versus 2.2s for non-blocking <head> stylesheets.

Across the four LCP sub-parts in Chrome's field data, the largest gap between inline <style> blocks and non-blocking <head> stylesheets sits in time to first byte (TTFB): 715 ms median for inline <style> blocks against 1134 ms for non-blocking <head> stylesheets. Overall median field LCP is 1.6s for inline <style> blocks (TTFB 715 ms, load delay 414 ms, load duration 142 ms, render delay 192 ms) versus 2.2s for non-blocking <head> stylesheets.

Wix sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 92% of Wix sites have a good LCP, against 79% of all sites.

Wix sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 96% of Wix sites have a good CLS, against 80% of all sites.

PlatformStylesheet loading and placement on its sitesGood LCP

React sites with stylesheet loading and placement 9,569 sitesInline <style> blocks 99%Render-blocking in <head> 56%Stylesheets inside <body> 14%79%

Wix 5,824 sitesInline <style> blocks 100%Render-blocking in <head> 34%92%

WordPress 2,342 sitesInline <style> blocks 100%Render-blocking in <head> 99%Stylesheets inside <body> 46%Non-blocking in <head> (preload / media) 34%66%

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

Does the platform explain the stylesheet loading and placement difference?

On Wix, 92% of sites with inline <style> blocks stylesheet loading and placement have a good LCP, against 89% of Wix sites with render-blocking <head> stylesheets. Within Wix, sites with inline <style> blocks and render-blocking <head> stylesheets have a good LCP about equally often. On WordPress, 66% of sites with inline <style> blocks stylesheet loading and placement have a good LCP, against 66% of WordPress sites with render-blocking <head> stylesheets. Within WordPress, sites with inline <style> blocks and render-blocking <head> stylesheets have a good LCP about equally often.

On Wix, 96% of sites with inline <style> blocks stylesheet loading and placement have a good CLS, against 95% of Wix sites with render-blocking <head> stylesheets. Within Wix, sites with inline <style> blocks and render-blocking <head> stylesheets have a good CLS about equally often. On WordPress, 75% of sites with inline <style> blocks stylesheet loading and placement have a good CLS, against 75% of WordPress sites with render-blocking <head> stylesheets. Within WordPress, sites with inline <style> blocks and render-blocking <head> stylesheets 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> (56.2% of sites, 5,380) block first paint until downloaded (74% good LCP, 1.7s median), while inline <style> blocks (99.3%) reach 79% good LCP and non-blocking <head> stylesheets (9.8%) reach 60% good LCP (2.2s median). Scattering <link rel="stylesheet"> tags inside <body> (14.1% of sites, 1,351) forces late parser pauses and mid-render style passes, dropping good LCP to 63% (2.1s median).