Lazy loading = don't load something until it's needed. The trigger is usually scroll-into-view, hover, or click. Goal: cut initial bytes and main-thread work; pay the cost only for resources users actually engage with.

1. Native image lazy-loading

<img src="below-fold.jpg" loading="lazy" alt="" width="800" height="600">

• Zero JS. Browser decides when to fetch based on viewport distance.
• Set width + height (or use CSS aspect-ratio) so the page doesn't shift when the image loads.
• Don't lazy-load the LCP image — that's a known anti-pattern that tanks LCP. Use loading="eager" (default) + fetchpriority="high" for it.

2. Native iframe lazy-loading

<iframe src="https://www.youtube.com/embed/…" loading="lazy"></iframe>

YouTube embeds, ads, maps in the sidebar — huge wins because iframes can load their own megabytes of JS.

3. JS code splitting (lazy modules)

button.onclick = async () => {
  const { default: heavy } = await import('./heavy-tool.js');
  heavy.run();
};

The bundler emits heavy-tool.js as a separate chunk fetched on demand.

4. React.lazy + Suspense

const Modal = React.lazy(() => import('./Modal'));

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && (
        <Suspense fallback={<Spinner />}>
          <Modal />
        </Suspense>
      )}
    </>
  );
}

React.lazy works on default exports. For named exports, use lazy(() => import('./X').then(m => ({ default: m.Foo }))).

In Next.js, prefer next/dynamic — supports SSR control:

import dynamic from 'next/dynamic';
const Map = dynamic(() => import('./Map'), { ssr: false, loading: () => <Spinner /> });

5. IntersectionObserver for arbitrary lazy components

For components without code-split needs but heavy render cost:

function LazyVisible({ children, height = 200 }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setVisible(true);
        io.disconnect();
      }
    }, { rootMargin: '200px' });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return <div ref={ref} style={{ minHeight: height }}>{visible ? children : null}</div>;
}

rootMargin: '200px' starts loading before it's strictly visible so it's ready by the time the user reaches it.

6. Lazy data fetching

React Query / SWR's useQuery only runs when the component mounts. Wrap heavy data needs in a deferred component, and the fetch deferral comes for free.

When NOT to lazy-load

• LCP image / hero font — those are critical.
• Above-the-fold content — visible immediately, no benefit.
• Tiny components — overhead of split + suspense exceeds gain.
• Sequential dependencies that would create waterfalls (lazy → load → lazy → load).

Layout shift trap

Lazy-loaded images without reserved dimensions cause CLS (cumulative layout shift) when they arrive. Always:

• Set explicit width and height attributes, or
• Use aspect-ratio CSS, or
• Provide a sized skeleton placeholder.

Measurement

• Lighthouse: "Defer offscreen images," "Reduce unused JavaScript."
• DevTools Coverage tab: see how much JS was actually executed vs loaded.
• Real metrics: LCP, INP, total bytes transferred.

Mental model

Lazy loading is the opposite of preload. Preload: "I need this earlier than the browser would discover it." Lazy: "I don't need this yet — wait." Use both in concert: preload the LCP image and the critical font; lazy-load everything below the fold and behind interactions.