Max IT solutionsShopify App Store

Lazy Loading on Shopify: Faster Images, Fast Hero Image

Updated , first published · 4 min read

Lazy loading on Shopify means images further down a page load only when the shopper scrolls near them, which makes the first screen load faster. Current Shopify themes already do it: Liquid’s image_tag filter adds loading="lazy" to images in sections further down the page. The one image that must never be lazy loaded is the largest one on the first screen, usually the hero banner or the main product photo, because a lazy hero delays Largest Contentful Paint (LCP). Check which image is your LCP element, and if it is lazy, fix the section so it loads eagerly.

What lazy loading does

A page with 40 product images does not need all 40 before the shopper can see anything. With loading="lazy", the browser waits to download an image until it is close to the visible area, so the images on the first screen get the bandwidth first. Shopify’s web performance page lists loading speed, measured by LCP, as one of the three Core Web Vitals in its reports, and names the theme, the apps and third-party code as the biggest factors in a store’s performance. Images served by Shopify are already resized and compressed by its image CDN; lazy loading decides when they are fetched.

The hero image trap

Shopify’s developer guide on theme performance warns that loading="lazy" on the LCP image delays it until after layout completes, and says to always load images in the initial viewport eagerly. The image_tag documentation adds that lazy loading is set automatically only for sections further down the page, and that themes needing different behavior should use section.index and section.location.

section.index counts sections within their location, starting at 1. Each section you add above the hero in the page template, such as an app section or a short text banner, pushes the hero one position down; once it sits after the third template section, the image_tag default can make it lazy, and LCP gets worse after a change that looked harmless. Sections in the header group, such as the announcement bar, do not change the template count. Some page builders and custom templates set their own loading attribute, so check those pages as well.

Fix it in the theme

Update the theme to its latest version first and test again. If the hero is still lazy, a developer, or you with a duplicate of the theme, can set the loading strategy by section position:

  1. In Online Store > Themes, duplicate the live theme and edit the copy’s code.
  2. Open the hero or image banner section file in the sections folder and find its image_tag.
  3. Replace it with a version that loads eagerly in the first three template sections, gives high priority only to the first, and loads lazily below:
{%- liquid
  assign img_loading = 'lazy'
  assign img_priority = 'auto'
  if section.location == 'template' and section.index <= 3
    assign img_loading = 'eager'
  endif
  if section.location == 'template' and section.index == 1
    assign img_priority = 'high'
  endif
-%}
{{ section.settings.image | image_url: width: 2000 | image_tag: loading: img_loading, fetchpriority: img_priority, sizes: '100vw' }}
  1. Preview the copy, test it as described below, then publish it.

The shopify.dev guide calls fetchpriority="high" on the LCP image a one-line change with a measurable LCP gain, and warns that overusing preload can make pages slower, so give the high priority to one image per page, not to every banner. The setting name section.settings.image differs between themes; use the one in your section’s schema.

Check the result

Run the page through PageSpeed Insights on mobile and open the LCP element in the diagnostics: it should be your hero image, and it should not carry loading="lazy". In Chrome DevTools, the Elements panel shows the attribute on the image itself. Then watch the Web Performance reports over the next weeks, since they measure real visitors. For other speed fixes and the tools behind them, see Shopify speed optimization and speed test tools. The running a store hub has the rest of the speed and theme guides.

Frequently asked questions

Does Shopify lazy load images automatically? Themes that use the image_tag filter lazy load automatically: it sets loading="lazy" for images in sections further down the page unless the image is preloaded. Older themes and some page builders handle it differently, so check your own pages.

Should the hero image be lazy loaded? The hero image should load eagerly. Shopify’s developer guide says images visible in the initial viewport should load eagerly, because lazy loading the LCP image delays it until after layout.

Do I need a lazy loading app? A current theme rarely needs one, since image_tag already lazy loads images further down the page. A lazy loading app adds its own code to your pages, so fix the theme first and measure before you install one.