The State of Web Vitals

LCP element types on React sites

An <img> tag (60.6%), a CSS background-image (14.6%), a text block (22.7%), or a <video> poster (2.1%): which element triggers Largest Contentful Paint across the web and how each element type performs.

Field data PhoneDesktopAll Scope All sites October 2026 edition · Phone field outcomes · React sites only
React Scoped to 9,570 sites out of 210,902 analyzed (frameworks) Compare with all sites →

60.6% of React sites use an <img> tag as the LCP element, and 88% of those sites have a good LCP, against 84% of all React sites.

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
1

LCP pass rate

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

SitesGood, needs improvement, poor LCPMedian
All React sites5,48884%1.4s
<img> element 60.6%3,29688%1.3s
Text heading or paragraph 22.7%1,16086%1.3s
<video> element 2.1%12182%1.5s
CSS background-image 14.6%80667%2.0s
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
2

As the LCP element usage

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

<img> element 60.6% Text heading or paragraph 22.7% CSS background-image 14.6%
<img> element 60.6% Text heading or paragraph 22.7% CSS background-image 14.6% <video> element 2.1%
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
3

Where each LCP element type spends time: the four LCP phases

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): 459 ms median for an <img> tag against 921 ms for a CSS background-image. Overall median field LCP is 1.3s for an <img> tag (TTFB 459 ms, load delay 435 ms, load duration 125 ms, render delay 174 ms) versus 2.0s for a CSS background-image.

Median LCP phase breakdown (Chrome field p75) Load delay Median LCP
React sites with as the LCP element 4,084499 ms433 ms433 mslab 440 ms1.4s
<video> element 85490 ms397 ms194 ms397 mslab 416 ms1.6s
CSS background-image 648921 ms429 ms223 ms429 mslab 421 ms2.0s
Text heading or paragraph 777470 ms434 ms434 mslab 446 ms1.3s
<img> element 2,574459 ms435 ms435 mslab 444 ms1.3s
TTFB Resource load delay Resource load time Element render delay
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
4

As the LCP element per platform

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 84% 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%84%
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%63%
<img> element Text heading or paragraph CSS background-image <video> element
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
5

LCP element type or the platform

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, 67% of sites with an <img> tag as the LCP element have a good LCP, against 62% 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 88% 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 (86% 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 67% (2.0s median).

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
6

Understanding LCP element types

Use a standard HTML <img> element (with object-fit: cover if it sits behind a headline) or a fast text heading for your hero section, and avoid CSS background-image for above-the-fold banners. Across all audited sites, <img> elements (60.6% of sites) reach 88% good LCP (1.3s median) and text LCP elements (22.7% of sites) reach 86% good LCP (1.3s median), whereas CSS background-image heroes (14.6% of sites) fall to 67% good LCP (2.0s median) and <video> elements (2.1%) sit at 82%.

Go fix it Background images are evil → Keep text visible during font load → Optimize the LCP image →
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 9,390 sites with as the LCP elementBy Arjen Karel · corewebvitals.io/state-of-cwv
Related signals LCP loading attribute → LCP image format → LCP origin → LCP priority hint → By Arjen Karel · 9,570 crawled React sites (5,488 with phone Chrome field data, 9,390 sites with as the LCP element, October 2026) · How we measured