Stylesheet initiators on React sites

Sites with inline <style> blocks stylesheet initiator type have a good LCP most often: 79%, against 79% of all React sites. Sites with parser-initiated stylesheets CSS initiators 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 parser-initiated stylesheets sits in time to first byte (TTFB): 715 ms median for inline <style> blocks against 919 ms for parser-initiated 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 1.9s for parser-initiated stylesheets.

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

PlatformStylesheet initiator type on its sitesGood LCP

React sites with stylesheet initiator type 9,569 sitesInline <style> blocks 99%HTML parser (<link rel="stylesheet">) 38%Script-injected CSS 36%79%

Wix 5,824 sitesInline <style> blocks 100%Script-injected CSS 31%92%

WordPress 2,342 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 97%Script-injected CSS 46%66%

Inline <style> blocks HTML parser (<link rel="stylesheet">) Script-injected CSS Other initiators (@import / headers)

Does the platform explain the stylesheet initiator type difference?

On Wix, 92% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 90% of Wix sites with script-injected stylesheets. Within Wix, sites with inline <style> blocks and script-injected stylesheets have a good LCP about equally often. On WordPress, 66% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 65% of WordPress sites with parser-initiated stylesheets. Within WordPress, sites with inline <style> blocks and parser-initiated stylesheets have a good LCP about equally often.

Why JavaScript-injected stylesheets delay rendering and trigger layout recalculation

Stylesheets declared in HTML (37.5% of sites, 3,593) are discovered immediately by the preload scanner (71% good LCP, 1.8s median), and inline <style> blocks (99.3%) require zero network round-trips (79% good LCP). When stylesheets are injected at runtime by JavaScript (36.1% of sites, 3,459), CSS discovery waits for script download and execution, dropping good LCP to 77% (1.7s median).