Shopify LCP image loading and the Core Web Vitals
No loading attribute, loading="lazy", or loading="eager" on the LCP image: how many sites use each, where the 11 ms lazy-load delay shows up, and whether fetchpriority="high" overrides it.
Of the Shopify sites whose LCP element is an <img>, 31.2% put loading="lazy" on that image. 46.0% leave loading at the browser default and 22.8% set loading="eager". Across Shopify sites, 96% with default loading and 96% with a lazy-loaded LCP image have a good LCP. In Chrome's field data, loading="lazy" adds 11 ms of resource load delay before the image request starts (585 ms against 574 ms).
LCP pass rate
Sites with loading="lazy" have a good LCP most often at 96%, followed by no loading attribute at 96% and loading="eager" at 94%. Within Shopify, default loading and loading="lazy" have a good LCP about equally often.
LCP image loading usage
An <img> element is the Largest Contentful Paint element on 77.0% of audited Shopify sites, ahead of CSS background images (9.6%) and text blocks (8.7%). Among the 6,066 Shopify sites with an <img> LCP element, 46.0% omit the loading attribute, 31.2% set loading="lazy", and 22.8% set loading="eager".
Where lazy LCP images lose time: the four LCP phases
Putting loading="lazy" on the LCP image raises median resource load delay from 574 ms to 585 ms in Chrome's field data. That is a 11 ms wait before the browser starts downloading the image. Without loading="lazy", Chrome's preload scanner queues the <img> as soon as it reads the HTML. With loading="lazy", Chrome holds the request back until layout confirms the image sits in the viewport. Sites with loading="eager" show a 571 ms load delay in the field because many of them also preload other assets or load the hero image from a script.
LCP loading combined with fetchpriority and preload
Adding fetchpriority="high" to a lazy-loaded LCP image does not fix the lazy-load delay. The 21 sites with both attributes still wait 822 ms before the image request starts, and 100% have a good LCP. In Chromium, ShouldDeferImageLoad runs before resource priority is assigned, so the request stays deferred until layout.
| loading attribute | No priority hint | fetchpriority="high" | <link rel="preload"> | <link rel="preconnect"> |
|---|---|---|---|---|
| No loading attribute (auto) | 94% 1,476 sites | 98% 1,261 sites | few sites | 83% 48 sites |
| loading="lazy" | 96% 1,850 sites | 100% 21 sites | few sites | 100% 21 sites |
| loading="eager" | 94% 486 sites | 94% 889 sites | few sites | few sites |
LCP image loading per framework
Vue puts loading="lazy" on the LCP image on 32% of its sites, and 94% of Vue sites have a good LCP. jQuery leaves the LCP image at the browser default on 54% of its sites and sets loading="lazy" on 29%, and 93% of jQuery sites have a good LCP.
Vue 689 sitesNo loading attribute (auto) 42%loading="lazy" 32%loading="eager" 25%94%
jQuery 2,083 sitesNo loading attribute (auto) 54%loading="lazy" 29%loading="eager" 17%93%LCP image loading or the framework
Does the framework explain the loading="lazy" pass rate?
On jQuery, 92% of sites with default loading have a good LCP, against 94% of jQuery sites with loading="lazy" on the LCP image. Within jQuery, sites with default loading and loading="lazy" have a good LCP about equally often. On Vue, 93% of sites with default loading have a good LCP, against 96% of Vue sites with loading="lazy" on the LCP image. Within Vue, sites with default loading and loading="lazy" have a good LCP about equally often.
Why loading="lazy" holds back the preload scanner
Chrome's HTML preload scanner finds <img> tags in the first bytes of the document. It starts fetching default and eager images right away, before stylesheets and blocking scripts finish downloading. When an <img> carries loading="lazy", Chromium's ShouldDeferImageLoad check stops the preload scanner from queuing the request. The image waits until CSS downloads, the render tree builds, and layout confirms the image sits in the viewport. WordPress core has skipped loading="lazy" on the first three content images since version 6.3. Theme templates and page builders that hardcode loading="lazy" on hero banners still pay the full layout wait.
Understanding LCP image loading
In Shopify Liquid templates, render the hero banner with section.settings.image | image_url: width: 2000 | image_tag: loading: 'eager', fetchpriority: 'high' (or omit loading so it defaults to eager). Many older Dawn sections and third-party Shopify themes hardcode loading="lazy" on every slideshow and image-banner block, which explains why 31.2% of Shopify LCP images are lazy-loaded. Removing loading="lazy" on Shopify cuts median resource load delay by 11 ms (574 ms vs 585 ms) and raises good LCP from 96% to 96%.
By Arjen Karel · 8,246 crawled Shopify sites (5,825 with phone Chrome field data, 6,066 sites with an <img> LCP element by loading attribute, October 2026). How we measured.