Performance

Native Image Lazy Loading

Native lazy loading uses the HTML loading='lazy' attribute to defer off-screen image loading without JavaScript. It's supported by all modern browsers and is the recommended implementation for product images below the fold in Shopify stores.

Why It Matters for Shopify Stores

Product pages with multiple images, collection thumbnails, and related product sections can load dozens of images. Without lazy loading, all images begin downloading simultaneously at page load, increasing LCP for the visible hero image and wasting bandwidth on images the user may never scroll to. Adding loading='lazy' to all below-fold images is one of the simplest, highest-impact performance improvements — a single attribute change per image tag.

How to Check Your Store

View page source and check img tags for the loading attribute. Hero images should have loading='eager' (or no attribute); below-fold images should have loading='lazy'.

Use the free shopify speed test tool

How to Fix It

In your Shopify theme's product, collection, and section liquid files, add loading='lazy' to img tags for below-fold content. Never add it to the LCP element (hero/featured image). Modern OS2.0 themes do this by default.

Related Terms

Check your store's Native Image 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