Stylesheet initiators on React sites

Sites with inline <style> blocks stylesheet initiator type have a good LCP most often: 85%, against 85% of all React sites. Sites with other CSS initiators CSS initiators have it least often, at 67%.

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 other CSS initiators sits in resource load delay: 439 ms median for inline <style> blocks against 628 ms for other CSS initiators. Overall median field LCP is 1.4s for inline <style> blocks (TTFB 516 ms, load delay 439 ms, load duration 146 ms, render delay 174 ms) versus 1.8s for other CSS initiators.

Wix sets the stylesheet initiator type to inline <style> blocks on 100% of its sites, and 94% of Wix sites have a good LCP, against 85% 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%85%

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

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

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, 94% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 87% of Wix sites with parser-initiated stylesheets. Within Wix, sites with inline <style> blocks have a good LCP more often. On WordPress, 61% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 61% 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 (69% good LCP, 2.0s median), and inline <style> blocks (99.3%) require zero network round-trips (85% 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 81% (1.5s median).