# What is Lazy loading?

> Lazy loading delays loading images, iframes or other resources until they are about to scroll into view, saving bandwidth and speeding up the first load.

URL: https://yes-seo.com/glossary/lazy-loading

**Lazy loading** means postponing the download of a resource until it’s actually needed — usually images and iframes below the first screen, which load only as the visitor scrolls toward them. A long article with 30 photos can start with three image requests instead of 30.

## Native lazy loading

All major browsers support the `loading` attribute on images and iframes, so the basics no longer need a JavaScript library:

```

```

The browser chooses how far ahead to start loading, early enough that most visitors never see an empty box ([web.dev: browser-level lazy loading](https://web.dev/articles/browser-level-image-lazy-loading)).

## Lazy loading and SEO

Googlebot doesn’t scroll like a person. It renders pages with a very tall viewport, so content that loads when it becomes visible is generally picked up. What fails is content that waits for a user action — a scroll event listener, a click on “load more”, a hover. Google’s [lazy-loading guidance](https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading) recommends native lazy loading, IntersectionObserver or a library built on it, and making paginated content reachable through real links.

Crawlers that don’t run JavaScript — our checker and many AI bots among them — only see the `src` in the HTML. A placeholder in `src` with the real file hidden in `data-src` leaves them with a blank image.

## Common mistakes

- **Lazy-loading the hero or LCP image.** It tells the browser to wait, which directly worsens [LCP](https://yes-seo.com/glossary/lcp). Some CMSs add `loading="lazy"` to every image; exclude the first one or two.

- **Missing width and height**, so the page jumps as each image arrives — a [CLS](https://yes-seo.com/glossary/cls) problem.

- **Lazy-loading tiny icons and logos**, where the saving is negligible.

- **Infinite scroll without paginated URLs**, so items beyond the first batch are never crawled.

- **Missing or empty alt text** on images that matter. Lazy or not, they need a description; see [alt text](https://yes-seo.com/glossary/alt-text).

Rule of thumb: eager for anything visible on a typical phone screen without scrolling, lazy for everything else.

## Beyond images

The same idea applies to heavy embeds. A map, video player or chat widget can show a lightweight preview — a static image with a play button — and load the real thing only when someone clicks. That keeps third-party JavaScript off the critical path, which helps both loading and responsiveness.

## Check your images

The [image alt text and image SEO checker](https://yes-seo.com/image-alt-checker) lists every image on a page with its alt text, file size, format, dimensions and lazy-loading attribute, and flags missing alt text, oversized files and layout-shift risks.

## Frequently asked questions

### Does lazy loading hurt SEO?

Not when it’s done properly. Native loading="lazy" and IntersectionObserver-based loading work with Googlebot. Problems start when content loads only after scrolling events or clicks, or when the hero image is lazy-loaded and LCP suffers.

### Is loading="lazy" supported in every browser?

All current major browsers — Chrome, Edge, Firefox and Safari — support it for images and iframes. Older browsers simply ignore the attribute and load the resource normally, so it is safe to use.

### Should I lazy-load images above the fold?

No. Images visible without scrolling, especially the largest one, should load eagerly, ideally with fetchpriority="high" on the main image. Lazy loading them only delays what the visitor sees first.