WordPress image loading strategies and the Core Web Vitals

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

Eager below-the-fold is the most used: 93.4% of WordPress sites. CSS background is 67.2% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between CSS background and lazy above-the-fold sits in time to first byte (TTFB): 980 ms median for CSS background against 1094 ms for lazy above-the-fold. Overall median field LCP is 1.8s for CSS background (TTFB 980 ms, load delay 302 ms, load duration 127 ms, render delay 217 ms) versus 1.9s for lazy above-the-fold.

Vue sets the image loading strategies to CSS background on 72% of its sites, and 75% of Vue sites have a good LCP, against 76% of all sites. jQuery sets the image loading strategies to eager below-the-fold on 94% of its sites, and 75% 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%76%

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

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

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

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

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?

On jQuery, 75% of sites with CSS background image loading strategies have a good LCP, against 75% of jQuery sites with eager below-the-fold. Within jQuery, sites with CSS background and eager below-the-fold have a good LCP about equally often. On Vue, 74% of sites with CSS background image loading strategies have a good LCP, against 75% of Vue sites with eager below-the-fold. Within Vue, sites with CSS background 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 (287 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 316 ms.