Shopify LCP element types and the Core Web Vitals
An <img> tag (77.0%), a CSS background-image (9.6%), a text block (8.7%), or a <video> poster (4.6%): which element triggers Largest Contentful Paint across the web and how each element type performs.
4.6% of Shopify sites use a <video> element as the LCP element, and 98% of those sites have a good LCP, against 97% of all Shopify sites.
LCP pass rate
Sites with a <video> element as the LCP element have a good LCP most often: 98%, against 97% of all Shopify sites. Sites with a CSS background-image as the LCP element have it least often, at 95%.
As the LCP element usage
An <img> tag is the most used: 77.0% of Shopify sites. A <video> element is 4.6% of Shopify 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 resource load delay: 584 ms median for a <video> element against 832 ms for a CSS background-image. Overall median field LCP is 1.3s for a <video> element (TTFB 294 ms, load delay 584 ms, load duration 131 ms, render delay 327 ms) versus 1.5s for a CSS background-image.
As the LCP element per framework
On jQuery, 69% of sites use an <img> tag as the LCP element, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 77% of sites use an <img> tag, and 97% of Vue sites have a good LCP.
Vue 892 sites<img> element 77%97%
jQuery 3,031 sites<img> element 69%CSS background-image 19%95%LCP element type or the framework
Does the framework explain the as the LCP element difference?
On jQuery, 97% of sites with a <video> element as the LCP element have a good LCP, against 95% of jQuery sites with an <img> tag. Within jQuery, sites with a <video> element and an <img> tag 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 97% 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 (96% good LCP, 1.1s 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 95% (1.5s median).
Understanding LCP element types
Keep your Shopify storefront hero as a semantic <img> element. Across Shopify stores, 77.0% use an <img> element (97% good LCP, 1.3s median) and 8.7% have a text LCP (96% good LCP), while the 9.6% using a CSS background-image drop to 95% good LCP (1.5s median).
By Arjen Karel · 8,246 crawled Shopify sites (3,818 with desktop Chrome field data, 7,873 sites with as the LCP element, October 2026). How we measured.