WordPress image loading strategies and the Core Web Vitals

Sites with eager above-the-fold image loading strategies have a good LCP most often: 70%, against 70% of all WordPress sites. Sites with lazy above-the-fold image loading have it least often, at 66%.

Eager below-the-fold is the most used: 93.4% of WordPress sites. Eager above-the-fold is 93.3% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between eager above-the-fold and lazy above-the-fold sits in time to first byte (TTFB): 1133 ms median for eager above-the-fold against 1224 ms for lazy above-the-fold. Overall median field LCP is 1.9s for eager above-the-fold (TTFB 1133 ms, load delay 337 ms, load duration 166 ms, render delay 238 ms) versus 2.1s for lazy above-the-fold.

Vue sets the image loading strategies to eager above-the-fold on 97% of its sites, and 68% of Vue sites have a good LCP, against 70% of all sites. jQuery sets the image loading strategies to eager below-the-fold on 94% of its sites, and 69% of jQuery sites have a good LCP.

FrameworkImage loading strategies on its sitesGood LCP

WordPress sites with image loading strategies 63,233 sitesEager below-the-fold <img> 93%Eager above-the-fold <img> 93%CSS background images 67%Lazy below-the-fold (loading="lazy") 55%Lazy above-the-fold (loading="lazy") 19%70%

Alpine 380 sitesEager below-the-fold <img> 97%Eager above-the-fold <img> 94%CSS background images 57%Lazy below-the-fold (loading="lazy") 56%Lazy above-the-fold (loading="lazy") 24%80%

jQuery 60,270 sitesEager below-the-fold <img> 94%Eager above-the-fold <img> 93%CSS background images 68%Lazy below-the-fold (loading="lazy") 56%Lazy above-the-fold (loading="lazy") 19%69%

Vue 4,842 sitesEager above-the-fold <img> 97%Eager below-the-fold <img> 95%CSS background images 72%Lazy below-the-fold (loading="lazy") 57%Lazy above-the-fold (loading="lazy") 19%68%

React 2,233 sitesEager below-the-fold <img> 96%Eager above-the-fold <img> 94%CSS background images 66%Lazy below-the-fold (loading="lazy") 64%Lazy above-the-fold (loading="lazy") 23%61%

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

Does the framework explain the image loading strategies difference?

Almost every site with eager above-the-fold image loading strategies is a jQuery site, and almost every jQuery site has eager above-the-fold image loading strategies, so the data can't tell eager above-the-fold image loading strategies and jQuery apart. On Vue, 68% of sites with eager above-the-fold image loading strategies have a good LCP, against 68% of Vue sites with eager below-the-fold. Within Vue, sites with eager above-the-fold and eager below-the-fold have a good LCP about equally often. On React, 60% of sites with eager above-the-fold image loading strategies have a good LCP, against 60% of React sites with eager below-the-fold. Within React, sites with eager above-the-fold and eager below-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 (337 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 (18.6% of sites), Chromium withholds the network request until style and layout confirm viewport intersection, pushing median LCP resource load delay to 374 ms.