A design pattern that defers the loading of non-critical resources (like images) until they are needed, improving initial page load time.
Lazy loading delays loading non-critical resources until they are actually needed. Instead of loading everything upfront, you load content on-demand as users scroll or interact.
Think of a buffet restaurant - they do not cook all dishes at once. They prepare them as customers request, saving time and resources.
Websites often load resources users never see. A blog post with 50 images loads all 50 immediately, even if readers only see the first two paragraphs. This wastes:
Lazy loading fixes this by loading only what is visible or about to become visible.
Native Image Lazy Loading:
<img src="product.jpg" loading="lazy" alt="Product">
Modern browsers handle everything automatically - no JavaScript needed. Images load as users scroll near them.
Component Lazy Loading (React):
const Dashboard = ( ());
No related topics found.
Users visiting your homepage do not download the admin dashboard code. It loads only when they navigate there.
Medium/Substack: Blog platforms lazy load images as you scroll. Articles with 20 images initially load only 3-4 visible ones.
Amazon/Flipkart: E-commerce sites lazy load product images. With thousands of products, loading all images would be impossible.
Facebook/Instagram: Infinite scroll feeds lazy load posts as you approach the end, creating the illusion of endless content.
Do Not Lazy Load Critical Content: Hero images and above-the-fold content should load immediately.
Use Placeholders: Show loading skeletons or blurred images to prevent layout shifts.
Start Loading Early: Begin loading images slightly before they are visible (100-200px) so they are ready when needed.
An e-commerce site reduced initial load from 8MB to 2MB by lazy loading product images. Page load time dropped from 12s to 3s on 3G networks.
Lazy loading is not just an optimization - it is essential for modern web performance. Users expect fast, responsive experiences, and lazy loading delivers that.