Skip to content

Lazy loading: loading the images a shopper has not scrolled to yet

Lazy Loading: Load Only Images Shoppers See

What it is

Lazy loading tells the browser to load an image only when the shopper is about to scroll it into view, instead of fetching every image on the page at once. It changes when each image is requested, not how heavy the file is. A long category page might hold sixty photos while the screen shows six, and without lazy loading the browser starts pulling all sixty at once.

How common it is

Just over half of audited stores (57%) lazy-load their images. The audit checks the images on the page for a loading method, the browser’s native lazy attribute or a script-based equivalent, and passes when it finds one in use. Stores miss it most on the pages where it matters, long category and home pages stacked with photos, where loading everything upfront does the most damage.

Why it costs you

A browser can only prioritize a limited number of image requests at once. Without lazy loading, the off-screen photos are requested alongside the visible ones, so the images on the first screen wait behind pictures the shopper cannot see yet. The screen that decides whether someone stays loads slower because of photos far below it. Lazy loading changes the order: the visible images load first, and the rest are requested only as the shopper scrolls down to them.

Check it in 30 seconds

Open your browser’s Network tab, filter to images, and scroll slowly down a long category page. The requests should appear as you scroll, with a few loading just ahead of the screen. If they all fire at once when the page first loads, lazy loading is off, and the first screen paid for everything.

Read next: Ecommerce Site Speed: Convert More of Your Traffic

Run the free audit to see whether your long pages load images shoppers never scroll to.