# Lazy loading images below the fold on Shopify, without breaking the hero

Source: https://storefrontspeedjournal.com/blog/2026-10-18-shopify-lazy-loading-below-fold-images.html

Reviewed October 18, 2026


Lazy loading saves real time when it skips what shoppers have not reached, and wrecks metrics when it delays the hero. Applying it correctly on Shopify themes.

## The rule: eager hero, lazy everything after

Lazy loading tells the browser to postpone an image until the shopper nears it. Applied to images below the fold, it frees bandwidth and processing for what renders the page. Applied to the hero or the main product image, it delays the largest element on the page and directly worsens the metric stores are trying to improve.

Audit your templates with that line in mind. Product galleries are the frequent accident: every image in the gallery gets the same lazy attribute, including the first one the page exists to show. The fix is positional, not global: first image eager and prioritized, the rest lazy.

## What lazy loading actually saves

On collection pages with dozens of product cards, deferring offscreen images can cut initial image weight dramatically, which on mobile connections is the difference between a page that settles in two seconds and one still resolving as the shopper starts scrolling. The savings are real and measurable in the initial load, not in total page weight, which stays the same if the shopper scrolls everything.

That distinction tells you where lazy loading pays: long pages, grids, related product rails, blog indexes. On a short page where everything is effectively at the fold, it saves nothing and adds risk. Apply effort proportional to page length.

## The failure modes to check

Blank gaps while scrolling fast, images popping in without reserved space and shoving text around, and carousels whose later slides never load because the script waits for an interaction that keyboard users perform differently. Each is a lazy implementation without dimensions, placeholders, or testing.

Reserve space with width and height attributes or aspect ratios so layout stays stable, and test by scrolling a long collection page quickly on a mid range phone. If images arrive after the scroll settles with content jumping, the setup is charging shoppers for your optimization.

## Measure before and after

Capture mobile timings on your longest collection page and a product page before changing anything, then after, on the same device class. Confirm the hero metric improved or held, that below fold images load as approached, and that total scrolled experience feels calmer, not jumpier.

Keep the before numbers. Speed work without a baseline becomes a collection of opinions, and the next app install or theme update will quietly undo gains nobody recorded. A one line log per change keeps the journal honest, which is this site's whole premise.

## Related reading

If this topic is useful, these earlier guides go deeper on connected questions: [Your Shopify theme's JavaScript bundle is heavier than you think](https://storefrontspeedjournal.com/blog/2026-10-17-shopify-theme-javascript-bundle-trim.md), [Font loading on Shopify: fewer weights, smarter loading](https://storefrontspeedjournal.com/blog/2026-10-17-shopify-font-loading-display-swap-speed.md), and [Shopify image compression that does not make product photos look cheap](https://storefrontspeedjournal.com/blog/2026-10-16-shopify-image-compression-without-blurry-photos.md).

## Frequently asked questions

### Should the main product image ever be lazy loaded?

No. The first product image is typically the largest content element on the page, and delaying it delays the page in every metric and in shopper perception. Mark it eager, give it priority, and lazy load the additional gallery images and everything further down the page.

### Does lazy loading help SEO?

Indirectly, through faster initial loads and better stability scores when implemented with reserved space. Implemented badly, with content jumping as images arrive, it hurts the same scores. Search engines also need image information present in the page; standard lazy attributes keep it discoverable, while exotic script only loading can hide it.

### Why do my images flash blank when I scroll?

The browser reaches them before the lazy load triggers, usually because the trigger distance is too tight or the connection is slow. Themes often allow a margin adjustment so loading starts earlier. Also confirm the images are not being deferred twice, by both the theme and an optimization app.

### Can I lazy load videos the same way?

Yes, and the savings are larger: use a poster image and load the player only on approach or interaction. Auto playing embedded videos are among the heaviest elements on storefronts. A clickable poster keeps the page light and, as a bonus, gives the shopper control of sound and motion.