Pour ceux qui ne connaissent pas le Lazy loading, il s’agit d’une technique consistant à charger un objet sur une page Web, uniquement quand celui-ci est visible par l’internaute, dans sa fenêtre de navigateur.
Par exemple, si vous allez sur la home de Cdiscount relativement chargée en images, il y a de quoi bien scroller avant d’arriver en bas de la page. Pourtant certains utilisateur vont simplement cliquer sur le menu, et charger malgré tout un grand nombre d’images qu’ils ne verront même pas…
Lazyloading et JS
Le lazyloading utilise la technologie Javacript et ne permet pas toujours d’avoir dans son code source une image bien lisible pour Googlebot (ex: img src correspondant à l’image de chargement), avec l’attribut alt qui va bien.
Autre constatation, certains sites utilisent le lazy loading sur leurs fiches Produit, ce qui est moins pertinent: autant sur un listing de 50 produits avec une scrollbar verticale conséquente, le Lazyloading a son intérêt; autant sur une fiche produit, on peut penser que ce que l’internaute verra en priorité est l’image du produit, qui ne nécessitera donc pas de lazyloading. C’est du gâchis, d’autant plus que les fiches produits sont très adaptées au référencement d’images.
L’objet de ce bref article (ce blog ne fait pas dans le blabla, enfin j’essaye, Chut!) est de vous présenter un script que je viens de découvrir qui est parfait pour nous les SEO, afin d’améliorer notre visibilité sur Google Images et dans les onebox Images des pages de résultats Google. Ce script s’appelle Qazy
Script lazyloading SEO friendly
L’avantage de ce script est que l’attribut src des images, contient bien le chemin vers l’image finale affichée à l’utilisateur. Qazy bloque le chargement des images qui ne sont pas dans le viewport, c’est pour cela que le JS doit être chargé au plus tôt dans le code source:
<!doctype html> <html> <head> <title>Qazy</title> <script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder </script> <script src="https://cdn.rawgit.com/qnimate/Qazy/master/qazy.min.js"></script> </head> <body> <img src="lazy-loading.jpg" data-qazy="true"> <br> <img src="offline-web-apps.jpg" data-qazy="true"> <br> <img src="random-color.jpg" data-qazy="true"> <br> <img src="revel-scroll.jpg" data-qazy="true"> <br> <img src="wordpress-fields-metaboxes.jpg" data-qazy="true"> </body> </html>
Avec une démo, ça donne: Demo Qazy. Merci au créateur de ce script.
Mon seul regret par rapport à Qazy est un détail qui n’a pas échappé à l’oeil de lynx de Thomas Soudaz: le fichier .js pèse 120Ko… Mais une fois en cache 😉 D’autres alternatives existent comme Vvo lazyload : https://github.com/vvo/lazyload
Parfait ton article, pour ma part j’avais le lazy load avec le plugin wp rocket sur WordPress mais je cherchais justement une solution à mettre en place sur un cms maison.
Merci Arnaud@ je vais tester le plugin Wp Roket merci à vous deux…
Hello,
Je ne suis pas un gros fan de ce script : on dirait que les images sont chargées quand même quand on fait des tests via webpagetest.
Et dans les outils chrome, j’ai une coupure en cours de route du dl des images plutôt qu’un non chargement dès le départ (sans doute le temps nécessaire au script pour se terminer).
Donc bof 🙂
Le noscript devrait pouvoir faire l’affaire, ou pourquoi pas une belle balise a ?
J’avais fait le test avec Fiddler, et ça marche nickel de mon côté, elles sont bien chargées lors du scroll via JS
Hello, le thème WordPress Sahifa (et certainement d’autres du même éditeur) utilise ce comportement par défaut, je n’ai pas vérifié les perfs par contre. ++
Cool, ça ! Et du coup, tes images s’indexent sans souci malgré le lazy loading ? D’après le code que je vois, j’aurai tendance à dire oui mais une confirmation de ta part serait la bienvenue 🙂
oui, je te confirme!
Merci Aymeric,
Apparemment le script est sur un cdn, cela me fait penser que Ll + Cdn donnent un cocktail explosif..pour des sites chargés comme des mulets en images..cela peut se justifier en effet ..
Sinon, à tester comme dit Guillaume pour d’autres configurations, parfois les effets sont contreproductifs !
Merci encore pour cet article..
deux remarques :
– ne surtout pas utiliser ce script en l’état et remplacer l’image en base 64 par quelquechose de beaucoup beaucoup plus léger type pixel :
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
– toujours hoster son script de lazyloading sur son serveur de préférence sur le www. pour s’éviter une résolution DNS de plus pour un JS bloquant.
gros +1 pour le script de lazyloading de Vincent Voyer.
Bonjour,
Pour notre thème PrestaShop (http://www.prestarocket.com/), nous utilisons imager.js pour le lazyloading et il pèse que 6ko. Pour le référencement des images, nous ajoutons une balise noscript avec l’image.
++
@prestarocket