Accélérez le chargement de votre site grâce au lazy-loading

Le 03/12/2013

Connaissez-vous le lazy-loading ? Si ce n’est pas le cas, découvrez cette technique permettant d’accélérer votre site tout en économisant des ressources serveurs, avec en bonus 5 ressources pour bien démarrer.

Le Lazy-loading, qu’est-ce que c’est ?

Le Lazy-loading (chargement paresseux, en français) est une pratique que vous avez certainement tous déjà vue en application sans l’avoir reconnu, qui consiste à attendre une action du visiteur pour charger certaines portions de la page.

Cela peut être n’afficher les images que lorsqu’elles sont visibles, mais aussi de charger les boutons de partage sociaux qu’après avoir survolé une certaine zone, ou cliqué sur des boutons placeholders.

Intérêt du lazy-loading

Cette pratique à deux intérêts principaux.

Premièrement, la page chargera beaucoup plus vite. Prenons comme exemple Wallhalla. Les pages sont en quasi-totalité constituée d’images, qui est un média assez lourd. Sans le lazy-loading, les images seraient apparues ensemble, dans un ordre assez aléatoire, et auraient bloqué la consultation de la page une grosse demi-seconde de plus.

Attention à bien différencier l’effet « wall d’images infini » du lazy-loading. Le lazy-loading est cet effet d’apparition en entrant dans le champ de vision qu’ont les images uniquement.

Cette technique peut aussi permettre d’économiser en ressources serveur, en limitant les accès à la base de données, par exemple. Si nous allons sur une page article de Clubic par exemple, nous pouvons voir que les commentaires apparaissent grâce au lazy-loading. De cette façon, la base de données n’est interrogée pour afficher les commentaires uniquement si le lecteur finit l’article, économisant un chargement coûteux en ressources en cas de rebond.

Problématiques liées au référencement

Le problème principal du lazy-loading est le référencement. En effet, les moteurs de recherches n’exécutent pas le Javascript des pages, et ne peuvent donc pas référencer les commentaires de clubic (pour continuer sur notre exemple) car ils sont « invisibles » pour eux.

Une solution à ce problème peut être de créer une page sans lazy-loading spécialement pour les robots, et de l’afficher uniquement lors de leurs visites, en les ciblant grace à leur user-agent.

Pour le lazy-loading au niveau des images, le problème est que les adresses des images ne sont pas en « src » mais dans des attributs data, et n’indexera donc pas les images.

Une bonne solution à ce problème est d’afficher une version standard des images entre des balises « <noscript> », ce qui permettra à google de le voir.