Shopify preloaded font count and the Core Web Vitals

Sites with 1 to 2 preloaded fonts preloaded font count have a good LCP most often: 97%, against 96% of all Shopify sites. Sites with 5+ preloaded fonts font preloads have it least often, at 94%.

Sites with 1 to 2 preloaded fonts preloaded font count have a good CLS most often: 96%, against 94% of all Shopify sites. Sites with 5+ preloaded fonts font preloads have it least often, at 92%.

70.3% of Shopify sites use preloaded font count, and three in four of those use 1 to 2 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 1 to 2 preloaded fonts and 0 preloaded fonts sits in resource load delay: 543 ms median for 1 to 2 preloaded fonts against 696 ms for 0 preloaded fonts. Overall median field LCP is 1.3s for 1 to 2 preloaded fonts (TTFB 383 ms, load delay 543 ms, load duration 221 ms, render delay 254 ms) versus 1.4s for 0 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 1 to 2 preloaded fonts and 0 preloaded fonts sits in resource load delay: 543 ms median for 1 to 2 preloaded fonts against 696 ms for 0 preloaded fonts. Overall median field LCP is 1.3s for 1 to 2 preloaded fonts (TTFB 383 ms, load delay 543 ms, load duration 221 ms, render delay 254 ms) versus 1.4s for 0 preloaded fonts.

Vue sets the preloaded font count to 1 to 2 preloaded fonts on 54% of its sites, and 95% of Vue sites have a good LCP, against 96% of all sites.

Vue sets the preloaded font count to 1 to 2 preloaded fonts on 54% of its sites, and 91% of Vue sites have a good CLS, against 94% of all sites.

FrameworkPreloaded font count on its sitesGood LCP

All Shopify sites 8,246 sites1 to 2 preloaded fonts 53%0 preloaded fonts 30%3 to 4 preloaded fonts 14%96%

Vue 933 sites1 to 2 preloaded fonts 54%0 preloaded fonts 28%3 to 4 preloaded fonts 15%95%

jQuery 3,153 sites0 preloaded fonts 46%1 to 2 preloaded fonts 39%3 to 4 preloaded fonts 12%94%

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

Does the framework explain the preloaded font count difference?

On jQuery, 95% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 93% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good LCP about equally often. On Vue, 97% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 92% of Vue sites with 0 preloaded fonts. Within Vue, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On jQuery, 94% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 88% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 1 to 2 preloaded fonts have a good CLS more often. On Vue, 92% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 87% of Vue sites with 0 preloaded fonts. Within Vue, sites with 1 to 2 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 (53.2% of sites, 4,389) starts font fetches immediately and lifts good LCP to 97% (1.2s median), ahead of the 29.7% with 0 font preloads (95% good LCP, 1.4s median). However, preloading 3 to 4 fonts (14.0%) drops good LCP to 96% (1.4s median), and preloading 5 or more fonts (3.1%) saturates early bandwidth and drops good LCP to 94% (1.5s median).