Run A/B tests and personalize your store without code. 14-day free trial, no credit card.
Start free trial →In-depth guides and case studies where this concept is put to work.
Lazy loading is a performance optimization technique where resources — typically images, videos, or JavaScript modules — are not loaded when the page initially renders but instead are deferred until the user actually needs them (usually when they scroll close to where that resource will appear in the viewport). Instead of loading all 40 product images on a category page at once, lazy loading loads only the 8-10 images currently visible on screen, and loads the rest as the user scrolls down.
The browser marks certain images with loading="lazy" (native HTML attribute) or with a JavaScript-based Intersection Observer that watches when elements come into the viewport. When a lazy-loaded image is about to enter the visible area, the browser fetches it. Until then, the image's network request does not happen.
Native implementation (modern browsers):
<img src="product-image.webp" loading="lazy" alt="Product name" width="400" height="400">
This single attribute enables lazy loading in all modern browsers without any JavaScript library.
For ecommerce stores with long category pages, product listing pages, or blog pages, the total image payload can be enormous — sometimes 5-10MB or more if all images were loaded eagerly. A customer on mobile in India who visits a category page with 48 products should not have to download images for products 40-48 before they have even started scrolling. Lazy loading ensures visitors pay only the bandwidth cost for content they actually view.
This directly improves initial page load time (and LCP in particular), which reduces bounce rates and improves conversion rates. For stores on Shopify, lazy loading is often handled by the theme, but not always correctly — it is worth verifying that product images below the fold are actually lazy loaded and not just tagged that way without proper implementation.
A Shopify store selling women's ethnic wear had a product listing page with 60 product images. All 60 loaded on page entry. On mobile, this resulted in a 4.2MB initial page load and an LCP of 5.8 seconds. After implementing native lazy loading on all product images below the first visible row (approximately the first 8 items), initial page weight dropped to 600KB and LCP improved to 2.1 seconds. Mobile bounce rate on the category page fell from 72% to 51% — a significant improvement that translated directly into more product page visits and purchases.
loading="eager" or no loading attribute for above-the-fold images.loading="lazy" for simplicity: Modern browser support is near-universal. JavaScript-based lazy loading libraries add complexity without much benefit for most Shopify stores.width and height attributes so the browser reserves space before the image loads.If you are A/B testing changes to product listing pages or product detail pages that involve adding or removing images, consider the page weight implications. A variant with more images might have a higher visual quality but worse LCP due to increased eager-load image weight — lazy loading test variant images appropriately ensures your performance doesn't confound your conversion test results.
Run smarter A/B tests with CustomFit.ai — 14-day free trial, no credit card required.