Lazy loading d’ images et SEO sont sur un bateau

écrit par Aymeric

lazy-loadingPour 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

écrit dans divers par Aymeric | 10 commentaires

10 commentaires "Lazy loading d’ images et SEO sont sur un bateau"

  • Pierre dit:
  • guillaume dit:
  • Guillaume dit:
  • Ramenos dit:
  • tsoudaz dit: