Stylesheet initiators on Wix sites

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

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 parser-initiated stylesheets sits in resource load delay: 446 ms median for inline <style> blocks against 495 ms for parser-initiated 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.3s for parser-initiated stylesheets.

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

FrameworkStylesheet initiator type on its sitesGood LCP

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

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

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 (89% good LCP, 1.4s median), and inline <style> blocks (100.0%) require zero network round-trips (94% 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 92% (1.1s median).