Stylesheet initiators on Wix sites

Sites with inline <style> blocks stylesheet initiator type have a good LCP most often: 92%, against 92% of all Wix sites. Sites with script-injected stylesheets CSS initiators have it least often, at 90%.

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 script-injected stylesheets sits in resource load delay: 478 ms median for inline <style> blocks against 509 ms for script-injected 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 script-injected stylesheets.

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

FrameworkStylesheet initiator type on its sitesGood LCP

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

React 5,620 sitesInline <style> blocks 100%Script-injected CSS 31%92%

Inline <style> blocks Script-injected CSS HTML parser (<link rel="stylesheet">)

Does the framework explain the stylesheet initiator type difference?

Almost every site with inline <style> blocks stylesheet initiator type is a React site, and almost every React site has inline <style> blocks stylesheet initiator type, so the data can't tell inline <style> blocks stylesheet initiator type and React apart.

Why JavaScript-injected stylesheets delay rendering and trigger layout recalculation

Stylesheets declared in HTML (5.8% of sites, 324) are discovered immediately by the preload scanner (72% good LCP, 1.7s median), and inline <style> blocks (100.0%) require zero network round-trips (92% good LCP). When stylesheets are injected at runtime by JavaScript (30.6% of sites, 1,718), CSS discovery waits for script download and execution, dropping good LCP to 90% (1.3s median).