Shopify LCP element types and the Core Web Vitals

Sites with a text block as the LCP element have a good LCP most often: 97%, against 95% of all Shopify sites. Sites with a CSS background-image as the LCP element have it least often, at 92%.

An <img> tag is the most used: 77.0% of Shopify sites. A text block is 8.7% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between a text block and a CSS background-image sits in resource load delay: 585 ms median for a text block against 806 ms for a CSS background-image. Overall median field LCP is 1.4s for a text block (TTFB 410 ms, load delay 585 ms, load duration 176 ms, render delay 295 ms) versus 1.6s for a CSS background-image.

On jQuery, 69% of sites use an <img> tag as the LCP element, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 77% of sites use an <img> tag, and 94% of Vue sites have a good LCP.

FrameworkAs the LCP element on its sitesGood LCP

Shopify sites with as the LCP element 7,873 sites<img> element 77%95%

Vue 892 sites<img> element 77%94%

jQuery 3,031 sites<img> element 69%CSS background-image 19%93%

<img> element CSS background-image Text heading or paragraph <video> element

Does the framework explain the as the LCP element difference?

On jQuery, 95% of sites with a text block as the LCP element have a good LCP, against 93% of jQuery sites with an <img> tag. Within jQuery, sites with a text block and an <img> tag have a good LCP about equally often. On Vue, 98% of sites with a text block as the LCP element have a good LCP, against 94% of Vue sites with an <img> tag. Within Vue, sites with a text block 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 95% 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 (97% good LCP, 1.2s 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 92% (1.5s median).