Definition
Lazy loading is an optimization technique where websites and apps hold off on downloading data—like images, videos, and code—until the moment you actually need to see or use them, rather than loading everything upfront.
Why Not Load Everything at Once?
When reading a 1,000-page encyclopedia, you only open the page in front of you. Nobody tears out all 1,000 pages and spreads them across the living room floor before reading sentence one.
The internet works the exact same way. When you open an online store with a hundred product photos, you might only glance at the top three items and leave right away.
If the website insisted on downloading all 100 high-resolution photos the second you arrived, every image would fight for your connection—slowing down the very first screen you need to see. You would also burn through mobile data on images you never even look at. That is why lazy loading fetches only what is immediately visible on screen, cleverly postponing everything out of sight.
Appearing Just as You Scroll
Beneath the surface of a lazy-loaded page, heavy images are replaced by lightweight placeholders—like empty gray boxes or tiny, blurred previews—holding their spots.
As your thumb flicks down the screen, the web browser quietly monitors how far you have scrolled.
Just before an off-screen section enters your view, the browser signals the server to swap in the crisp, full-sized image. Because of this, you see the initial screen in the blink of an eye, and the site saves server bandwidth by skipping files you might never scroll down to see.
Under the Hood: It's Not Just for Pictures
Lazy loading is not just a trick for photos and videos. It is also widely used for the massive chunks of program code that power modern apps and websites.
Today's web apps are essentially full-fledged software programs. But if a visitor is only browsing, there is no reason to download the complex checkout code or profile editing scripts before they even add an item to their cart.
Instead, developers break large programs into smaller chunks and load specific code only when you click the button that requires it. Bringing in only the code you need, right when you need it, keeps the initial bundle lightweight, gets the page running faster, and stops unused features from hogging memory.
Common misconceptions
Lazy loading cuts a webpage's total data usage in half automatically.
If you scroll all the way to the bottom, every asset is still downloaded. Lazy loading isn't about erasing data—it's about postponing the download so the initial screen loads instantly.
Where you meet it
Browsing social media feeds like Instagram, where new posts and images seamlessly load only as you scroll down.
Opening an online shop where product specs load immediately, while customer review photos further down appear only when you scroll toward them.
In one sentence
A performance optimization technique that delays loading content until it is needed or enters your screen, making pages feel instant.