What is lazy loading?

Lazy loading defers fetching a resource until it is actually needed, instead of downloading everything up front. Less work during the initial load means the page becomes usable sooner and you stop paying for bytes the user may never scroll to.

Images and iframes

The browser handles this natively — no library required:

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="">
<iframe src="map.html" loading="lazy"></iframe>

Always set width and height (or aspect-ratio), otherwise the space collapses until the image arrives and the page jumps — hurting Cumulative Layout Shift, the thing you were trying to improve.

One important exception: do not lazy-load your hero image. It is your Largest Contentful Paint element, and deferring it makes LCP worse. Give that one loading="eager" and fetchpriority="high".

JavaScript

A dynamic import() splits code into a separate chunk fetched on demand:

button.addEventListener("click", async () => {
  const { openEditor } = await import("./editor.js");
  openEditor();
});

This suits heavy dependencies behind an interaction — a rich text editor, a charting library, a modal nobody opens on most visits.

Anything else

IntersectionObserver lets you trigger loading when an element nears the viewport, which is how infinite scroll and lazy-rendered lists work:

const io = new IntersectionObserver((entries) => {
  for (const e of entries) if (e.isIntersecting) loadMore();
}, { rootMargin: "200px" });

The rootMargin starts the work slightly before the element is visible, so content is ready by the time the user gets there. Lazy loading trades a smaller initial payload for a possible wait later — the goal is to make that wait invisible.