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.
2.9% of WordPress sites use a <video> element as the LCP element, and 78% of those sites have a good LCP, against 76% of all WordPress sites.
LCP pass rate
Sites with a <video> element as the LCP element have a good LCP most often: 78%, against 76% of all WordPress sites. Sites with a CSS background-image as the LCP element have it least often, at 73%.
As the LCP element usage
A CSS background-image is the most used: 42.5% of WordPress sites. A <video> element is 2.9% 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 a <video> element and a CSS background-image sits in time to first byte (TTFB): 953 ms median for a <video> element against 1056 ms for a CSS background-image. Overall median field LCP is 1.8s for a <video> element (TTFB 953 ms, load delay 249 ms, load duration 135 ms, render delay 210 ms) versus 1.8s for a CSS background-image.
As the LCP element per framework
On jQuery, 43% of sites use a CSS background-image as the LCP element, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 49% of sites use a CSS background-image, and 75% of Vue sites have a good LCP.
Alpine 349 sites<img> element 52%CSS background-image 28%Text heading or paragraph 15%82%
jQuery 57,286 sitesCSS background-image 43%<img> element 35%Text heading or paragraph 19%75%
Vue 4,721 sitesCSS background-image 49%<img> element 30%Text heading or paragraph 18%75%
React 2,117 sitesCSS background-image 41%<img> element 38%Text heading or paragraph 17%66%LCP element type or the framework
Does the framework explain the as the LCP element difference?
On jQuery, 77% of sites with a <video> element as the LCP element have a good LCP, against 73% of jQuery sites with a CSS background-image. Within jQuery, sites with a <video> element and a CSS background-image have a good LCP about equally often. On Vue, 79% of sites with a <video> element as the LCP element have a good LCP, against 73% of Vue sites with a CSS background-image. Within Vue, sites with a <video> element and a CSS background-image 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 77% good LCP (1.7s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (77% good LCP, 1.7s 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 73% (1.8s 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 73% to 77% and cuts median LCP from 1.8s to 1.7s.
By Arjen Karel · 63,295 crawled WordPress sites (17,005 with desktop Chrome field data, 60,125 sites with as the LCP element, October 2026). How we measured.