Lazy Loading

A technique to defer loading of images and iframes that are outside the visible viewport, speeding up initial page load.

In brief

Lazy loading is an approach where resources (images, videos, iframes) load only when the user scrolls to their location. It reduces initial load time and data transfer, especially on pages with many media elements.

Native lazy loading (HTML attribute)

HTML

<img src="image.jpg" alt="description" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

Browser support: Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+. The `loading="lazy"` attribute requires no extra JavaScript and is supported by Googlebot.

JavaScript solutions (for older browsers)

lazysizes – popular library with responsive image support.
Intersection Observer API – native API to detect when an element enters the viewport.
lozad.js – lightweight (~1.9 KB) library.

SEO impact of lazy loading

Googlebot supports native lazy loading and correctly sees such images. For JavaScript implementations, ensure that the initial HTML contains a real src (or data-src) so the bot can discover it. Alternatively, use a `<noscript>` tag with a standard image.

Do not use lazy loading for above‑the‑fold images. This may delay the main image and hurt LCP. Also always specify width and height to avoid CLS.

FAQ

Common questions

Yes, but you‘ll need JavaScript. For example, add a class when the element enters the viewport and change the background-image. Do not use it for critical images.

Open the page in Chrome, go to the Network tab, and scroll down. Images should load only when scrolled into view. Also verify that the HTML contains src or data‑src with a real URL.

Google indexes images if they are present in the DOM. With native lazy loading (loading=lazy) and correct JS implementation, indexing works fine.

Lazy Loading

Native lazy loading (HTML attribute)

JavaScript solutions (for older browsers)

SEO impact of lazy loading

Common questions

Discuss your project?