# Lazy loading

Category: [Rendering & JavaScript](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/) › [JavaScript & frameworks](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/javascript-frameworks/) · Also known as: lazy load, deferred loading

**Lazy loading** means that non-critical resources such as images, iframes or scripts load only when they are needed, for example when they are about to scroll into view. MDN describes it as a strategy to identify non-critical resources and load them only when needed, which shortens the critical rendering path and the initial load time.

## How is lazy loading implemented?

- **The `loading` attribute.** MDN says it applies to `<img>`, `<iframe>`, `<video>` and `<audio>`. The default value is `eager`, which loads at once. With `lazy`, loading is deferred until the element is near the viewport.
- **Intersection Observer API.** A script detects when an element enters the viewport and then loads it.
- **Code splitting.** JavaScript loads on demand.

## Lazy loading and SEO

Google writes that a lazy-loading implementation must load all relevant content whenever it is visible in the viewport. Google names three suitable approaches, browser-native lazy loading for images and iframes, the Intersection Observer API, and JavaScript libraries that load content when it enters the viewport. These must not rely on user actions such as scrolling or clicking, because Google Search does not interact with pages that way.

For infinite scroll, Google advises giving each content chunk its own persistent URL with an absolute page number such as `?page=12`, linking the chunks in sequence, and updating the address with the History API. The URL Inspection tool in Search Console shows whether image or video URLs appear in the `src` attributes of the rendered HTML.

## Common mistakes

The image at the top of the page is marked `loading="lazy"`. web.dev puts it clearly: never lazy-load your LCP image, because it always causes unnecessary resource load delay and hurts LCP. web.dev adds that images visible on first load should use the default eager loading. A width and height on every lazy image reserve space and prevent layout shifts (CLS).

## Example

```html
<img src="/gallery-3.jpg" width="800" height="600"
     loading="lazy" alt="Side view of the product">
```

## FAQ

**Is lazy loading good for SEO?** It speeds up pages when used for offscreen content. Content that loads only after a scroll or click event may never be rendered for Google.

**What is eager loading?** The browser's default. The resource loads immediately.

## Not to be confused with

- [Infinite scroll](https://seo-geo-glossary.com/en/glossary/infinite-scroll/index.md): keeps adding further content chunks while people scroll. Google advises giving each chunk its own persistent URL with an absolute page number.

## Related terms

- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/en/glossary/largest-contentful-paint/index.md)
- [Cumulative Layout Shift (CLS)](https://seo-geo-glossary.com/en/glossary/cumulative-layout-shift/index.md)
- [Page speed](https://seo-geo-glossary.com/en/glossary/page-speed/index.md)
- [Infinite scroll](https://seo-geo-glossary.com/en/glossary/infinite-scroll/index.md)
- [Image SEO](https://seo-geo-glossary.com/en/glossary/image-seo/index.md)

## Sources

- [Lazy loading – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading)
- [Fix lazy-loaded content – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading)
- [Browser-level image lazy loading – web.dev](https://web.dev/articles/browser-level-image-lazy-loading)
- [Optimize Largest Contentful Paint – web.dev](https://web.dev/articles/optimize-lcp)

---

Last updated: October 8, 2026
URL: https://seo-geo-glossary.com/en/glossary/lazy-loading/