Utiliser le lazy loading pour accélérer le chargement des pages - Wenovio
1-844-WENOVIO

Ma soumission gratuite en un clic!

Vos coordonnées


X

Service Requis

LogoGraphismeApplication webSite webPublicité numériqueApplication mobile__Autre service

Utiliser le lazy loading pour accélérer le chargement des pages

Lecture de 3 minutes

Qu’est-ce que le lazy loading ?

Le lazy loading (chargement différé) est une technique qui permet de différer le chargement des images. En effet quand on ouvre une page d’un site internet, on ne voit que la partie du haut. Cependant tous les éléments qui ne sont pas visibles sont tout de même chargés. Voir l’illustration ci-dessous.

Quand une page a beaucoup d’image, cela prend du temps de toutes les charger. C’est pénalisant pour le confort de l’utilisateur et pour le SEO. En effet les moteurs de recherche pénalisent les pages qui ont un chargement trop long.

Le lazy-loading permet de charger seulement les images qui sont dans la partie visible, puis quand l’utilisateur descend pour voir le reste de la page, les images se chargent au fur et à mesure.

Sur l’animation ci-dessous, on peut voir que les images se chargent pendant que l’on fait défiler la page.

En ai-je besoin sur mon site ?

Si votre site comporte des pages avec beaucoup d’image comme un portfolio ou une galerie, il est conseillé d’utiliser le lazyload. Vous n’êtes pas obligé de le mettre en place sur toutes les pages bien que cela soit assez rapide à installer. En effet, sur WordPress par exemple, il existe beaucoup de plugins qui permettent de le faire automatiquement.

Sur la page Portfolio de Wenovio, cela nous a permis d’accélérer le chargement de la page de 75% environ. Nous utilisons le plugin WP Rocket qui permet aussi d’accélérer le fonctionnement général des sites WordPress. C’est la solution que nous offrons à nos clients.

Prise en charge automatique par les navigateurs Firefox et Chrome

Avec les dernières versions des navigateurs Firefox et Chrome, il n’y a plus besoin de configurer de plugins. En effet, le lazy loading va être pris en charge directement par le navigateur grâce à la nouvelle balise “loading”.

Vous trouverez des exemples d’utilisation sur la page de Addy Osmani (Responsable de l’ingénierie chez Google travaillant sur Chrome).

Laisser un commentaire