Stylesheet loading and placement on Wix sites

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

Sites with inline <style> blocks stylesheet loading and placement have a good CLS most often: 98%, against 98% of all Wix sites. Sites with render-blocking <head> stylesheets CSS loading have it least often, at 97%.

Inline <style> blocks is the most used: 100.0% of Wix sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between inline <style> blocks and render-blocking <head> stylesheets sits in resource load duration: 137 ms median for inline <style> blocks against 130 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.2s for inline <style> blocks (TTFB 419 ms, load delay 455 ms, load duration 137 ms, render delay 151 ms) versus 1.2s for render-blocking <head> stylesheets.

Across the four LCP sub-parts in Chrome's field data, the largest gap between inline <style> blocks and render-blocking <head> stylesheets sits in resource load duration: 137 ms median for inline <style> blocks against 130 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.2s for inline <style> blocks (TTFB 419 ms, load delay 455 ms, load duration 137 ms, render delay 151 ms) versus 1.2s for render-blocking <head> stylesheets.

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

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

FrameworkStylesheet loading and placement on its sitesGood LCP

All Wix sites 5,621 sitesInline <style> blocks 100%Render-blocking in <head> 34%94%

React 5,620 sitesInline <style> blocks 100%Render-blocking in <head> 34%94%

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

Does the framework explain the stylesheet loading and placement difference?

Almost every site with inline <style> blocks stylesheet loading and placement is a React site, and almost every React site has inline <style> blocks stylesheet loading and placement, so the data can't tell inline <style> blocks stylesheet loading and placement and React apart.

Almost every site with inline <style> blocks stylesheet loading and placement is a React site, and almost every React site has inline <style> blocks stylesheet loading and placement, so the data can't tell inline <style> blocks stylesheet loading and placement and React apart.

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

Standard <link rel="stylesheet"> tags in <head> (33.5% of sites, 1,885) block first paint until downloaded (93% good LCP, 1.2s median), while inline <style> blocks (100.0%) reach 94% good LCP and non-blocking <head> stylesheets (0.2%) reach 90% good LCP (1.5s median). Scattering <link rel="stylesheet"> tags inside <body> (1.5% of sites, 87) forces late parser pauses and mid-render style passes, dropping good LCP to 85% (1.5s median).