Stop 16 · PerformanceTopics · 1/13

Lazy Loading

In short

Why download 40 product photos when the user can only see six? Lazy loading waits until something is about to scroll into view, so the first screen loads much faster on patchy mobile data.

Deferring the loading of non-critical resources — images, routes, components — until they're actually needed, to speed up initial page load.

Think of it like this

Rotis at a wedding buffet

The cook doesn't make 500 rotis at 6 pm and let them go cold. He makes them as the queue reaches the counter. Lazy loading does the same: images and iframes are fetched only when the user is about to reach them.

Watch it happen

Comments that load on scroll

Page

Observer

Server

observe(#comments)

1/6On load, the page only watches the comments box. Nothing is fetched yet.

The big ideas

What you need to know

One attribute for images

loading="lazy" on img and iframe tells the browser to wait until they're near the viewport. No JavaScript needed.

Never lazy load the hero

The big image at the top should load immediately. Lazy loading it delays what users see first.

IntersectionObserver for the rest

For custom cases, like loading a comments section, IntersectionObserver tells you when an element enters the screen.

Reserve the space

Give lazy images width and height so the page doesn't jump when they finally appear.

See it in code

Walk through the code

html

1<!-- Below the fold: let the browser wait -->2<img src="/menu/paneer-tikka.webp" alt="Paneer tikka" width="400" height="300" loading="lazy" />3<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Recipe video" loading="lazy"></iframe>4 5<script>6  // Load comments only when the user scrolls near them7  const box = document.querySelector("#comments");8  new IntersectionObserver((entries, observer) => {9    if (entries[0].isIntersecting) {10      loadComments(box);11      observer.disconnect();12    }13  }, { rootMargin: "200px" }).observe(box);14</script>

1/4Images and iframes below the fold get loading="lazy", and the browser handles the rest.

rootMargin: "200px" starts loading a little before the section is visible, so the user rarely sees it pop in.

Save yourself the pain

Common mistakes

Oops

Adding loading="lazy" to every image, including the banner.

Do this instead

Load above-the-fold images normally. Lazy load only what starts off screen.

Oops

Lazy images with no width and height.

Do this instead

Always set dimensions or a CSS aspect-ratio, or the content jumps when images arrive.

Your mission

Put a gallery on a diet

~20 min

Quick check

Which image should NOT get loading="lazy"?

Go deeper

1Audit a page for below-the-fold images and lazy-load them.
2Lazy-load a heavy, rarely-used component or route with a dynamic import.
3Measure the before/after impact using Lighthouse.