Shopify image loading strategies and the Core Web Vitals

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

Eager above-the-fold is the most used: 95.3% of Shopify sites. CSS background is 33.1% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between CSS background and eager below-the-fold sits in resource load delay: 676 ms median for CSS background against 646 ms for eager below-the-fold. Overall median field LCP is 1.3s for CSS background (TTFB 300 ms, load delay 676 ms, load duration 155 ms, render delay 294 ms) versus 1.3s for eager below-the-fold.

On jQuery, 95% of sites use eager above-the-fold image loading strategies, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 96% of sites use eager above-the-fold, and 97% of Vue 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%97%

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

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

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, 96% of sites with CSS background image loading strategies have a good LCP, against 95% of jQuery sites with eager above-the-fold. Within jQuery, sites with CSS background and eager above-the-fold have a good LCP about equally often. On Vue, 98% of sites with CSS background image loading strategies have a good LCP, against 96% of Vue sites with eager above-the-fold. Within Vue, sites with CSS background 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 (630 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 622 ms.