Stylesheet loading and placement on Wix sites

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

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

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 time to first byte (TTFB): 343 ms median for inline <style> blocks against 379 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.2s for inline <style> blocks (TTFB 343 ms, load delay 478 ms, load duration 259 ms, render delay 137 ms) versus 1.3s 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 time to first byte (TTFB): 343 ms median for inline <style> blocks against 379 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.2s for inline <style> blocks (TTFB 343 ms, load delay 478 ms, load duration 259 ms, render delay 137 ms) versus 1.3s for render-blocking <head> stylesheets.

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

React sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 96% of React sites have a good CLS, against 96% 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%92%

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

Inline <style> blocks Render-blocking in <head> Stylesheets inside <body>

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.