# Lazy loading

> Le lazy loading (ou chargement différé) est une technique d'optimisation web qui consiste à reporter le chargement des ressources non critiques d'une page — images, vidéos, iframes — jusqu'au moment où l'internaute en a réellement besoin, généralement lorsqu'elles entrent dans la zone visible de l'écran. Plutôt que de télécharger tous les médias dès l'ouverture, le navigateur ne charge d'abord que le contenu visible au-dessus de la ligne de flottaison, puis charge le reste au fil du défilement. Cette approche réduit le poids initial de la page, accélère le rendu et améliore les Core Web Vitals, notamment le LCP. En SEO, un lazy loading bien implémenté favorise une meilleure expérience utilisateur et un crawl plus efficace par Googlebot, à condition que les ressources critiques ne soient jamais différées et que le contenu différé reste accessible au moteur de rendu.

[source]: https://luwiz.io/glossaire/lazy-loading

---

Le lazy loading est aujourd'hui une pratique standard de l'optimisation de performance web. Il répond à un problème simple : la plupart des pages chargent des dizaines d'images et de médias dont l'internaute ne verra jamais la majorité s'il ne fait pas défiler la page. Charger tout ce poids dès l'ouverture gaspille de la bande passante et retarde l'affichage du contenu réellement utile.

## Comment ça marche

Le navigateur identifie les ressources marquées comme différées et ne déclenche leur téléchargement que lorsqu'elles approchent de la zone visible (le viewport). En HTML moderne, il suffit d'ajouter l'attribut `loading="lazy"` à une balise `<img>` ou `<iframe>`. Le navigateur calcule alors une distance de pré-chargement et récupère l'image juste avant qu'elle n'apparaisse à l'écran, garantissant une transition fluide.

Avant l'arrivée de cet attribut natif, le lazy loading reposait sur du JavaScript et l'API IntersectionObserver. Cette approche reste utile pour des cas avancés (fonds CSS, composants complexes), mais l'attribut natif est désormais la solution recommandée pour sa simplicité et sa compatibilité avec [Googlebot](/glossaire/googlebot).

## Pourquoi c'est important pour le SEO

L'impact direct se mesure sur les [Core Web Vitals](/glossaire/core-web-vitals). En réduisant le nombre de requêtes au chargement initial, le lazy loading améliore le temps de rendu et soulage le [LCP](/glossaire/lcp). Or ces signaux de performance font partie des critères d'expérience de page utilisés par Google.

<Callout label="A retenir">Ne différez jamais l'image principale du hero ni les éléments au-dessus de la ligne de flottaison : ce serait pénaliser le LCP au lieu de l'améliorer.</Callout>

## Les pièges à éviter

Une mauvaise implémentation peut nuire à l'indexation. Si les images sont chargées exclusivement par un JavaScript que Googlebot n'exécute pas, elles risquent de ne jamais être indexées dans Google Images. Il faut donc toujours fournir un attribut `src` valide et tester le rendu. De même, différer trop de contenu textuel ou les éléments visibles d'emblée dégrade l'expérience perçue. Le lazy loading est un outil de précision, à appliquer uniquement aux ressources hors écran.