Shopify image loading strategies and the Core Web Vitals

Sites with lazy below-the-fold image loading strategies have a good LCP most often: 96%, against 96% of all Shopify sites. Sites with eager below-the-fold image loading have it least often, at 95%.

Eager above-the-fold is the most used: 95.3% of Shopify sites. Lazy below-the-fold is 79.9% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between lazy below-the-fold and eager below-the-fold sits in resource load delay: 567 ms median for lazy below-the-fold against 607 ms for eager below-the-fold. Overall median field LCP is 1.3s for lazy below-the-fold (TTFB 391 ms, load delay 567 ms, load duration 209 ms, render delay 301 ms) versus 1.4s for eager below-the-fold.

Vue sets the image loading strategies to lazy below-the-fold on 86% of its sites, and 95% of Vue sites have a good LCP, against 96% of all sites. jQuery sets the image loading strategies to eager above-the-fold on 95% of its sites, and 94% of jQuery sites have a good LCP.

FrameworkImage loading strategies on its sitesGood LCP

Shopify sites with image loading strategies 8,240 sitesEager above-the-fold <img> 95%Eager below-the-fold <img> 84%Lazy below-the-fold (loading="lazy") 80%Lazy above-the-fold (loading="lazy") 58%CSS background images 33%96%

Vue 933 sitesEager above-the-fold <img> 96%Eager below-the-fold <img> 89%Lazy below-the-fold (loading="lazy") 86%Lazy above-the-fold (loading="lazy") 61%CSS background images 33%95%

jQuery 3,149 sitesEager above-the-fold <img> 95%Eager below-the-fold <img> 91%Lazy below-the-fold (loading="lazy") 62%Lazy above-the-fold (loading="lazy") 46%CSS background images 45%94%

Eager above-the-fold <img> Eager below-the-fold <img> Lazy below-the-fold (loading="lazy") Lazy above-the-fold (loading="lazy") CSS background images

Does the framework explain the image loading strategies difference?

On jQuery, 94% of sites with lazy below-the-fold image loading strategies have a good LCP, against 94% of jQuery sites with eager above-the-fold. Within jQuery, sites with lazy below-the-fold and eager above-the-fold have a good LCP about equally often. On Vue, 96% of sites with lazy below-the-fold image loading strategies have a good LCP, against 95% of Vue sites with eager above-the-fold. Within Vue, sites with lazy below-the-fold and eager above-the-fold have a good LCP about equally often.

How browser viewport intersection gates lazy image fetches

Standard <img> elements without loading="lazy" are queued by the HTML preload scanner before layout runs (587 ms median LCP load delay on sites with eager above-the-fold images). When loading="lazy" is present on an image inside the initial viewport (58.4% of sites), Chromium withholds the network request until style and layout confirm viewport intersection, pushing median LCP resource load delay to 579 ms.