Accélérez votre site internet grâce au lazy-loading

Connaissez-vous la technique de lazy-loading ?

Pour les novices en la matière, la technologie lazy-loading permet d’accélérer votre site internet tout en économisant des ressources serveurs. Un gain de temps du chargement de votre site internet est alors remarqué. A l’heure où Google tient compte de la rapidité d’un site internet pour le référencement et le positionner en fonction dans ses résultats de recherche (d’autres critères sont bien entendu à prendre en compte), il est donc primordial d’utiliser des techniques pour améliorer la rapidité de chargement de votre site internet.

• Lazy-loading en quelques mots

Le lazy-loading (traduction française : chargement paresseux) est une pratique assez répandue, notamment pour les « gros » médias. D’ailleurs, vous avez très probablement utilisé ce système sur des sites web sans le savoir.

En quelques mots, le lazy-loading consiste à attendre une action du visiteur pour charger certaines portions de la page.

Cette technique peut par exemple permettre d’afficher des images que lorsqu’elles sont visibles par l’internaute. On pense notamment aux longues home page (page d’accueil) de certains sites web avec de nombreuses illustrations. Cela confère ainsi une économie de bande passante à votre serveur.

• Quel est l’intérêt du lazy-loading

Tout d’abord, la page web chargera beaucoup plus vite car seuls les éléments visibles pour l’internaute seront chargés. En effet, l’exécution du Javascript lazy-loading permet un chargement intelligent des éléments.

Sans le lazy-loading, les éléments seraient apparues ensemble, dans un ordre assez aléatoire, et auraient bloqué la consultation de la page web jusqu’au chargement de tous les éléments.

Ensuite, cette technique permet d’économiser en ressources serveur, en limitant les accès à la base de données.

• Exemple de site internet utilisant lazy-loading

Nous avons installé récemment la technologie lazy-loading sur le site internet du média NBA Inside Basket. Vous pouvez d’ailleurs tester l’affichage sur la page d’accueil de ce site et vous rendre compte du chargement des images.

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

Avant OUI.

Maintenant NON.

Depuis le mois de Décembre 2015, le moteur de recherche Google indexe les images utilisant cette technique. Un bonheur !

Il n’y a donc plus de frein à utiliser lazy-loading.

• Outils

Voici plusieurs sites internet spécialisés proposant l’outil lazy-loading. Notre préférence va pour le premier de ces sites avec un Javascript léger (installé sur notre exemple), sans utilisation de la technologie Jquery.

Blazy

Unveil

Lazy Load