WordPress LCP element types (img, CSS background, text) and the Core Web Vitals
An <img> tag (35.2%), a CSS background-image (42.5%), a text block (19.4%), or a <video> poster (2.9%): which element triggers Largest Contentful Paint across the web and how each element type performs.
35.2% of WordPress sites use an <img> tag as the LCP element, and 73% of those sites have a good LCP, against 70% of all WordPress sites.
LCP pass rate
Sites with an <img> tag as the LCP element have a good LCP most often: 73%, against 70% of all WordPress sites. Sites with a <video> element as the LCP element have it least often, at 65%.
As the LCP element usage
A CSS background-image is the most used: 42.5% of WordPress sites. An <img> tag is 35.2% of WordPress sites.
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 <video> element sits in time to first byte (TTFB): 1086 ms median for an <img> tag against 1030 ms for a <video> element. Overall median field LCP is 1.9s for an <img> tag (TTFB 1086 ms, load delay 254 ms, load duration 173 ms, render delay 267 ms) versus 2.1s for a <video> element.
As the LCP element per framework
Alpine sets the as the LCP element to an <img> tag on 52% of its sites, and 78% of Alpine sites have a good LCP, against 70% of all sites.
Alpine 349 sites<img> element 52%CSS background-image 28%Text heading or paragraph 15%78%
jQuery 57,286 sitesCSS background-image 43%<img> element 35%Text heading or paragraph 19%69%
Vue 4,721 sitesCSS background-image 49%<img> element 30%Text heading or paragraph 18%67%
React 2,117 sitesCSS background-image 41%<img> element 38%Text heading or paragraph 17%63%LCP element type or the framework
Does the framework explain the as the LCP element difference?
On jQuery, 71% of sites with an <img> tag as the LCP element have a good LCP, against 65% of jQuery sites with a CSS background-image. Within jQuery, sites with an <img> tag have a good LCP more often. On Vue, 71% of sites with an <img> tag as the LCP element have a good LCP, against 65% of Vue sites with a CSS background-image. Within Vue, sites with an <img> tag have a good LCP more 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 73% good LCP (1.9s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (71% good LCP, 1.9s 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.1s median).
Understanding LCP element types
Replace CSS background-image hero sections with standard <img> elements on WordPress. CSS background images are the single most common LCP element on WordPress (42.5% of sites, ahead of 35.2% for <img> and 19.4% for text) because page builders attach section banners via CSS. Moving the hero from a CSS background-image to an <img> lifts WordPress good LCP from 66% to 73% and cuts median LCP from 2.1s to 1.9s.
By Arjen Karel · 63,295 crawled WordPress sites (36,524 with phone Chrome field data, 60,125 sites with as the LCP element, October 2026). How we measured.