LCP element types on React sites

Sites with an <img> tag as the LCP element have a good LCP most often: 89%, against 85% of all React sites. Sites with a CSS background-image as the LCP element have it least often, at 66%.

An <img> tag is the most used: 60.6% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between an <img> tag and a CSS background-image sits in time to first byte (TTFB): 474 ms median for an <img> tag against 939 ms for a CSS background-image. Overall median field LCP is 1.3s for an <img> tag (TTFB 474 ms, load delay 445 ms, load duration 144 ms, render delay 169 ms) versus 2.0s for a CSS background-image.

Wix sets the as the LCP element to an <img> tag on 71% of its sites, and 94% of Wix sites have a good LCP, against 85% of all sites.

PlatformAs the LCP element on its sitesGood LCP

React sites with as the LCP element 9,390 sites<img> element 61%Text heading or paragraph 23%CSS background-image 15%85%

Wix 5,791 sites<img> element 71%Text heading or paragraph 26%94%

WordPress 2,219 sitesCSS background-image 41%<img> element 38%Text heading or paragraph 17%61%

<img> element Text heading or paragraph CSS background-image <video> element

Does the platform explain the as the LCP element difference?

On Wix, 94% of sites with an <img> tag as the LCP element have a good LCP, against 95% of Wix sites with a text block. Within Wix, sites with an <img> tag and a text block have a good LCP about equally often. On WordPress, 64% of sites with an <img> tag as the LCP element have a good LCP, against 63% of WordPress sites with a text block. Within WordPress, sites with an <img> tag and a text block have a good LCP about equally often.

Why <img> and text blocks beat CSS background-image heroes

An <img> element in the HTML markup is visible to Chrome's preload scanner immediately and supports fetchpriority="high", srcset, and modern formats, reaching 89% good LCP (1.3s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (87% good LCP, 1.3s median). A CSS background-image hides the image URL from the preload scanner until stylesheets are parsed and matched against the DOM, dropping good LCP to 66% (2.0s median).