Lazy Loading

Lazy loading defers the loading of non-critical resources (images, iframes, scripts) until they are needed, typically when they scroll into the viewport.

Definition

Lazy loading is a performance optimization that delays loading of resources that are not immediately needed. Instead of loading every image, video, script, and iframe when the page first loads, lazy loading waits until the resource is about to enter the viewport (or is actually needed). The result: faster initial page loads, less bandwidth consumed, and lower data costs for users. The web platform now has native lazy loading via the loading="lazy" attribute on <img> and <iframe> elements. Before this, developers relied on JavaScript libraries (Intersection Observer API) to detect element visibility and swap placeholder images for real ones. JavaScript-based lazy loading is still used for background images, custom components, and more complex scenarios. Lazy loading is one of the highest-impact performance optimizations you can make, especially on image-heavy pages.

How it works

Native lazy loading: add loading="lazy" to <img> or <iframe> elements. The browser defers loading until the element is close to the viewport (distance varies by browser). JavaScript lazy loading: use the Intersection Observer API to detect when an element enters the viewport, then set its src attribute or trigger data fetching. JavaScript approaches give more control (custom thresholds, preloading strategies) but require more code.

What to lazy load and what not to

Lazy load: below-the-fold images, iframes (especially embeds like maps and videos), heavy scripts not needed for initial render, off-screen components in long pages. Do NOT lazy load: above-the-fold hero images (it hurts Largest Contentful Paint LCP), critical CSS or fonts, primary navigation scripts, or the main content image of a page.

Common misconception

Lazy loading everything is not a performance win. If you lazy load above-the-fold content, you actually harm perceived performance and Core Web Vitals. The browser needs to download the image eventually, and lazy loading adds overhead. Also, native lazy loading (loading="lazy") does not work for <picture> element sources or CSS background-image. Those still require JavaScript-based solutions.

Note

Native loading="lazy" defers loading but does not change the image placeholder behavior. Always include explicit width and height attributes (or CSS aspect-ratio) to prevent Cumulative Layout Shift (CLS) when lazy images load.

In code

```html
<!-- Native lazy loading -->
<img src="hero.jpg" alt="Hero" loading="eager">
<img src="gallery-photo.jpg" alt="Gallery" loading="lazy">

<!-- JavaScript lazy loading with Intersection Observer -->
<img data-src="lazy-photo.jpg" alt="Lazy" class="lazy">
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  document.querySelectorAll('.lazy').forEach(img => observer.observe(img));
</script>

## Common questions

Q: Does lazy loading affect SEO?

A: It can, if implemented poorly. Lazy loading above-the-fold content harms LCP and can reduce crawlability. Search engines may not wait for lazy-loaded images to load.

Q: What is the difference between lazy loading and deferred loading?

A: Lazy loading defers based on need (usually scroll position). Deferred loading defers execution based on time (like `defer` on scripts).

Key takeaways:

- Lazy loading defers non-critical resources until needed, improving initial page load speed.

- Use native `loading="lazy"` for images and iframes.

- Do not lazy load above-the-fold content. It harms Core Web Vitals.