Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Lazy loading is a performance optimization technique that defers the loading of non-critical resources at page load time. Instead, these resources are loaded only when they're needed (typically when they're about to enter the viewport).
<img src="image.jpg" loading="lazy" alt="Description" />
Defer loading until near viewport
Load immediately (default)
Let browser decide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Images</title>
</head>
<body>
<div class="container">
<h1>🚀 Lazy Loading Images</h1>
<p class="subtitle">Images load only when they enter the viewport</p>
<div class="info-box">
<div class="info-title">💡 How It Works</div>
<div class="info-text">
The <code>loading="lazy"</code> attribute tells the browser to defer loading images
until they're near the viewport. Scroll down to see the effect!
</div>
</div>
<div style="height: 400px; margin: 30px 0;"></div>
<div class="gallery">
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
loading="lazy"
alt="Mountain landscape"
>
<div class="caption">Mountain View</div>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop"
loading="lazy"
alt="Forest path"
>
<div class="caption">Forest Path</div>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=300&h=200&fit=crop"
loading="lazy"
alt="Beach sunset"
>
<div class="caption">Beach Sunset</div>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=200&fit=crop"
loading="lazy"
alt="Desert dunes"
>
<div class="caption">Desert Dunes</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
Iframes (especially video embeds) can significantly slow down page load. Use lazy loading to load them only when needed:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" title="Video description" allowfullscreen ></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Iframes</title>
</head>
<body>
<div class="container">
<h1>🎥 Lazy Loading Iframes</h1>
<p class="subtitle">Videos load only when needed - scroll down to see!</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Fast Initial Load</div>
<div class="feature-text">Page loads instantly without heavy embeds</div>
</div>
<div class="feature-card">
<div class="feature-icon">💰</div>
<div class="feature-title">Save Bandwidth</div>
<div class="feature-text">Only loads videos users actually want to see</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Better UX</div>
<div class="feature-text">Improves Core Web Vitals scores</div>
</div>
</div>
<div class="spacer">
👇 Scroll down to trigger the lazy-loaded video 👇
</div>
<h2 style="color: #10b981; margin-bottom: 20px;">Embedded Video (Lazy Loaded)</h2>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
loading="lazy"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<p style="text-align: center; color: #6b7280; font-size: 14px;">
✅ This iframe only loaded when you scrolled near it!
</p>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy vs Eager Loading</title>
</head>
<body>
<div class="container">
<h1>⚡ Lazy Loading vs Eager Loading</h1>
<div class="comparison">
<div class="comparison-card eager">
<div class="card-header">
<div class="card-icon">❌</div>
<div class="card-title">Eager Loading</div>
</div>
<div class="metric">
<div class="metric-label">Initial Page Load</div>
<div class="metric-value">3.2s</div>
</div>
<div class="metric">
<div class="metric-label">Data Downloaded</div>
<div class="metric-value">4.5 MB</div>
</div>
<div class="metric">
<div class="metric-label">Network Requests</div>
<div class="metric-value">45</div>
</div>
<div class="pros-cons">
<h4>❌ Drawbacks:</h4>
<ul>
<li>❌ Slower initial load time</li>
<li>❌ Wastes bandwidth on unused resources</li>
<li>❌ Poor performance on slow connections</li>
<li>❌ Higher server costs</li>
</ul>
</div>
</div>
<div class="comparison-card lazy">
<div class="card-header">
<div class="card-icon">✅</div>
<div class="card-title">Lazy Loading</div>
</div>
<div class="metric">
<div class="metric-label">Initial Page Load</div>
<div class="metric-value">0.8s</div>
</div>
<div class="metric">
<div class="metric-label">Data Downloaded</div>
<div class="metric-value">1.2 MB</div>
</div>
<div class="metric">
<div class="metric-label">Network Requests</div>
<div class="metric-value">12</div>
</div>
<div class="pros-cons">
<h4>✅ Benefits:</h4>
<ul>
<li>✅ 4x faster initial load</li>
<li>✅ Saves 73% bandwidth</li>
<li>✅ Better user experience</li>
<li>✅ Improved Core Web Vitals</li>
</ul>
</div>
</div>
</div>
<div class="winner">
🏆 Lazy Loading is the clear winner for better performance!
</div>
</div>
</body>
</html>Loading preview...
Any image that's not immediately visible should be lazy loaded
Hero images and critical content should load immediately
Always specify width and height attributes to prevent layout shift
Consider using low-quality image placeholders (LQIP) for better UX
Native lazy loading is widely supported:
For older browsers, the attribute is safely ignored and images load normally.