Vérifier la bonne mise en place du lazy loading image

Ecrit par
le

Le lazy loading est une technique utilisée pour afficher une image uniquement lorsqu’elle est visible par l’internaute.
Exemple : une image située en bas de page ne sera chargée que si l’internaute scroll jusqu’à atteindre le bas de la page.
Quel avantage ? !
Mais alors, comment s’assurer que son intégration n’altère pas le crawl et l’indexation des images ?

Check list de vérification

Il convient de s’assurer que toutes vos images sont bien présentes dans le code de votre page mobile. Pour cela, vous pouvez vous aider de l’outil de test d’optimisation mobile de Google. Si le nombre de balises HTML <img est identique entre votre code source et la version mobile, bingo !
Si au contraire, un écart est observé, ajoutez la balise <noscript> à toutes vos images soumises au lazy loading. Cette balise permettra l’affichage des images même si le JavaScript est désactivé.
Effectuez de nouveau le test et vérifiez que toutes vos images apparaissent bien dans le code source.
Si tel est le cas, toutes vos images seront bien crawlable et ind exable, sans impact sur l’expérience utilisateur ou votre SEO !