Introduction
Website speed is one of the most important factors for SEO, user experience, and performance optimization. When a web page loads, it often downloads many resources like images, videos, iframes, and scripts, even if the user never scrolls to them.
This is where Lazy Loading becomes extremely useful.
Lazy loading allows a website to delay loading non-critical resources until they are actually needed, usually when the user scrolls near them.
Benefits
- Faster page load time
- Reduced bandwidth usage
- Better SEO ranking
- Improved Core Web Vitals
- Better user experience
What is Lazy Loading?
Lazy loading is a performance optimization technique where resources are loaded only when they are needed instead of loading everything immediately when the page opens.
Without Lazy Loading
Page Load → Image1 → Image2 → Image3 → Image4 → Image5
With Lazy Loading
Page Load → Image1
Scroll → Image2
Scroll → Image3
Scroll → Image4
Native Lazy Loading in HTML
Modern browsers support built-in lazy loading using the loading attribute.
Syntax
<img src="image.jpg" loading="lazy" alt="Example Image">
Example
<img
src="mountain.jpg"
alt="Beautiful Mountain"
width="800"
height="500"
loading="lazy">
Attribute Values
| Value | Meaning |
|---|---|
| lazy | Load when needed |
| eager | Load immediately |
| auto | Browser decides |
Lazy Loading for Iframes
You can also lazy load embedded content like YouTube videos or maps.
<iframe
src="https://www.youtube.com/embed/video-id"
loading="lazy"
width="600"
height="400">
</iframe>
Useful for:
- YouTube videos
- Google Maps
- Social media embeds
- External widgets
Lazy Loading Using JavaScript (Advanced)
Before native support existed, developers implemented lazy loading using JavaScript.
HTML Setup
<img
data-src="photo.jpg"
class="lazy-image"
alt="Nature Image">
JavaScript Example
document.addEventListener("DOMContentLoaded", function () {
let lazyImages = document.querySelectorAll(".lazy-image");
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let img = entry.target;
img.src = img.dataset.src;
img.classList.remove("lazy-image");
observer.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
observer.observe(img);
});
});
This approach uses the Intersection Observer API, which is efficient and modern.
Lazy Loading Background Images
Sometimes images are used inside CSS backgrounds.
HTML
<div class="lazy-bg" data-bg="background.jpg"></div>
JavaScript
let lazyBackgrounds = document.querySelectorAll(".lazy-bg");
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
let element = entry.target;
element.style.backgroundImage = "url(" + element.dataset.bg + ")";
observer.unobserve(element);
}
});
});
lazyBackgrounds.forEach(bg => observer.observe(bg));
Benefits of Lazy Loading
1. Faster Page Speed
Only necessary resources load first.
2. Better SEO
Search engines favor fast websites.
3. Reduced Bandwidth
Users download fewer files.
4. Better Mobile Experience
Mobile networks benefit greatly from lazy loading.
Best Practices for Lazy Loading
Always Define Width and Height
<img src="image.jpg" loading="lazy" width="600" height="400">
This prevents layout shift issues.
Avoid Lazy Loading Above-the-Fold Images
Hero images should load immediately.
Bad example:
<img src="hero.jpg" loading="lazy">
Correct:
<img src="hero.jpg" loading="eager">
Lazy Loading vs Eager Loading
| Feature | Lazy Loading | Eager Loading |
|---|---|---|
| Load time | Delayed | Immediate |
| Performance | Faster | Slower |
| Bandwidth | Lower | Higher |
| Use case | Images, videos | Hero images |
When Should You Use Lazy Loading?
Use lazy loading for:
- Blog images
- Product galleries
- Advertisements
- Embedded videos
- Comment sections
- Infinite scrolling pages
Avoid lazy loading for:
- Website logo
- Hero banner
- Above-the-fold images
Simple Working Example
<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading Example</title>
</head>
<body>
<h1>Lazy Loading Images</h1>
<img src="image1.jpg" loading="lazy" alt="Image 1">
<img src="image2.jpg" loading="lazy" alt="Image 2">
<img src="image3.jpg" loading="lazy" alt="Image 3">
</body>
</html>
Conclusion
Lazy loading is one of the most effective techniques for improving website performance.
By combining:
- Native HTML lazy loading
- Intersection Observer API
- Proper SEO practices
you can significantly improve page speed, user experience, and search engine rankings.
Author Tip:
Always test lazy loading using Google Lighthouse or PageSpeed Insights to measure performance improvements.
Top comments (0)