Shopify lazy-load hiding above-fold images — hero blank / LCP spike.

Several performance failures look like “the hero is blank” or “LCP is red.” They do not share a fix. This page is only when the browser deferred an above-the-fold image with loading="lazy", a Liquid image helper that defaults to lazy, or an app that IntersectionObservers every image including the hero — so first paint shows empty space or a tiny placeholder until scroll / observer fires. When LCP fails for other reasons (oversized assets, no preload, heavy theme JS) use page-speed-lcp-failing. When the image URL 404s from cdn.shopify.com use cdn-images-broken. Layout shift from images without dimensions is cls-failing. Text reflow after web fonts is font-swap-cls. Soft-link ttfb-slow when the HTML document itself is late so every image starts late.

Hard-refresh the homepage / collection / PDP on mobile viewport. In Elements, select the hero <img> / <picture>. If loading="lazy", or if src is empty and a data-src / data-srcset only populates after scroll, you are on this playbook. PageSpeed Insights → LCP element: if it is the hero image and “resource load delay” dominates because the request started late, same diagnosis. Network: filter Img — the hero request should start near navigation, not after an IntersectionObserver. Soft-link page-speed-lcp-failing when the image starts early but is huge / unoptimized. Soft-link cdn-images-broken when the request returns 404.

In theme Liquid, find image_tag / | image_url used by the hero section. Many themes pass loading: 'lazy' globally. Override the LCP candidate to loading: 'eager' and add fetchpriority: 'high' (or the HTML attributes). Section settings sometimes expose “Lazy load images” that also hit the banner / slideshow. Image optimizer / lazy-load apps often replace every <img> with a wrapper — disable App embeds one at a time on a duplicate theme. Optionally <link rel="preload" as="image"> the hero URL when the LCP element is known. Soft-link app-embed-blocking-theme when the lazy app also breaks the theme editor, and theme-app-extensions-not-appearing when the optimizer block never mounts.

Do not disable lazy-load sitewide. Collection cards, related products, and footer images should stay lazy. Only the LCP candidate (usually the hero / first PDP media) needs eager + fetchpriority="high". Slideshows: eager the first slide only. Combined Listings / variant gallery: eager the initially selected media. Soft-link cls-failing if removing lazy without width/height attributes causes layout shift — reserve space with width/height or aspect-ratio. Soft-link inp-failing when a heavy lazy library also blocks main-thread interactions.

General Core Web Vitals / LCP failing (sizes, compression, theme JS, no preload) is page-speed-lcp-failing. CDN / product images 404 is cdn-images-broken. CLS from images without dimensions or App embeds is cls-failing. Font-swap FOIT/FOUT is font-swap-cls. Soft-link pagespeed-lcp-poor for the older LCP overview, and cdn-shopify-images-not-loading for the older CDN blank/404 page. Do not rebuild every CWV until you have proven whether the hero request was deferred by lazy-load.

Stay DIY if you can flip the hero to eager / fetchpriority="high", kill one lazy-load app wrapper, and re-check PSI in under an hour. Pay for the Latch AI Ops install when you want lead capture, ops alerts, and a checkout-ready workflow on the live store — including storefront exception alerts landing in a channel you already check. Clock starts when collaborator access is in. 72 hours. One live store. Written by Nico. No earnings claims. No ranking-lift or conversion-lift number.

Buy the 72-hour install — $997Page-speed LCP failingCDN images broken