WordPress stylesheet initiators and the Core Web Vitals

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

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: 341 ms median for inline <style> blocks against 415 ms for other CSS initiators. Overall median field LCP is 1.9s for inline <style> blocks (TTFB 1129 ms, load delay 341 ms, load duration 166 ms, render delay 235 ms) versus 2.1s for other CSS initiators.

Alpine sets the stylesheet initiator type to inline <style> blocks on 100% of its sites, and 80% 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%80%

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%68%

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

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, 68% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 67% 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, 61% of sites with inline <style> blocks stylesheet initiator type have a good LCP, against 61% 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 (70% good LCP, 1.9s median), and inline <style> blocks (99.4%) require zero network round-trips (70% 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.0s median).