Lazy Loading
Lazy loading is a technique where images and other resources are only loaded when they're about to enter the user's viewport — rather than all at once when the page first loads. It's implemented with the loading='lazy' HTML attribute or JavaScript intersection observers.
Why It Matters for Shopify Stores
For Shopify product pages with 6–12 product images, related product sections, and collection thumbnails, lazy loading can reduce initial page weight by 50–70%. Resources below the fold don't need to load until the user scrolls to them, which dramatically improves FCP and LCP for the above-the-fold content. Modern Shopify themes (like Dawn) implement lazy loading by default, but older themes and app-added content sections often don't.
How to Check Your Store
In Chrome DevTools Network tab, scroll down the page while watching the Network waterfall. Images should only appear in the network log as you scroll close to them, not all at page load. Check your theme's image tags for loading='lazy' attributes.
Use the free shopify speed test toolHow to Fix It
Add loading='lazy' to all img tags that are below the fold. Never lazy-load the hero image (LCP element) — it needs to load as fast as possible. Most modern Shopify themes handle this correctly, but app-added sections may not.
Related Terms
LCP (Largest Contentful Paint)
Core Web VitalsLargest Contentful Paint measures how long it takes for the largest visible content element on a page — usually a hero image or headline — to finish loading.
CLS (Cumulative Layout Shift)
Core Web VitalsCumulative Layout Shift measures visual instability — how much page elements unexpectedly move while the page is loading.
Render-Blocking Resources
PerformanceRender-blocking resources are CSS or JavaScript files that prevent a browser from displaying page content until they've fully downloaded and parsed.
Image Optimization
PerformanceImage optimization is the process of reducing image file size without significantly reducing visual quality, while ensuring images are the correct format (WebP), dimensions, and compression for their use case.
WebP Image Format
PerformanceWebP is a modern image format developed by Google that provides superior compression compared to JPEG and PNG — typically 25–35% smaller at equivalent visual quality.
Check your store's Lazy Loading with our free tools
Get a full audit across all 6 performance categories — including performance — in under 60 seconds.
Run a Free Store Audit