Lazy loading is a technique that delays loading non-critical resources until users actually need them. Instead of downloading all images when a page loads, images load only as users scroll them into view. This reduces initial page weight and speeds up the time to first meaningful content.
How Lazy Loading Works
The browser monitors the viewport position relative to lazy-loaded elements. When an element approaches the visible area, the browser initiates the download. Modern browsers handle this natively with the loading attribute on images and iframes.
For images, add loading="lazy" to defer loading until the image nears the viewport. The browser determines the exact trigger distance based on network conditions and device capabilities.
Benefits for Performance
Lazy loading reduces the amount of data transferred on initial page load. Pages with many images below the fold load significantly faster because only visible images download immediately. Users who leave before scrolling never trigger downloads for unseen content.
This directly improves by prioritizing above-the-fold resources. It also reduces bandwidth costs and server load, especially for image-heavy pages like product catalogs.
Implementation Approaches
Native lazy loading uses the loading="lazy" attribute, supported in all modern browsers. No JavaScript required.
The Intersection Observer provides more control for custom implementations. JavaScript libraries like lazysizes offer additional features like placeholder images and blur-up effects.
What Not to Lazy Load
Never lazy load images visible without scrolling. The LCP element should load immediately, not wait for scroll detection. Also avoid lazy loading critical elements that users expect to see instantly.
