Apply lazy loading to the wrong images and your store actually loads slower, not faster. Here’s where most Shopify stores go wrong — and the one fix that matters most.
Lazy loading is one of the most recommended Shopify speed fixes — and one of the most misapplied ones. When it’s set up correctly, it speeds up your pages. When it’s applied to the wrong images, it makes your store measurably slower.
Here’s what lazy loading actually does, what Shopify already handles for you, where the gaps are, and — crucially — the one mistake that quietly tanks your LCP score.
Want it handled automatically? Plug In Speed applies lazy loading correctly across your store — hero images eager-loaded, everything else deferred — without touching theme code.
What lazy loading actually does
Lazy loading tells the browser: don’t download this image until the visitor is about to scroll to it.
Without lazy loading, when someone lands on a collection page with 48 products, the browser tries to download all 48 product images at once — including the ones 10 scrolls below the fold that the visitor may never reach. That’s a lot of unnecessary data transfer upfront, and it slows down everything visible on screen.
With lazy loading, the browser downloads images in the viewport first, then loads the rest progressively as the visitor scrolls. The page feels fast because what’s visible loads immediately.
The performance impact is real: a 0.1-second improvement in load time leads to an 8.4% increase in ecommerce conversions. Lazy loading contributes directly to that by reducing the initial data load.
What Shopify already handles (and what it misses)
Modern Shopify 2.0 themes — Dawn, Craft, Sense — include loading="lazy" on images by default. If you’re on one of these themes and haven’t customised heavily, you already have basic lazy loading.
- Product grid images on collection pages
- Most section images in standard theme blocks
- Images in built-in theme sections (Dawn, Craft, Sense)
- Slideshow and banner images in custom sections
- Images injected by apps (reviews, upsells, loyalty)
- Older pre-2.0 themes with no native lazy loading
- Images added via custom Liquid code
If you’ve customised your theme, added third-party sections, or installed apps that display images, the native coverage has gaps.
The mistake that makes lazy loading hurt instead of help
This is the part most guides skip.
Never lazy-load your hero image. Your hero banner or lead product image is almost always your LCP element — the biggest visible thing on the page. Lazy-loading it tells the browser to delay the one image Google measures most closely.
LCP (Largest Contentful Paint) measures how long the biggest visible thing on your page takes to load. Google uses it as a Core Web Vitals ranking signal. If you apply loading="lazy" to your hero image, your LCP time gets worse, not better — even though you thought you were optimising.
The correct setup for your hero image:
Used together, these tell the browser: load this image first, immediately, before anything else. According to Shopify performance specialists, this is the single highest-impact change you can make to LCP.
The rule: lazy-load everything below the fold, eager-load everything above it.
How to check if your hero image is being lazy-loaded
- Open your store in Chrome and right-click your hero image → Inspect
- Look for
loading="lazy"in the<img>tag attributes - If you see it on the hero, that’s your problem — it should have
loading="eager"instead
To fix it without code: Plug In Speed identifies which images are above the fold and applies the right loading attribute to each automatically.
To fix it in the theme: find the <img> tag for your hero section in the theme editor and change loading="lazy" to loading="eager" fetchpriority="high".
Where Shopify stores actually stand on LCP
Based on an analysis of the top 1,000 Shopify stores by traffic, the median LCP is 3.4 seconds — squarely in Google’s “Needs Improvement” range (good is under 2.5 seconds). Most stores are loading their largest image too slowly, and lazy loading the hero is a common reason why.
Frequently asked questions
Does Shopify lazy load images automatically?
Modern Shopify 2.0 themes (Dawn, Craft, Sense) include native lazy loading on most images by default. If you’re on an older theme, or if you’ve added third-party apps or custom sections, there are likely gaps in coverage that the theme doesn’t handle.
Can lazy loading hurt my PageSpeed score?
Yes — if it’s applied to the wrong images. Your hero image should never be lazy loaded. It’s your LCP element and needs to load immediately with loading="eager" and fetchpriority="high". Applying lazy loading to it tells the browser to delay the one image Google is watching most closely.
What images should be lazy loaded on Shopify?
Any image that starts below the fold — product grid images on collection pages, images in lower page sections, app-injected images below the hero. Everything visible when the page first loads should load immediately.
Will lazy loading affect how my store looks to visitors?
No. Visitors don’t notice the difference — images load just before they scroll to them, so there’s no visible delay in normal browsing. The benefit is entirely in initial page load speed and PageSpeed scores.
How does lazy loading relate to Core Web Vitals?
Lazy loading directly affects LCP (Largest Contentful Paint) and can also reduce CLS (Cumulative Layout Shift) when images have explicit dimensions set. LCP measures when your biggest above-the-fold element loads — which is exactly why the hero image needs eager loading, not lazy loading.
Get lazy loading right, automatically
Plug In Speed handles the hero/lazy split for you — eager-loading above-the-fold images and deferring everything else — across your entire store without touching theme code.