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 97% 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: 89%, against 86% of all Shopify sites. Sites with 5+ preloaded fonts font preloads have it least often, at 80%.

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: 570 ms median for 1 to 2 preloaded fonts against 725 ms for 0 preloaded fonts. Overall median field LCP is 1.2s for 1 to 2 preloaded fonts (TTFB 297 ms, load delay 570 ms, load duration 158 ms, render delay 275 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: 570 ms median for 1 to 2 preloaded fonts against 725 ms for 0 preloaded fonts. Overall median field LCP is 1.2s for 1 to 2 preloaded fonts (TTFB 297 ms, load delay 570 ms, load duration 158 ms, render delay 275 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 97% of Vue sites have a good LCP, against 97% of all sites.

Vue sets the preloaded font count to 1 to 2 preloaded fonts on 54% of its sites, and 80% of Vue sites have a good CLS, against 86% 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%97%

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

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

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, 97% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 94% 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, 98% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 95% 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, 83% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 76% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 1 to 2 preloaded fonts have a good CLS more often. On Vue, 82% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 76% 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 (96% good LCP, 1.4s median). However, preloading 3 to 4 fonts (14.0%) drops good LCP to 96% (1.3s median), and preloading 5 or more fonts (3.1%) saturates early bandwidth and drops good LCP to 94% (1.5s median).