Image loading strategies on React sites

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

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): 712 ms median for lazy above-the-fold against 766 ms for eager below-the-fold. Overall median field LCP is 1.5s for lazy above-the-fold (TTFB 712 ms, load delay 459 ms, load duration 152 ms, render delay 177 ms) versus 1.6s for eager below-the-fold.

On Wix, 99% of sites use eager above-the-fold image loading strategies, and 92% of Wix sites have a good LCP, against 79% of all sites. On WordPress, 96% of sites use eager below-the-fold, and 66% 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%79%

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

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

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 92% 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, 64% of sites with lazy above-the-fold image loading strategies have a good LCP, against 65% 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 (414 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 459 ms.