Lazy loading done right, not just switched on

A quick one,

Lazy loading is one of those ideas that sounds simple and gets misused constantly. The idea is sound: don't load an image until the customer is about to scroll to it. Done well, the top of your page appears fast and the rest streams in as needed. Done carelessly, it makes your store worse.

The mistake I see most

People switch lazy loading on for everything, including the big image at the very top of the page. So the first thing the customer should see is now waiting politely in a queue behind a decision to load it later. That's the exact opposite of what you want.

The rule I go by:

• Above the fold — load it immediately, no delay, it's the first impression
• Below the fold — lazy load it, let it wait its turn
• Long collection pages — lazy load, but reserve the space so nothing jumps

Reserve the space

Here's the bit that gets forgotten. When an image loads late, the browser needs to know how much room to leave for it, or everything below shuffles down the moment it arrives. That shuffle is the jankiness you feel on cheap-feeling sites.

Lazy loading should make a page feel calm, not make it twitch as things drop into place.

Set width and height on your images so the layout holds steady while they load. It's a small thing that separates a store that feels premium from one that feels held together with tape.

Test it on a real phone

Load a collection page and scroll slowly on your actual phone, not a fast desktop. Watch whether the layout stays put and whether images arrive just ahead of your thumb. That's the feel you're after.

If your pages flicker or jump as they load and you can't work out why, book advisory time and I'll help you pin it down.