WEB DEVELOPMENT

Home › Glossary › Web Development· 242 ·

Lazy Loading

\ˈleɪzi ˈloʊdɪŋ\n. & v.

Filed underWeb DevelopmentPerformanceCro

In brief · quick answer

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

§ 1 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.

§ 2 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.

§ 3 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.

§ 4 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.

§ 5 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.

§ 6 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>
```

§ 7 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.

How Atomic Glue helps

Atomic Glue optimizes every site with strategic lazy loading. Faster pages, lower bandwidth, better Core Web Vitals. See our Conversion Optimization services.

Get in touch

# 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.

Category: Web Development (also: Performance, Cro)

Author: Atomic Glue Team

## Definition

## How it works

## What to lazy load and what not to

## Common misconception

## Note

## In code

## 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.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/lazy-loading