What is Lazy Loading?

What is Lazy Loading?

Lazy loading defers fetching images, iframes, JavaScript modules, or components until the user scrolls near them. The HTML loading="lazy" attribute—standardized in Chrome 76 (2019), now in all major browsers including Safari 15.4+ (2022)—handles this natively without JavaScript. It cuts initial page weight, drops Time to Interactive, and improves Largest Contentful Paint scores. Unless you screw it up.

The most common mistake I fix: developers slap loading="lazy" on the hero image. That tanks LCP. Don't lazy load above-the-fold content. Ever.

A typical e-commerce listing with 40+ thumbnails? Lazy loading cuts initial transfer by 60–80%. We've shipped this on 50+ projects.

How it works

Two main approaches:

Native browser lazy loading

Add loading="lazy" to <img> or <iframe>:

<img src="/products/shoe-42.webp"
     alt="Running shoe model 42"
     width="400"
     height="300"
     loading="lazy"
     decoding="async" />

The browser picks a threshold—usually ~1250px below the viewport on fast connections, ~2500px on slow ones in Chromium—and starts fetching before the element appears. You don't control this. The browser does it based on connection speed and device.

Intersection Observer API

For finer control—React components, video elements, animations—use IntersectionObserver:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

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

Framework-level lazy loading

Next.js <Image> applies loading="lazy" by default. Use priority={true} to opt out for above-the-fold images. Astro's <Image /> does the same. In React, React.lazy() with Suspense handles component-level code splitting—conceptual lazy loading for JavaScript bundles.

Critical detail: always set explicit width and height (or CSS aspect-ratio) on lazy-loaded images. Otherwise you'll blow your Cumulative Layout Shift score.

When to use it

Lazy loading is default-on for most below-the-fold content. But it's not universal.

Use lazy loading when:

• Long pages with many images (blogs, product grids, galleries)
• Embedding third-party iframes (YouTube, maps) below the fold
• Loading heavy components conditionally (dashboards, modals, tab content)
• Initial payload exceeds ~1.5 MB uncompressed

Don't use lazy loading when:

• The resource is above the fold—your LCP element (hero image, banner) needs loading="eager" or priority={true} in Next.js, ideally with fetchpriority="high"
• The page has fewer than ~3 images total—overhead isn't worth it
• You're dealing with print stylesheets where off-screen content must render
• Critical fonts or CSS—these load eagerly, not lazily

My preferred pattern: lazy load everything by default, then explicitly mark above-the-fold assets as eager. It's harder to forget to lazy load than to forget to prioritize.

Lazy Loading vs alternatives

loading="lazy" and fetchpriority aren't competing. They're complementary. I use both on the same page: fetchpriority="high" on the hero, loading="lazy" on everything else. content-visibility: auto is the more aggressive cousin—it skips rendering entirely, not just fetching—and pairs well with lazy loading on very long pages.

Real-world example

We rebuilt a recipe blog in Astro 4 (800+ posts, averaging 12 images per post). Before optimization: 4.2 MB initial transfer, 4.8s LCP on mobile (3G throttled). We applied native loading="lazy" to all images except the hero, converted to WebP/AVIF with Astro's <Image />, set explicit dimensions on every element, and added fetchpriority="high" to the hero.

Result: initial transfer dropped to 680 KB, LCP fell to 1.9s, CLS stayed at 0 because every image had reserved space. Lighthouse performance score jumped from 52 to 94. The entire change was about 30 lines of template code. No custom JavaScript.