WordPress stylesheet initiators and the Core Web Vitals

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

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 time to first byte (TTFB): 999 ms median for inline <style> blocks against 912 ms for other CSS initiators. Overall median field LCP is 1.8s for inline <style> blocks (TTFB 999 ms, load delay 289 ms, load duration 129 ms, render delay 219 ms) versus 1.9s for other CSS initiators.

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

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

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

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

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

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, 75% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 74% 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, 66% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 65% 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 (76% good LCP, 1.8s median), and inline <style> blocks (99.4%) require zero network round-trips (76% 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 73% (1.8s median).