⏳ Lazy Loading Guide

Load Content On-Demand for Faster Page Speed

What is Lazy Loading?

❌ Without Lazy Loading

All images load immediately, even those below the fold

→

✅ With Lazy Loading

Images load only when entering viewport

🎯 Benefits

⚡

Faster Load Time

Reduce initial page load by deferring content

📉

Less Bandwidth

Users only download what they see

💾

Lower Memory

Browser uses less memory and resources

📊

Better Core Web Vitals

Improves LCP and reduces layout shifts

🔧 Implementation Methods

Native Lazy Loading Recommended

Use the native loading="lazy" attribute. Supported in all modern browsers.

<!-- Native image lazy loading -->
<img
  src="image.jpg"
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
/>

<!-- Native iframe lazy loading -->
<iframe
  src="https://youtube.com/embed/..."
  loading="lazy"
></iframe>

Intersection Observer Advanced

JavaScript API for custom lazy loading with more control.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]')
  .forEach(img => observer.observe(img));

📦 What to Lazy Load

🖼️

Images

Below-the-fold images, thumbnails, galleries

Must Do
🎬

Videos & Iframes

YouTube embeds, video players, maps

Must Do
📜

Scripts

Non-critical JavaScript, widgets

Should Do
💬

Comments

Comment sections, social feeds

Should Do
📊

Widgets

Charts, interactive elements

Can Do
📰

Below-Fold Content

Long pages, infinite scroll

Can Do

⚠️ LCP Warning: Don't Lazy Load Above-the-Fold

❌ Don't Lazy Load

Hero images, main headings, above-the-fold content, LCP elements. These should load immediately for best Core Web Vitals.

✅ Use fetchpriority Instead

For critical images, use fetchpriority="high" to prioritize loading. Never use lazy loading on LCP elements.

🌐 Browser Support

Browser loading="lazy" Intersection Observer
Chrome 77+ ✅ ✅
Firefox 75+ ✅ ✅
Safari 15.4+ ✅ ✅
Edge 79+ ✅ ✅

📋 Implementation Checklist

Images

Videos & Iframes

Testing