Lazy loading d’ images et SEO sont sur un bateau

15 Juin 2015

écrit par Aymeric
10 commentaires

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 Webperf par Aymeric | 10 commentaires

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

  • Arnaud@www.web-geek.fr dit:
    15 juin 2015 à 16 h 14 min
    Répondre

    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.

  • Pierre dit:
    16 juin 2015 à 8 h 01 min
    Répondre

    Merci Arnaud@ je vais tester le plugin Wp Roket merci à vous deux…

  • guillaume dit:
    16 juin 2015 à 10 h 30 min
    Répondre

    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 ?

  • Guillaume dit:
    17 juin 2015 à 16 h 05 min
    Répondre

    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. ++

  • Ramenos dit:
    17 juin 2015 à 16 h 21 min
    Répondre

    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 🙂

  • maurice largeron dit:
    18 juin 2015 à 7 h 55 min
    Répondre

    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..

  • tsoudaz dit:
    18 juin 2015 à 10 h 42 min
    Répondre

    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.

  • Prestarocket dit:
    20 juin 2015 à 22 h 37 min
    Répondre

    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

Ajoutez un nouveau commentaire