WordPress stylesheet loading and placement and the Core Web Vitals

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

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

Inline <style> blocks is the most used: 99.4% of WordPress 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): 999 ms median for inline <style> blocks against 1209 ms for non-blocking <head> stylesheets. Overall median field LCP is 1.8s for inline <style> blocks (TTFB 999 ms, load delay 289 ms, load duration 129 ms, render delay 219 ms) versus 2.0s 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): 999 ms median for inline <style> blocks against 1209 ms for non-blocking <head> stylesheets. Overall median field LCP is 1.8s for inline <style> blocks (TTFB 999 ms, load delay 289 ms, load duration 129 ms, render delay 219 ms) versus 2.0s for non-blocking <head> stylesheets.

Alpine sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 82% of Alpine sites have a good LCP, against 76% of all sites. Vue sets the stylesheet loading and placement to render-blocking <head> stylesheets on 100% of its sites, and 75% of Vue sites have a good LCP.

Alpine sets the stylesheet loading and placement to inline <style> blocks on 100% of its sites, and 81% of Alpine sites have a good CLS, against 78% of all sites. Vue sets the stylesheet loading and placement to render-blocking <head> stylesheets on 100% of its sites, and 75% of Vue sites have a good CLS.

FrameworkStylesheet loading and placement on its sitesGood LCP

WordPress sites with stylesheet loading and placement 63,291 sitesInline <style> blocks 99%Render-blocking in <head> 99%Stylesheets inside <body> 36%Non-blocking in <head> (preload / media) 21%76%

Alpine 380 sitesInline <style> blocks 100%Render-blocking in <head> 98%Stylesheets inside <body> 29%Non-blocking in <head> (preload / media) 16%82%

jQuery 60,310 sitesInline <style> blocks 99%Render-blocking in <head> 99%Stylesheets inside <body> 37%Non-blocking in <head> (preload / media) 21%75%

Vue 4,844 sitesRender-blocking in <head> 100%Inline <style> blocks 100%Stylesheets inside <body> 39%Non-blocking in <head> (preload / media) 18%75%

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

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 jQuery site, and almost every jQuery site has inline <style> blocks stylesheet loading and placement, so the data can't tell inline <style> blocks stylesheet loading and placement and jQuery apart. On Vue, 75% of sites with inline <style> blocks stylesheet loading and placement have a good LCP, against 75% of Vue sites with render-blocking <head> stylesheets. Within Vue, sites with inline <style> blocks and render-blocking <head> stylesheets have a good LCP about equally often. On React, 66% of sites with inline <style> blocks stylesheet loading and placement have a good LCP, against 65% of React sites with render-blocking <head> stylesheets. Within React, sites with inline <style> blocks and render-blocking <head> stylesheets have a good LCP about equally often.

Almost every site with inline <style> blocks stylesheet loading and placement is a jQuery site, and almost every jQuery site has inline <style> blocks stylesheet loading and placement, so the data can't tell inline <style> blocks stylesheet loading and placement and jQuery apart. On Vue, 75% of sites with inline <style> blocks stylesheet loading and placement have a good CLS, against 74% of Vue sites with render-blocking <head> stylesheets. Within Vue, sites with inline <style> blocks and render-blocking <head> stylesheets have a good CLS about equally often. On React, 75% of sites with inline <style> blocks stylesheet loading and placement have a good CLS, against 75% of React sites with render-blocking <head> stylesheets. Within React, 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> (98.9% of sites, 62,581) block first paint until downloaded (76% good LCP, 1.7s median), while inline <style> blocks (99.4%) reach 76% good LCP and non-blocking <head> stylesheets (20.7%) reach 67% good LCP (2.0s median). Scattering <link rel="stylesheet"> tags inside <body> (35.7% of sites, 22,615) forces late parser pauses and mid-render style passes, dropping good LCP to 68% (2.0s median).