Comment implémenter le lazy loading sans nuire au SEO ?
La méthode la plus sûre est d'utiliser l'attribut HTML natif `loading="lazy"`. Cela permet aux navigateurs de gérer le chargement différé tout en garantissant que Googlebot puisse voir et indexer les URL des images. Évitez les scripts JavaScript complexes qui masquent le contenu aux robots.
Le lazy loading est une technique de performance qui retarde le chargement des ressources non critiques (images et iframes) jusqu'à ce qu'elles soient nécessaires, généralement au moment où l'utilisateur scrolle vers elles. Cela améliore radicalement la vitesse de chargement initiale. Côté SEO, l'enjeu est de s'assurer que les moteurs de recherche trouvent et indexent ce contenu « paresseux ». Auparavant, les bibliothèques JavaScript cachaient souvent les URL aux bots. Aujourd'hui, la bonne pratique est le « native lazy loading » via l'attribut `loading="lazy"` sur les balises `<img>` et `<iframe>`. C'est supporté par tous les navigateurs modernes et parfaitement SEO-friendly car Googlebot peut lire l'attribut `src`. Si vous devez utiliser une bibliothèque JS pour les vieux navigateurs, assurez-vous qu'elle utilise l'API Intersection Observer et propose une alternative `<noscript>`. Attention : ne chargez jamais en lazy loading les éléments « au-dessus de la ligne de flottaison » (logo, image héro), car cela dégraderait votre score LCP.
Guide étape par étape
Identifier le contenu sous la flottaison
Repérez les images et iframes qui ne sont pas visibles dès l'affichage initial de la page.
Ajouter l'attribut loading
Insérez `loading="lazy"` dans les balises HTML des images et iframes identifiées.
Exclure les médias principaux
Assurez-vous que votre image héro et le contenu du haut de page NE sont PAS chargés en lazy loading.
Définir les dimensions
Indiquez toujours les attributs width et height pour éviter les sauts de mise en page (Layout Shift) lors du chargement.
Tester l'indexation
Utilisez l'outil d'inspection d'URL de la GSC pour vérifier que Google « voit » bien vos images.
Conseils de pro
- Combinez le lazy loading avec l'attribut `decoding="async"` pour encore plus de fluidité.
- Utilisez des placeholders de basse qualité (LQIP) pour améliorer l'expérience utilisateur pendant le chargement.
- Testez spécifiquement sur mobile, où la ligne de flottaison est beaucoup plus haute que sur desktop.
- Vérifiez que le lazy loading ne perturbe pas vos feuilles de style dédiées à l'impression.
Comment pSeoMatic vous aide
L'audit de pSeoMatic vérifie la bonne implémentation du lazy loading sur l'ensemble de votre site. Nous détectons les images critiques (LCP) indûment retardées et identifions les médias lourds oubliés sous la ligne de flottaison, garantissant un site à la fois rapide et totalement indexable.
Essayer pSeoMatic gratuitementQuestions connexes
Google peut-il indexer les images en lazy loading ?
Oui, Googlebot indexe parfaitement les images utilisant l'attribut natif ou des méthodes JS compatibles SEO.
Le lazy loading aide-t-il vraiment le score PageSpeed ?
Énormément. Il réduit le poids initial de la page et améliore le Time to Interactive (TTI).
Faut-il charger mon logo en lazy loading ?
Non, le logo est généralement visible immédiatement et doit être chargé sans délai.
Guides associés
Prêt à passer à l'action ?
pSeoMatic génère des milliers de pages optimisées pour le SEO à partir de vos données.