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: 97%, against 97% 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 resource load duration: 110 ms median for inline <style> blocks against 105 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.1s for inline <style> blocks (TTFB 404 ms, load delay 446 ms, load duration 110 ms, render delay 150 ms) versus 1.1s 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: 110 ms median for inline <style> blocks against 105 ms for render-blocking <head> stylesheets. Overall median field LCP is 1.1s for inline <style> blocks (TTFB 404 ms, load delay 446 ms, load duration 110 ms, render delay 150 ms) versus 1.1s 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 97% of React sites have a good CLS, against 97% 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>

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.