What is 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:

<!-- Above the fold: load immediately -->
<img src="/img/hero.avif" width="1200" height="600" fetchpriority="high" alt="Red kayak on a calm lake">

<!-- Further down: load when near the viewport -->
<img src="/img/step-4.webp" width="800" height="533" loading="lazy" alt="Tightening the seat straps">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" width="560" height="315" loading="lazy" title="Paddling basics"></iframe>

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

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

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