Shopify image loading strategies and the Core Web Vitals

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

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: 571 ms median for lazy below-the-fold against 608 ms for eager below-the-fold. Overall median field LCP is 1.4s for lazy below-the-fold (TTFB 403 ms, load delay 571 ms, load duration 207 ms, render delay 313 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 94% of Vue sites have a good LCP, against 95% of all sites. jQuery sets the image loading strategies to eager above-the-fold on 95% of its sites, and 93% 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%95%

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%94%

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%93%

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, 93% of sites with lazy below-the-fold image loading strategies have a good LCP, against 93% 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, 95% of sites with lazy below-the-fold image loading strategies have a good LCP, against 94% 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 583 ms.