Image loading strategies on React sites

Sites with lazy above-the-fold image loading strategies have a good LCP most often: 87%, against 85% of all React sites. Sites with eager below-the-fold image loading have it least often, at 83%.

Eager above-the-fold is the most used: 96.6% of React sites. Lazy above-the-fold is 32.6% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between lazy above-the-fold and eager below-the-fold sits in time to first byte (TTFB): 499 ms median for lazy above-the-fold against 556 ms for eager below-the-fold. Overall median field LCP is 1.3s for lazy above-the-fold (TTFB 499 ms, load delay 456 ms, load duration 140 ms, render delay 173 ms) versus 1.5s for eager below-the-fold.

On Wix, 99% of sites use eager above-the-fold image loading strategies, and 94% of Wix sites have a good LCP, against 85% of all sites. On WordPress, 96% of sites use eager below-the-fold, and 61% of WordPress sites have a good LCP.

PlatformImage loading strategies on its sitesGood LCP

React sites with image loading strategies 9,561 sitesEager above-the-fold <img> 97%CSS background images 82%Eager below-the-fold <img> 82%Lazy below-the-fold (loading="lazy") 57%Lazy above-the-fold (loading="lazy") 33%85%

Wix 5,822 sitesEager above-the-fold <img> 99%CSS background images 91%Eager below-the-fold <img> 74%Lazy below-the-fold (loading="lazy") 62%Lazy above-the-fold (loading="lazy") 41%94%

WordPress 2,342 sitesEager below-the-fold <img> 96%Eager above-the-fold <img> 94%CSS background images 67%Lazy below-the-fold (loading="lazy") 63%Lazy above-the-fold (loading="lazy") 23%61%

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

Does the platform explain the image loading strategies difference?

On Wix, 94% of sites with lazy above-the-fold image loading strategies have a good LCP, against 94% of Wix sites with eager above-the-fold. Within Wix, sites with lazy above-the-fold and eager above-the-fold have a good LCP about equally often. On WordPress, 56% of sites with lazy above-the-fold image loading strategies have a good LCP, against 60% of WordPress sites with eager above-the-fold. Within WordPress, sites with lazy above-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 (439 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 (32.6% of sites), Chromium withholds the network request until style and layout confirm viewport intersection, pushing median LCP resource load delay to 456 ms.