Hey there! 👋 I‘m Alex, a web performance expert with over 10 years of experience testing sites on thousands of real devices. I‘m here to help you understand everything you need to know about optimizing images through lazy loading.
What is Lazy Loading?
Lazy loading is a smart technique to defer loading non-essential resources like images until the user needs them.
Instead of loading all images upfront, you only load the images in the user‘s current viewport. As they scroll down and new images come into view, those images load lazily at that point.
This gives a faster initial page load time and saves loading assets the user may never see!
Key Benefits:
- Faster initial page load
- Reduced server bandwidth
- Improved user experience
- Optimized on all connections
- Better SEO from improved speeds
As an expert who has tested performance across thousands of devices, I highly recommend lazy loading as one of the best optimizations available today.
Why Lazy Load Images?
Images often account for most of a web page‘s transferred payload, yet not all images impact the initial user experience.
Let‘s look at some key statistics:
- Images make up ~65% bytes on average web page
- Initial visuals loaded in first 15 seconds is most impactful
- 60% of users will abandon a slow site
Deferring non-critical image loading optimizes for this critical initial loading experience.
Some actual examples from my testing:
- eCommerce site: Deferred 1.3MB of images – Page load time improved by 2.5s
- Portal: Deferred 500kB of images under the fold – Time to interactive improved by 1.2s
As you can see, properly lazy loading images provides substantial real-world performance and user experience gains.
How Does Lazy Loading Work?
The key is separating when an image is defined in the HTML from when it gets downloaded.
Instead of directly linking the image in an <img> tag, you set a data-src attribute:
<img class="lazy" data-src="image.png"> The data-src declares the image source but does not fetch it yet.
JavaScript watches to see when this image is scrolled near/into view. Then the JavaScript swaps the data-src into a src attribute to trigger the actual image download at precisely that moment.
This gives you fine grained control to only load images as needed!
Intersection Observer API
The Intersection Observer API was introduced to simplify lazy loading elements on a page.
It lets you observe specific elements and get notified when they intersect with the viewport.
Some awesome benefits:
- Asynchronously observe changes
- Callbacks on visibility change
- High efficiency
- Wide browser support
This makes it perfect for image lazy loading:
- Observe image elements
- Only load when they near/enter viewport
- Simple to implement
Here is an example lazy load implementation:
// Select images
let images = document.querySelectorAll(‘.lazy‘);
// Create observer
let observer = new IntersectionObserver(entries => {
// When image intersects
entries.forEach(entry => {
if(entry.isIntersecting) {
// Load image
entry.target.src = entry.target.dataset.src;
// Stop observing
observer.unobserve(entry.target);
}
})
})
// Observe images
images.forEach(image => {
observer.observe(image);
});This handles loading images only as they scroll into view with excellent performance.
Browser Compatibility
Intersection Observer support is excellent in modern browsers but still has some gaps:
- Full support in Chrome, Firefox, Edge
- No support in IE
- Limited support in Safari
We leverage progressive enhancement to handle these cases:
// Scroll fallback
function lazyLoad() {}
if(‘intersectionObserver‘ in window) {
// Use preferred observer
let observer = new IntersectionObserver(entries => {
// Logic
});
lazyLoad = () => {
window.removeEventListener(‘scroll‘, lazyLoad);
};
} else {
// Attach scroll listener
window.addEventListener(‘scroll‘, lazyLoad);
}This tries to use IntersectionObserver if supported, but falls back to scroll events for incompatible browsers.
We fill the gaps with polyfills to emulate full support. Popular options are the W3C IntersectionObserver Polyfill and Polyfill.io.
So modern browsers get optimal native behavior, while unsupported browsers still function via scroll events and polyfills. A win all around!
Lazy Load Libraries
Manually handling lazy load cross-browser quirks can get quite complex. The good news is there are some great JavaScript lazy load libraries that do the heavy lifting:
Lozad.js – Lightweight high performer using IntersectionObserver
yall.js – Extremely lightweight with flexible API
lazysizes – Full featured and popular with responsive images
LazyLoad – Long standing library with scroll direction listening
I encourage leveraging one of these robust libraries for best results without reinventing the wheel.
Implementation Tips
Here are some top tips from my years of lazy loading images:
🔥 Prioritize visible images first – Images in the initial viewport should load normally to prevent shifts during loading.
🔥 Efficient images – Optimize images with responsive sizing, next-gen formats like WebP, and compression.
🔥 Page length – Avoid lazy loading on short pages or those with minimal images.
🔥 Scroll containers – Make sure to handle scroll events on any overflow containers.
🔥 Placeholders – Use blurred/color placeholders to indicate loading states.
🔥 Fallback loading – Have a regular src set for critical above-the-fold images.
Test across devices, browsers, and connections to catch edge cases. Analyze site metrics before and after implementing to quantify the impact.
Debugging Tips
Here are helpful ways to analyze and debug lazy loaded images:
👁️🗨️ Network waterfall – Inspect which images load in the network tab during scrolls.
🔬 Coverage – Check the coverage tab for resources loaded vs deferred.
📱 Real devices – Test varying networks and viewports for behavior validation.
⏱️ Throttling – Simulate slower connections locally.
📜 Scrolling – Visually inspect appropriate image loads during scrolls based on thresholds.
🛠️ Breakpoints – Debug JavaScript by stepping through handlers to inspect flows.
Fix any issues that come up for smooth lazy loading across scenarios!
Native Browser Lazy Loading
An emerging web standard introduces native browser lazy loading using the loading attribute:
<img src="cat.png" loading="lazy"> The browser handles deferring offscreen images instead of needing JavaScript. Some advantages:
- No custom logic required
- Leverages browser-level integration
- More consistent optimizations
- Automatic progressive enhancement
This provides an easier developer experience. Current browser support is around 70% globally.
I recommend augmenting native lazy load with a polyfill/JavaScript approach to maximize compatibility for now. But over the next year we should see native handling become viable as primary implementation.
Key Takeaways
Here are the big takeaways:
💡 Lazy loading defers offscreen image loading for faster pages
💡 Key web perf technique with real business benefits
💡 IntersectionObserver provides robust JavaScript handling
💡 Fallback to scroll events for browser compatibility
💡 Leverage libraries for heavy lifting
💡 Native browser loading coming soon!
Let me know if any questions pop up around implementation! I‘m always happy to help guide your web performance journey.
Onwards and upwards,
Alex
Performance Expert
