Glossaire · SEO

Lazy loading

Lazy loading (or deferred loading) is a web optimization technique that delays loading non-critical page resources — images, videos, iframes — until the user actually needs them, typically when they enter the visible area of the screen. Instead of downloading every media file as soon as the page opens, the browser first loads only the content above the fold, then loads the rest as the user scrolls. This approach reduces the initial page weight, speeds up rendering, and improves Core Web Vitals, particularly LCP. In SEO, a well-implemented lazy loading strategy supports a better user experience and more efficient crawling by Googlebot, provided that critical resources are never deferred and that the deferred content remains accessible to the rendering engine.

Lazy loading is now a standard practice in web performance optimization. It addresses a simple problem: most pages load dozens of images and media files that the user will never see unless they scroll. Loading all that weight upfront wastes bandwidth and delays the display of genuinely useful content.

How it works

The browser identifies resources flagged as deferred and only triggers their download when they approach the visible area (the viewport). In modern HTML, you simply add the loading="lazy" attribute to an <img> or <iframe> tag. The browser then calculates a pre-loading distance and fetches the image just before it appears on screen, ensuring a smooth transition.

Before this native attribute, lazy loading relied on JavaScript and the IntersectionObserver API. That approach is still useful for advanced cases (CSS backgrounds, complex components), but the native attribute is now the recommended solution for its simplicity and compatibility with Googlebot.

Why it matters for SEO

The direct impact is measured on Core Web Vitals. By reducing the number of requests at initial load, lazy loading improves render time and eases the LCP. These performance signals are part of the page experience criteria used by Google.

A retenir

Never defer the main hero image or elements above the fold: doing so would hurt LCP instead of improving it.

Pitfalls to avoid

A poor implementation can harm indexing. If images are loaded exclusively through JavaScript that Googlebot does not execute, they may never be indexed in Google Images. You should therefore always provide a valid src attribute and test the rendering. Likewise, deferring too much text content or immediately visible elements degrades the perceived experience. Lazy loading is a precision tool, to be applied only to off-screen resources.

FAQ

Questions fréquentes

When implemented well, it is beneficial: it lightens the page and improves Core Web Vitals. When misconfigured, it can prevent Googlebot from indexing images or slow down the rendering of main content. The golden rule: never defer resources visible above the fold.

The native HTML attribute loading="lazy" is enough in most cases. It is supported by all modern browsers and understood by Googlebot, without relying on JavaScript. For off-screen media only, this is the most reliable and straightforward method.

Pour aller plus loin