A common performance mistake is loading everything a page might eventually show the instant it opens — every image, including the dozens below the fold that a visitor may never scroll to. This wastes bandwidth and delays the content people can actually see. Lazy loading is the simple idea of deferring off-screen resources until they are needed.
It is one of the easier meaningful wins in web performance.
The waste it removes
On a long page, most images sit far below the initial view, and many visitors leave before reaching them. Downloading all of them immediately competes for bandwidth with the content the user is looking at right now, slowing the first meaningful paint. You are paying to deliver things nobody has asked to see yet.
Images are usually the heaviest part of a page, so deferring the off-screen ones has an outsized effect.
How lazy loading works
Lazy loading holds back resources that are not yet visible and fetches them as the user approaches — typically as they scroll near. The result is a faster initial load, since the browser spends its early effort only on what is immediately needed, and reduced total data for anyone who does not scroll the whole way. Modern browsers support this for images with minimal effort.
The visible content arrives sooner; the rest streams in just in time, usually before the user notices any gap.
Using it thoughtfully
Lazy load what is off-screen, but not what is immediately visible — deferring the hero image the user sees first would slow the very thing you want fastest. Reserving space for images before they load also matters, so content does not jump around as they appear.
Applied with a little care, lazy loading trims wasted downloads and speeds up the experience for everyone, especially on long, image-heavy pages and slower connections.