• A la une
  • Catégories
  • Dossiers
  • +

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

par Benjamin SANCHEZle 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 Wallbase. 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 couteux 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.

Quelques ressources pour bien commencer avec le lazy-loading

Unveil

Unveil est un plugin vous permettant de mettre en place le lazy-loading pour vos images.

Echo

Echo fonctionne comme Unveil en un peu moins complet. Il est aussi plus récent, il évoluera encore surement.

Lazyload

Lazyload est encore un lazy loading pour vos images, sous la forme de plugin jQuery cette fois.

Socialite

Socialite vous permettra de charger vos boutons sociaux avec le lazy-loading.

LazyYT

LazyYT appliquera cette technique de lazy-loading sur vos vidéos youtube, parfois longues à s'afficher.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir