Lazy Loading

Lazy loading means loading something only when it is needed, instead of everything at the start. The first visit becomes faster, and users who never reach a part of the page never pay for it.

1. Lazy-load images with HTML

1

<img src="photo.jpg" alt="A mountain lake" width="800" height="533" loading="lazy">

The loading="lazy" attribute tells the browser to delay the image until it is near the viewport. No JavaScript needed. Do not lazy-load the main image visible at the top of the page: it delays what the user sees first. Also set width and height so the layout does not jump when the image arrives.

2. Custom lazy loading with IntersectionObserver

When you need your own behaviour (a video, a map, a chart), load it when its container becomes visible. See IntersectionObserver.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
  .spacer { height: 160px; background: #f4f9fc; }
  #lazy { min-height: 60px; background: #fdebd9; padding: 8px; }
</style>
<div class="spacer">Scroll down</div>
<div id="lazy">Not loaded yet</div>
<script>
  const target = document.querySelector("#lazy");

  const observer = new IntersectionObserver(([entry]) => {
    if (!entry.isIntersecting) return;
    target.textContent = "Loaded when it came into view!";
    console.log("lazy content loaded");
    observer.disconnect();
  });

  observer.observe(target);
</script>

3. Lazy-load code with dynamic import

Heavy features can wait until the user wants them: Dynamic import().

1
2
3
4

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

4. Lazy initialisation

Do not compute or build things you might never use.

1
2
3
4
5
6
7
8
9
10
11
12

let cache;

function getExpensiveData() {
  cache ??= (() => {
    console.log("computing…");
    return Array.from({ length: 5 }, (_, i) => i * i);
  })();
  return cache;
}

console.log(getExpensiveData());  // → [0, 1, 4, 9, 16]   (and "computing…" is printed once, before it)
console.log(getExpensiveData());  // reused, no "computing…"

5. Lazy-load data

Load the first page of results, and the next when the user scrolls or presses “Load more” (infinite scroll or pagination).

6. Defer non-critical scripts

Add defer to scripts, and load analytics, chat widgets and similar extras after the main content, or on interaction.

Trade-offs

• Delay on first use: the user may wait a moment when the lazy part is first needed. Preload on hover, or when the browser is idle, if it matters.
• Layout shift: reserve space with sizes or placeholders.
• Accessibility and SEO: important content should not depend on scrolling or clicking to exist. Search engines and assistive technology need to find it.
• Do not lazy-load what is visible immediately.

Measure the benefit

Use the browser’s Network and Performance panels, and tools like Lighthouse, to confirm that lazy loading improved the experience: Measuring Performance.