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 CSS background-image as the LCP element have it least often, at 67%.
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 CSS background-image sits in resource load delay: 247 ms median for an <img> tag against 414 ms for a CSS background-image. Overall median field LCP is 1.8s for an <img> tag (TTFB 1101 ms, load delay 247 ms, load duration 159 ms, render delay 260 ms) versus 2.0s for a CSS background-image.
As the LCP element per framework
Alpine sets the as the LCP element to an <img> tag on 52% of its sites, and 80% 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%80%
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%68%
React 2,117 sitesCSS background-image 41%<img> element 38%Text heading or paragraph 17%61%LCP element type or the framework
Does the framework explain the as the LCP element difference?
On jQuery, 72% of sites with an <img> tag as the LCP element have a good LCP, against 66% of jQuery sites with a CSS background-image. Within jQuery, sites with an <img> tag have a good LCP more often. On Vue, 72% 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.8s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (72% 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 67% (2.0s 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 67% to 73% and cuts median LCP from 2.0s to 1.8s.
By Arjen Karel · 63,295 crawled WordPress sites (60,855 with all devices Chrome field data, 60,125 sites with as the LCP element, October 2026). How we measured.