Comment vérifier que votre lazy loading n'empêche pas Google de voir vos images ?

Pourquoi Google insiste-t-il sur l'attribut 'src' plutôt que sur d'autres méthodes ?

Parce que Googlebot rend le JavaScript, certes, mais avec des contraintes de temps et de ressources. Si votre lazy loading repose sur un script qui attend un scroll ou un événement d'interaction, Google risque de ne jamais déclencher le chargement de l'image.

L'attribut 'src' dans le HTML rendu garantit que l'URL de l'image est accessible à Googlebot sans dépendre d'événements utilisateur. C'est la seule façon de s'assurer que Google voit réellement vos visuels — et peut les indexer dans Google Images.

Qu'est-ce que le HTML rendu et en quoi diffère-t-il du code source ?

Le code source, c'est ce que vous voyez en faisant Ctrl+U dans votre navigateur. Le HTML rendu, c'est ce que devient ce code après exécution du JavaScript.

Search Console vous montre justement ce HTML rendu tel que Googlebot le voit. Si vos balises <img> contiennent encore des attributs data-src sans que le src ne soit rempli, c'est que le lazy loading n'a pas fonctionné pour Google.

Quels sont les risques concrets d'un lazy loading mal configuré ?

Premier risque : vos images ne sont pas indexées dans Google Images, ce qui vous prive d'un canal de trafic souvent sous-estimé. Certains sites e-commerce génèrent 10 à 15 % de leur trafic organique via Google Images.

Deuxième risque : si vos images jouent un rôle dans la compréhension du contenu — typiquement des infographies, des schémas, des captures d'écran explicatives — Google peut ne pas comprendre complètement votre page. Résultat : un positionnement moins bon sur des requêtes où le contenu visuel compte.

• L'outil d'inspection d'URL de Search Console est votre meilleur allié pour diagnostiquer ces problèmes
• Vérifiez que toutes les URLs d'images apparaissent dans l'attribut 'src', pas dans data-src, data-lazy ou autre
• Le lazy loading natif (loading="lazy") est supporté par Google et ne pose aucun problème d'indexation
• Les solutions JavaScript tierces doivent être testées systématiquement car elles peuvent introduire des délais ou des conditions que Googlebot ne remplit pas

Cette recommandation est-elle vraiment nouvelle ou juste un rappel ?

C'est surtout un rappel salutaire. Martin Splitt évoque ce sujet depuis au moins 2019, mais force est de constater que beaucoup de sites continuent à mal implémenter le lazy loading.

Ce qui change, c'est que Search Console affiche désormais le HTML rendu de manière plus claire. Google facilite le diagnostic — mais le problème reste récurrent, surtout sur les sites qui empilent les plugins WordPress ou qui utilisent des frameworks front-end sans vraiment comprendre ce qui se passe sous le capot.

Tous les lazy loadings se valent-ils côté SEO ?

Absolument pas. Le lazy loading natif — <img src="image.jpg" loading="lazy"> — fonctionne parfaitement avec Googlebot. Il charge l'image dès le rendu, mais le navigateur retarde le téléchargement jusqu'à ce qu'elle soit proche du viewport. Pour Google, l'URL est immédiatement visible dans le src.

Les solutions JavaScript, en revanche, peuvent poser problème. Beaucoup attendent un scroll ou un IntersectionObserver pour remplacer data-src par src. Si Googlebot ne déclenche pas cet événement — ou s'il ne laisse pas assez de temps au script pour s'exécuter — l'image reste invisible.

Faut-il abandonner les solutions JavaScript au profit du lazy loading natif ?

Pas nécessairement, mais privilégiez le natif quand c'est possible. Il est supporté par tous les navigateurs modernes depuis 2020, et ne pose aucun risque SEO.

Si vous devez utiliser une solution JavaScript — pour gérer des cas particuliers, du responsive avancé, ou parce que votre framework l'impose — testez systématiquement avec Search Console. Et si possible, implémentez une logique de fallback qui place au minimum une URL de placeholder dans le src, même basse résolution, pour garantir que Google voit quelque chose.

Comment auditer le lazy loading de votre site dans Search Console ?

Ouvrez l'outil d'inspection d'URL, collez une URL avec des images lazy loadées, lancez un test en direct. Une fois le rendu terminé, cliquez sur "Afficher la page explorée" puis "HTML".

Faites Ctrl+F et recherchez vos balises <img. Regardez si l'attribut src contient bien l'URL finale de l'image, pas un placeholder, pas un gif transparent, pas rien du tout. Si vous voyez encore data-src ou data-lazy sans que src ne soit rempli, c'est raté.

Quelles erreurs éviter lors de l'implémentation du lazy loading ?

Première erreur classique : laisser le src vide ou avec un placeholder 1×1 transparent. Certains plugins font ça pour éviter un double chargement, mais Google ne verra jamais l'image réelle si le JavaScript ne s'exécute pas correctement.

Deuxième erreur : lazy loader tout, y compris les images au-dessus de la ligne de flottaison. Google recommande explicitement de ne pas lazy loader les images visibles immédiatement — c'est aussi une mauvaise pratique pour les Core Web Vitals (LCP). Réservez le lazy loading aux images en bas de page.

Troisième erreur : ne pas tester après chaque mise à jour de plugin ou de thème. Un changement anodin peut casser votre implémentation et faire disparaître vos images de l'index Google pendant des semaines sans que vous vous en rendiez compte.

Que faire si vos images n'apparaissent pas dans le HTML rendu ?

Si le problème vient d'un plugin WordPress, commencez par vérifier s'il existe une option pour désactiver le lazy loading ou passer en mode natif. Beaucoup de plugins récents proposent désormais ce choix.

Si vous êtes sur un framework JavaScript (React, Vue, Next.js), assurez-vous que le rendu côté serveur (SSR) ou la génération statique (SSG) inclut bien les balises <img> avec des src complets. Le lazy loading peut être appliqué ensuite, mais la structure HTML de base doit être propre dès le premier rendu.

• Testez au moins 5 à 10 URLs représentatives de votre site dans l'outil d'inspection d'URL de Search Console
• Vérifiez que toutes les images critiques (produits, infographies, schémas) ont bien leur URL dans l'attribut src du HTML rendu
• Privilégiez le lazy loading natif (loading="lazy") pour les images non critiques
• Ne lazy loadez jamais les images visibles au-dessus de la ligne de flottaison (Above The Fold)
• Mettez en place une surveillance régulière après chaque mise à jour technique ou changement de plugin
• Testez également vos images dans Google Images en recherchant site:votredomaine.com pour vérifier qu'elles sont bien indexées