How to Add Lazy Loading to Images on Shopify & WooCommerce

errorThe Problem

Your page loads ALL images immediately — even ones far below the fold that users can't see yet. This wastes bandwidth, slows down initial page load, and hurts your Largest Contentful Paint (LCP) score.

trending_upWhy It Matters for SEO

A typical product page might have 10-20 images (product photos, related products, trust badges). Loading all of them upfront means the browser is doing 10-20x more work than needed on initial load. Lazy loading defers below-fold images until the user scrolls near them, which can improve LCP by 20-30%.

buildHow to Fix It

<!-- Hero image: DO NOT lazy load (it's above the fold) -->
<img src="{{ product.featured_image | img_url: '800x' }}" alt="{{ product.featured_image.alt }}" width="{{ product.featured_image.width }}" height="{{ product.featured_image.height }}">

<!-- Below-fold images: ADD lazy loading -->
<img src="{{ image | img_url: '400x' }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}" loading="lazy">

<!-- Using image_tag filter (recommended) -->
{{ image | image_url: width: 400 | image_tag: loading: "lazy" }}

Related Fix Guides