Lazy Loading
Definition
Loading images and content only when they're about to become visible, rather than all at once. Improves initial page load speed.
What is Lazy Loading?
Lazy loading delays loading non-critical resources until they're needed. Instead of downloading all images when a page loads, images are fetched only as users scroll near them.
Why Lazy Load?
Faster Initial Load
Pages load quicker when they don't fetch all resources upfront.
Reduced Bandwidth
Users only download what they actually view.
Better Performance
Less competition for bandwidth and processing.
Lower Hosting Costs
Reduced data transfer for images never viewed.
How Lazy Loading Works
- Page loads with placeholder images
- User scrolls down the page
- When an image nears the viewport, it starts loading
- Image appears by the time user reaches it
Done well, users never notice any delay.
Implementing Lazy Loading
Native Browser Support
Modern browsers support lazy loading with a simple attribute:
<img src="photo.jpg" loading="lazy" alt="...">
JavaScript Libraries
For older browsers or more control, libraries like lazysizes provide enhanced functionality.
Framework Support
React, Vue, and other frameworks have built-in or plugin lazy loading.
What to Lazy Load
Good Candidates
- Images below the fold
- Video embeds
- Infinite scroll content
- Comments sections
Don't Lazy Load
- Above-the-fold images (especially LCP element)
- Critical navigation elements
- Content needed immediately
Lazy Loading Considerations
SEO
Search engines can handle lazy-loaded content, but ensure images are properly indexed.
User Experience
Content should load before users reach it – no visible loading delays.
Placeholder Size
Reserve space to prevent layout shift (CLS).
Accessibility
Ensure content remains accessible when lazy loaded.
Modern lazy loading is simple to implement and provides significant performance benefits for most websites.