Mis à jour le 12 juillet 2026 · Relu et vérifié par Damien Hernandez

Lazy loading : definition, role et bonnes pratiques SEO

Comment fonctionne le lazy loading ?

Le lazy loading repose sur l’attribut HTML loading= »lazy », ajoute aux balises image et iframe. Le navigateur lit cet attribut, puis differe le telechargement jusqu’a l’approche du viewport. Chrome, Firefox et Safari declenchent le chargement quelques centaines de pixels avant l’entree a l’ecran. Avant cette API native, le report passait par des librairies JavaScript comme lazysizes ou l’API Intersection Observer. Selon Google (web.dev), l’attribut natif supprime le besoin d’une librairie externe dans la majorite des cas. La valeur par defaut d’une balise image reste loading= »eager », qui telecharge le visuel des sa decouverte dans le HTML.

Pourquoi le lazy loading est important pour le SEO ?

Le lazy loading influence le SEO via les Core Web Vitals, en priorite le LCP et l’INP. Bien applique, le lazy loading reduit la bande passante mobilisee au chargement initial et libere des ressources pour l’image principale. Selon Google (web.dev), les pages avec lazy loading affichent pourtant un LCP median de 3 546 ms au 75e percentile. Les pages sans report tombent a 2 922 ms sur le meme echantillon. L’ecart provient des implementations qui different des images visibles d’entree. Le risque SEO majeur reste l’indexation : Googlebot ne voit une image que si son URL figure dans l’attribut src du HTML rendu.

Critere	Lazy loading natif	Librairie JavaScript
Dependance JavaScript	Aucune	Script requis
Lecture par Googlebot	URL dans l’attribut src	Risque data-src non lu
Controle avance (seuils, transitions)	Limite	Fin
Poids ajoute a la page	Zero	JavaScript supplementaire

Vos images critiques sont-elles en lazy loading ? Demandez un audit technique

Le lazy loading est-il bon pour le SEO ?

Le lazy loading est bon pour le SEO quand il ne concerne que les images sous la ligne de flottaison. Applique au-dessous du pli, le lazy loading allege la page et economise de la bande passante mobile. Applique a l’image LCP, il retarde l’affichage principal et penalise les Core Web Vitals. Google recommande le chargement immediat (loading= »eager ») pour les visuels visibles des l’ouverture.

Comment activer le lazy loading sur WordPress ?

WordPress ajoute l’attribut loading= »lazy » automatiquement aux images de l’editeur de blocs depuis la version 5.5. Aucune action manuelle n’active le lazy loading natif sur un contenu standard. Pour exclure une image critique, un theme ou un filtre wp_img_tag_add_loading_attr retire l’attribut sur le visuel choisi. Selon Google (web.dev), WordPress epargne le report sur la premiere image du contenu principal pour proteger le LCP.

Exemple concret de lazy loading

Un exemple concret oppose une image hero mal configuree a sa version corrigee. La premiere porte loading= »lazy » alors qu’elle est visible d’entree, ce qui retarde le LCP. La version corrigee retire l’attribut et ajoute fetchpriority= »high », ce qui priorise le telechargement. Une image placee sous le pli garde loading= »lazy » de facon legitime.

<img src="/img/hero.webp" fetchpriority="high" width="1200" height="600" alt="Visuel principal">

<img src="/img/section-8.webp" loading="lazy" width="800" height="600" alt="Illustration bas de page">

Erreur fréquente observée en audit

Sources

• Google, web.dev, The performance effects of too much lazy loading · 2022
• Google, web.dev, Browser-level image lazy loading · 2024
• MDN Web Docs, Le chargement differe · 2026

Termes lies