What Is Lazy Loading?
Lazy loading is a technique where resources (typically images) are not loaded until they are about to enter the browser's viewport. Instead of downloading all images on a page as soon as it loads, the browser only downloads images as the user scrolls down towards them.
For a typical Shopify collection page with 48 products, only 6-8 products are visible above the fold. Without lazy loading, all 48 product images download immediately. With lazy loading, only the visible images download first, with the rest loading on demand as the user scrolls.
Native Lazy Loading
Modern browsers support native lazy loading via the loading attribute on img elements. Adding loading="lazy" to an image tag tells the browser to defer loading that image until it is near the viewport. No JavaScript required.
Browser support is excellent: Chrome, Firefox, Safari, and Edge all support it. This means you do not need a JavaScript lazy loading library for basic image lazy loading on modern Shopify stores.
Never Lazy Load Above-the-Fold Images
Images visible without scrolling (above the fold) should never have loading="lazy". This delays the Largest Contentful Paint (LCP) metric, which directly impacts your Core Web Vitals score. Only apply lazy loading to images that are off-screen on initial load.
Lazy Loading Images
In Shopify themes, images are typically output using Liquid image tags. To add native lazy loading, find your image snippets in your theme and add the loading attribute.
In most Dawn-based themes, product card images already have lazy loading. Check by inspecting a collection page image in Chrome DevTools and looking for the loading="lazy" attribute. If it is missing, add it to your product card snippet.
Section images like banners, testimonial photos, and logo grids should also have lazy loading added if they appear below the fold. Hero images should always load eagerly.
Lazy Loading Sections
Beyond images, entire theme sections can be deferred. Shopify's Dawn theme introduced section rendering API support, which allows sections to be loaded asynchronously. Some themes use IntersectionObserver to load section content only when it enters the viewport.
For sections that contain heavy content (video embeds, Instagram feeds, review carousels), deferring their initialisation until they are scrolled into view can significantly reduce initial load time.
Third-Party Libraries
If you need lazy loading for older browser support or more advanced features, Lazysizes is the most widely used JavaScript lazy loading library. It is lightweight (3KB), well-maintained, and works with Shopify's responsive image syntax.
However, with native lazy loading now widely supported, adding Lazysizes adds unnecessary JavaScript overhead. Only use it if you specifically need features not available natively, such as lazy loading background images.
Testing Lazy Loading
To verify lazy loading is working, open Chrome DevTools, go to the Network tab, filter by images, and reload the page. You should see only above-the-fold images loading initially. As you scroll down, additional images should appear in the network log.
Run PageSpeed Insights before and after implementation. Look for improvements in Total Byte Weight, Largest Contentful Paint, and the "Defer offscreen images" recommendation.
