Lazyload image : Bon pour le SEO ?

0

MMDev l’explique super bien : « Le principe du LazyLoad est de charger les images au fur et à mesure de la navigation au sein d’une page web. »

Cette méthode m’intéresse car elle peut permettre d’optimiser l’expérience utilisateur sur des pages longues ou lourdes (voir les deux !). Cela m’intéresse d’autant plus que Google conseille vivement aux webmasters (que je ne suis pas …) d’optimiser le temps de chargement des pages.

Voilà d’ailleurs ce que Google dit exactement : « Batching requests, lazy loading and preloading can all be employed to help reduce the number of open connections and roundtrips that your gadget requires »

Oui mais voilà, comment faire bien ?

J’ai lu pas mal d’articles pour essayer de comprendre comment le Lazy Load se traduisait d’un point de vue technique et comprendre ainsi les différentes implications de cette technique.

Méthodes d’Implémentations

Lazy Load est un pluggin jQuery développé en Javascript. A l’inverse du preload d’image, le lazy load charge les images à l’action du scroll de l’internaute.

<script src= »jquery.js » type= »text/javascript »></script>

<script src= »jquery.lazyload.js » type= »text/javascript »></script>

Dans certains cas, le Lazy Load permet aussi de réduire le temps de réponse des serveurs.

Comment cela s’utilise t-il ?

Pour implémenter le Lazy Load, il est nécessaire de modifier le code HTML.

En fait, il faut considérer l’appel des images en 2 temps :

  1. L’image non appelé dans un premier temps est prévu – pour cela il faut placer l’url de cette image « lazy » dans un attribut « src » (souvent les sites de demo appellent une image de 1 pixel en .gif)
  2. L’url de la vraie image est répertoriée dans un attribut « data-original »

L’idéal est carrément d’attribuer une class spécifique au LazyLoad, cela permet un meilleur controle des images.

A noter : il faut définir une hauteur et une largeur pour chaque image dans les CSS ou comme attribut. Cela évite certains dysfonctionnements sur certains layouts.

Exemple :

<img src= »img/small.gif » data-original= »img/example.jpg » width= »640″ height= »480″>

et ensuite dans la code faire:

$(« img.lazy »).lazyload();

Dans cec cas, toutes les images de la class « Lazy seront chargées en

Différentes versions de Lazy Load

Voici plusieurs méthodes Lazyload pour les images (source: Mika Tuupola):

$(« img.lazy »).lazyload();
<img data-original= »img/example.jpg » width= »765″ height= »574″>
$(« img.lazy »).lazyload({
effect : « fadeIn »<img data-original= »img/example.jpg » width= »765″ height= »574″>
  • avec l’insertion de la balise <noscript> pour permettre aux browsers qui n’active pas le JS d’avoir accès au contenu (exemple : Google !). Ceci implique de cacher le lazy load dans les CSS et de fournir l’url de l’image dans la balise noscript.
.lazy {

display: none;

}

$(« img.lazy »).show().lazyload({

effect : « fadeIn »

});

<img class= »lazy » src= »img/grey.gif » data-original= »img/example.jpg » width= »765″ height= »574″>

<noscript><img src= »img/example.jpg » width= »765″ height= »574″></noscript>

  • horizontal scrolling,
$(« img.lazy »).lazyload({

effect: « fadeIn »

});

<img data-original= »img/example.jpg » width= »765″ height= »574″>
  • horizontal scrolling inside container,
$(« img.lazy »).lazyload({

container: $(« #container »)

});

  • vertical scrolling inside container,
$(« img.lazy »).lazyload({

effect : « fadeIn »,

container: $(« #container »)

});

#container {

height: 600px;

overflow: scroll;

}

<img data-original= »img/example.jpg » width= »765″ height= »574″>
  • page with gazillion images
<script src= »jquery.scrollstop.js » type= »text/javascript »></script>
<img data-original= »img/example.jpg » width= »80″ height= »120″ alt= » »>
$(« img.lazy »).lazyload({

event: « scrollstop »

});

  •  load images using timeout
$(function() {

$(« img.lazy »).lazyload({

event : « sporty »

});

});

$(window).bind(« load », function() {

var timeout = setTimeout(function() { $(« img.lazy »).trigger(« sporty ») }, 5000);

});

<img src= »img/grey.gif » data-original= »img/example.jpg » width= »765″ height= »574″>
  • load images using AJAX
$(« #container »).one(« click », function() {

$(« #container »).load(« images.html », function(response, status, xhr) {

$(« img.lazy »).lazyload();

});

});

<img data-original= »img/example.jpg » width= »765″ height= »574″>

Les nouveautés du Lazy Load

  • Lazy Load s’applique aussi au Image de Background dans les CSS (Source: appelsiini.net)

Attention le Lazy Load : c’est seulement pour les images !

Pour charger le bas de la page en fonction du scroll alors considéré plutot de l’infinite Scroll (http://www.infinite-scroll.com/)

Share.

About Author

Je ne suis pas tombée dans la marmite du SEO lorsque j'étais petite ! Par contre, j'y suis aujourd'hui (dans la marmite) et j'y suis bien :) Je glane les infos à droite et à gauche, je travaille sur certains sujets et je compte bien tout partager avec vous. Ma seule problématique : le temps n'est pas élastique et cela prend du temps de partager mes données !

Leave A Reply

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.