WordPress network resource types and the Core Web Vitals

Sites with HTML documents network resource type mix have a good LCP most often: 70%, against 70% of all WordPress sites. Sites with XHR requests resource types have it least often, at 67%.

HTML documents is the most used: 100.0% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between HTML documents and XHR requests sits in element render delay: 242 ms median for HTML documents against 264 ms for XHR requests. Overall median field LCP is 2.0s for HTML documents (TTFB 1116 ms, load delay 355 ms, load duration 181 ms, render delay 242 ms) versus 2.0s for XHR requests.

jQuery sets the network resource type mix to HTML documents on 100% of its sites, and 69% of jQuery sites have a good LCP, against 70% of all sites. Vue sets the network resource type mix to script requests on 100% of its sites, and 67% of Vue sites have a good LCP.

FrameworkNetwork resource type mix on its sitesGood LCP

All WordPress sites 63,295 sitesHTML document 100%JavaScript files 100%Images 100%CSS stylesheets 99%Web fonts 97%Other resources (pings / beacons / manifests) 94%Fetch API requests 61%XMLHttpRequest (XHR) calls 46%70%

Alpine 380 sitesImages 100%JavaScript files 100%HTML document 100%CSS stylesheets 99%Other resources (pings / beacons / manifests) 96%Web fonts 96%Fetch API requests 85%XMLHttpRequest (XHR) calls 66%78%

jQuery 60,314 sitesJavaScript files 100%HTML document 100%Images 100%CSS stylesheets 99%Web fonts 98%Other resources (pings / beacons / manifests) 95%Fetch API requests 62%XMLHttpRequest (XHR) calls 46%69%

Vue 4,844 sitesJavaScript files 100%HTML document 100%Images 100%CSS stylesheets 100%Web fonts 98%Other resources (pings / beacons / manifests) 97%Fetch API requests 47%XMLHttpRequest (XHR) calls 45%67%

React 2,233 sitesImages 100%JavaScript files 100%HTML document 100%CSS stylesheets 99%Web fonts 99%Other resources (pings / beacons / manifests) 97%Fetch API requests 76%XMLHttpRequest (XHR) calls 59%63%

HTML document JavaScript files Images CSS stylesheets Web fonts Other resources (pings / beacons / manifests) Fetch API requests XMLHttpRequest (XHR) calls

Does the framework explain the network resource type mix difference?

Almost every site with HTML documents network resource type mix is a jQuery site, and almost every jQuery site has HTML documents network resource type mix, so the data can't tell HTML documents network resource type mix and jQuery apart. On Vue, 67% of sites with HTML documents network resource type mix have a good LCP, against 67% of Vue sites with script requests. Within Vue, sites with HTML documents and script requests have a good LCP about equally often. On React, 63% of sites with HTML documents network resource type mix have a good LCP, against 63% of React sites with script requests. Within React, sites with HTML documents and script requests have a good LCP about equally often.

How early fetch() and XHR API calls compete with critical rendering assets

Almost every web page loads an HTML document (100.0%), images (99.9%), scripts (99.9%), stylesheets (99.2%), and web fonts (97.2%, 69% good LCP at a 2.0s median). However, 61.4% of sites (38,867) also fire client-side fetch() requests during initial load (67% good LCP, 2.0s median) and 45.5% (28,814) fire XHR calls (67% good LCP, 2.0s median), often to fetch client-rendered content, A/B test configs, or cart state.