LCP element types on React sites

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

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): 575 ms median for an <img> tag against 1112 ms for a CSS background-image. Overall median field LCP is 1.5s for an <img> tag (TTFB 575 ms, load delay 418 ms, load duration 142 ms, render delay 182 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 92% of Wix sites have a good LCP, against 79% 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%79%

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

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

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

Does the platform explain the as the LCP element difference?

On Wix, 92% of sites with an <img> tag as the LCP element have a good LCP, against 92% 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, 69% of sites with an <img> tag as the LCP element have a good LCP, against 68% 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 84% good LCP (1.4s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (79% good LCP, 1.5s 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 65% (1.9s median).