WordPress stylesheet initiators and the Core Web Vitals

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

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 other CSS initiators sits in resource load delay: 355 ms median for inline <style> blocks against 443 ms for other CSS initiators. Overall median field LCP is 2.0s for inline <style> blocks (TTFB 1117 ms, load delay 355 ms, load duration 182 ms, render delay 243 ms) versus 2.0s for other CSS initiators.

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

FrameworkStylesheet initiator type on its sitesGood LCP

WordPress sites with stylesheet initiator type 63,289 sitesInline <style> blocks 99%HTML parser (<link rel="stylesheet">) 97%Script-injected CSS 40%70%

Alpine 380 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 97%Script-injected CSS 36%78%

jQuery 60,308 sitesInline <style> blocks 99%HTML parser (<link rel="stylesheet">) 97%Script-injected CSS 41%69%

Vue 4,844 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 95%Script-injected CSS 88%67%

React 2,233 sitesInline <style> blocks 100%HTML parser (<link rel="stylesheet">) 97%Script-injected CSS 47%63%

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

Does the framework explain the stylesheet initiator type difference?

Almost every site with inline <style> blocks stylesheet initiator type is a jQuery site, and almost every jQuery site has inline <style> blocks stylesheet initiator type, so the data can't tell inline <style> blocks stylesheet initiator type and jQuery apart. On Vue, 67% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 66% of Vue sites with parser-initiated stylesheets. Within Vue, sites with inline <style> blocks and parser-initiated stylesheets have a good LCP about equally often. On React, 63% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 63% of React sites with parser-initiated stylesheets. Within React, 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 (97.4% of sites, 61,625) are discovered immediately by the preload scanner (69% good LCP, 2.0s median), and inline <style> blocks (99.4%) require zero network round-trips (69% good LCP). When stylesheets are injected at runtime by JavaScript (40.1% of sites, 25,378), CSS discovery waits for script download and execution, dropping good LCP to 66% (2.1s median).