WordPress preloaded font count and the Core Web Vitals

Sites with 3 to 4 preloaded fonts preloaded font count have a good LCP most often: 71%, against 70% of all WordPress sites. Sites with 1 to 2 preloaded fonts font preloads have it least often, at 68%.

Sites with 5+ preloaded fonts preloaded font count have a good CLS most often: 90%, against 90% of all WordPress sites. Sites with 3 to 4 preloaded fonts font preloads have it least often, at 90%.

One in ten WordPress sites uses preloaded font count, and 56% of those use 1 to 2 preloaded fonts. 3 to 4 preloaded fonts is 25% of the sites with font preloads, 2.9% of all WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 3 to 4 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 1024 ms median for 3 to 4 preloaded fonts against 1113 ms for 0 preloaded fonts. Overall median field LCP is 1.9s for 3 to 4 preloaded fonts (TTFB 1024 ms, load delay 336 ms, load duration 181 ms, render delay 265 ms) versus 2.0s for 0 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 3 to 4 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 1024 ms median for 3 to 4 preloaded fonts against 1113 ms for 0 preloaded fonts. Overall median field LCP is 1.9s for 3 to 4 preloaded fonts (TTFB 1024 ms, load delay 336 ms, load duration 181 ms, render delay 265 ms) versus 2.0s for 0 preloaded fonts.

On jQuery, 88% of sites use 0 preloaded fonts preloaded font count, and 69% of jQuery sites have a good LCP, against 70% of all sites. On Vue, 84% of sites use 0 preloaded fonts, and 67% of Vue sites have a good LCP.

On jQuery, 88% of sites use 0 preloaded fonts preloaded font count, and 90% of jQuery sites have a good CLS, against 90% of all sites. On Vue, 84% of sites use 0 preloaded fonts, and 90% of Vue sites have a good CLS.

FrameworkPreloaded font count on its sitesGood LCP

All WordPress sites 63,295 sites0 preloaded fonts 88%70%

Alpine 380 sites0 preloaded fonts 84%78%

jQuery 60,314 sites0 preloaded fonts 88%69%

Vue 4,844 sites0 preloaded fonts 84%67%

React 2,233 sites0 preloaded fonts 85%63%

0 preloaded fonts 1 to 2 preloaded fonts 3 to 4 preloaded fonts 5+ preloaded fonts

Does the framework explain the preloaded font count difference?

On jQuery, 70% of sites with 3 to 4 preloaded fonts preloaded font count have a good LCP, against 69% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good LCP about equally often. On Vue, 72% of sites with 3 to 4 preloaded fonts preloaded font count have a good LCP, against 66% of Vue sites with 0 preloaded fonts. Within Vue, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On jQuery, 90% of sites with 5+ preloaded fonts preloaded font count have a good CLS, against 90% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 5+ preloaded fonts and 0 preloaded fonts have a good CLS about equally often. On Vue, 90% of sites with 5+ preloaded fonts preloaded font count have a good CLS, against 90% of Vue sites with 0 preloaded fonts. Within Vue, sites with 5+ preloaded fonts and 0 preloaded fonts have a good CLS about equally often.

Why preloading 1 to 2 fonts helps LCP while preloading 5+ fonts starves the hero image

Normally the browser discovers web fonts only after downloading CSS and matching @font-face rules to DOM nodes. Preloading 1 to 2 core WOFF2 files (6.6% of sites, 4,171) starts font fetches immediately and lifts good LCP to 68% (2.0s median), ahead of the 88.3% with 0 font preloads (70% good LCP, 1.9s median). However, preloading 3 to 4 fonts (2.9%) drops good LCP to 71% (1.9s median), and preloading 5 or more fonts (2.2%) saturates early bandwidth and drops good LCP to 69% (2.0s median).