Lazy loading

What is lazy loading?

Lazy loading is a technique that delays loading resources, usually images and iframes, until they are near the visible part of the screen. Instead of downloading every image on a long page at once, the browser fetches each one as the visitor scrolls towards it, which saves data and speeds up the first load.

All major browsers support native lazy loading with the loading="lazy" attribute on <img> and <iframe> elements. Older approaches use JavaScript, ideally the IntersectionObserver API, to swap in the real image source when an element comes into view.

Why lazy loading matters for SEO

Done well, lazy loading improves page speed by letting the browser focus on what is visible first. Done badly, it hurts in two ways.

First, lazy loading the main image at the top of the page delays Largest Contentful Paint, because the browser waits before fetching it. Second, Googlebot does not scroll. Google renders pages with a tall viewport, so content set to load when it enters the viewport usually loads, but content that only appears after a scroll event, a click or a “load more” button may never be seen. JavaScript implementations that rely on scroll events, rather than native lazy loading or IntersectionObserver, are the most likely to fail.

How to lazy load images for SEO

1. Use native loading="lazy" on images and iframes below the fold.
2. Do not lazy-load images in the first screen, especially the LCP image; give that one fetchpriority="high" instead.
3. Keep the real image URL in the src (or srcset) attribute so crawlers can find it, rather than hiding it in a data attribute only a script reads.
4. Set width and height on lazy images to avoid layout shifts.
5. For content lists, back infinite scroll with paginated URLs that crawlers can reach.
6. Check the rendered HTML in Search Console’s URL Inspection tool to confirm the images and content appear.

Lazy loading example

<!-- Hero image: load straight away -->
<img src="/img/hero.webp" width="1200" height="600" fetchpriority="high" alt="Runner on a trail">

<!-- Further down the page: lazy-load -->
<img src="/img/gallery-4.webp" width="800" height="600" loading="lazy" alt="Shoe sole close-up">