Lazy Loading Patterns Guide

Lazy loading defers loading of non-critical resources until they're needed, reducing initial page weight and improving LCP. Use native browser APIs for images and dynamic imports for JavaScript components.

Native Image Lazy Loading

<!-- ✅ Lazy load below-fold images -->
<img
  src="product-gallery-2.webp"
  width="800"
  height="600"
  loading="lazy"
  alt="Product gallery image"
>

<!-- ❌ NEVER lazy-load the LCP/hero image -->
<!-- This INCREASES LCP -->
<img src="hero.webp" loading="lazy" alt="Hero">

<!-- ✅ Hero image: eager + high priority -->
<img
  src="hero.webp"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
  alt="Hero"
>

<!-- Also lazy-load iframes -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  width="560"
  height="315"
></iframe>

React Component Lazy Loading

import { lazy, Suspense } from 'react';

// Lazy load heavy components
const HeavyChart     = lazy(() => import('./components/HeavyChart'));
const MapComponent   = lazy(() => import('./components/MapComponent'));
const VideoPlayer    = lazy(() => import('./components/VideoPlayer'));
const PdfViewer      = lazy(() => import('./components/PdfViewer'));

// Loading skeleton component
function ChartSkeleton() {
  return <div class="h-64 bg-gray-200 animate-pulse rounded" />;
}

// Usage with Suspense
function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<ChartSkeleton />}>
          <HeavyChart data={data} />
        </Suspense>
      )}
    </div>
  );
}

Custom Intersection Observer Hook

// useIntersectionObserver.ts
import { useEffect, useRef, useState } from 'react';

export function useIntersectionObserver(options = {}) {
  const ref = useRef<HTMLElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.unobserve(el); // Only trigger once
      }
    }, { rootMargin: '200px', ...options });

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return { ref, isVisible };
}

// Usage: lazy-load a component on scroll into view
function LazySection() {
  const { ref, isVisible } = useIntersectionObserver();

  return (
    <div ref={ref}>
      {isVisible ? (
        <Suspense fallback={<Skeleton />}>
          <HeavyComponent />
        </Suspense>
      ) : (
        <div style={{ height: 400 }} />  {/* Placeholder to prevent CLS */}
      )}
    </div>
  );
}

Virtual Scrolling for Long Lists

npm install @tanstack/react-virtual

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,  // estimated row height in px
    overscan: 10,            // render 10 extra rows above/below
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: virtualRow.start,
              height: virtualRow.size,
            }}
          >
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

When to Use Each Pattern