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 3 to 4 preloaded fonts preloaded font count have a good CLS most often: 90%, against 89% of all WordPress sites. Sites with 1 to 2 preloaded fonts font preloads have it least often, at 88%.

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): 1067 ms median for 3 to 4 preloaded fonts against 1124 ms for 0 preloaded fonts. Overall median field LCP is 1.9s for 3 to 4 preloaded fonts (TTFB 1067 ms, load delay 316 ms, load duration 168 ms, render delay 256 ms) versus 1.9s 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): 1067 ms median for 3 to 4 preloaded fonts against 1124 ms for 0 preloaded fonts. Overall median field LCP is 1.9s for 3 to 4 preloaded fonts (TTFB 1067 ms, load delay 316 ms, load duration 168 ms, render delay 256 ms) versus 1.9s 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 68% of Vue sites have a good LCP.

On jQuery, 88% of sites use 0 preloaded fonts preloaded font count, and 89% of jQuery sites have a good CLS, against 89% of all sites. On Vue, 84% of sites use 0 preloaded fonts, and 89% 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%80%

jQuery 60,314 sites0 preloaded fonts 88%69%

Vue 4,844 sites0 preloaded fonts 84%68%

React 2,233 sites0 preloaded fonts 85%61%

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, 71% of sites with 3 to 4 preloaded fonts preloaded font count have a good LCP, against 70% 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, 76% 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 have a good LCP more often.

On jQuery, 90% of sites with 3 to 4 preloaded fonts preloaded font count have a good CLS, against 89% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good CLS about equally often. On Vue, 87% of sites with 3 to 4 preloaded fonts preloaded font count have a good CLS, against 89% of Vue sites with 0 preloaded fonts. Within Vue, sites with 3 to 4 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 (71% 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).