Lazy Loading : votre boutique PrestaShop plus rapide pour une expérience utilisateur améliorée

Sur un site e-commerce, les images sont nombreuses. Et plus elles sont nombreuses, plus elles impactent le temps de chargement des pages – d’un point de vue technique – et leur temps d’affichage – en termes de perception utilisateur. Or, les vitesses de chargement et d’affichage des pages Web sont deux des nombreux critères pris en compte par Google dans son algorithme de classement. 

Le lazy loading permet d’optimiser l’affichage de vos images et, en conséquence, d’accélérer les performances de vos pages. De quoi répondre aux recommandations SEO de Google. Et, en même temps, d’améliorer l’expérience utilisateur sur votre site.

On fait le point sur la méthode du lazy loading d’images pour votre site PrestaShop.

Comment fonctionne le lazy loading ?

Lazy loading se traduit littéralement par “chargement paresseux” en français. 

Cette technique, recommandée par Google, permet de différer le chargement des images de vos pages. Concrètement, une fois le lazy loading mis en place sur une page, voici ce qu’il se passe :

‣ Étape n° 1 : Chargement des éléments structurels et textuels, essentiels au bon déroulé de la visite pour les internautes. L’objectif : un affichage quasi instantané de ces éléments.

‣ Étape n° 2 : Téléchargement des images juste avant que le navigateur ait besoin de les afficher. Les images situées en dessous de la ligne de flottaison se téléchargent alors progressivement lorsque le visiteur commence à scroller sur la page (d’où le nom de “chargement paresseux”). S’il décide de visiter une autre page, les images “non nécessaires” n’auront pas été chargées. Le navigateur aura alors économisé des ressources et de la bande passante.

Résultat : vos visiteurs profitent d’une vitesse de chargement et d’affichage de la page plus rapide !

Côté bénéfices : 
– votre hébergement est moins sollicité,
– l’expérience de navigation pour vos visiteurs est améliorée,
– le référencement de vos pages, aussi.

Dans quels cas utiliser le lazy loading sur votre site PrestaShop ?

Le lazy loading est particulièrement pertinent pour accélérer le chargement de la page d’accueil d’une boutique e-commerce ainsi que des pages “Catégories” lorsque celles-ci listent plus d’une dizaine de produits ou services. Un grand nombre de fiches produits implique tout autant d’images. Leur chargement en instantané risquerait d’allonger dangereusement le temps de chargement de la page.

Même constat pour les pages de résultats qui s’affichent suite à une recherche de produits sur votre site. 

Pensez aussi au lazy loading sur les carrousels, ainsi que sur les images contenues dans les onglets lorsque ceux-ci sont paramétrés pour s’afficher uniquement au clic.

Attention – À l’inverse, le lazy loading ne doit pas être appliqué au plus grand visuel de votre page. Celui-ci est bien souvent situé au-dessus de la ligne de flottaison. Et il permet à l’internaute de confirmer que la page qu’il visite répond bien à sa recherche. L’utilisation du chargement différé dans ce cas-là impacterait négativement la performance perçue de votre page et aussi votre score LCP (l’un des Core Web Vitals pris en compte par Google).

Exemple d’optimisation du temps de chargement avec le lazy loading

Nos équipes PrestaShop ont mis en place le lazy loading sur la boutique en ligne You-Print, spécialisée dans la fourniture de cartouches et toners pour imprimantes.

Avant l’intervention, le chargement de la page d’accueil nécessitait l’envoi de 84 requêtes pour afficher les images, pour un temps de chargement global de 0.78 secondes. 

Après la mise en place du lazy loading, le nombre de requêtes au chargement de la page est passé à 33, soit une économie de 51 transferts de fichiers. Le temps de chargement de la page est passé quant à lui de à 0.67 secondes !

Cette réduction de 0.1 seconde pourrait sembler anodine du point de vue de l’expérience utilisateur. Elle a cependant un impact direct. Et cette UX améliorée se répercute ensuite sur le taux de conversion. Selon une enquête Deloitte pour Google, un gain de 0.1 seconde sur le temps de chargement améliore en effet de 8 % le taux de conversion d’un site e-commerce.

Comment mettre en place le lazy loading sur son site PrestaShop ?

Il existe plusieurs méthodes de mise en oeuvre du lazy loading sur un site Web :

– Intégrer un script JavaScript spécifique.

– Utiliser le lazy loading natif, qui consiste à insérer un attribut loading dans vos balises images. Cette méthode est disponible pour les navigateurs Chrome, Firefox, Edge et Opera (si vos visiteurs utilisent un autre navigateur, le lazy loading ne fonctionnera pas).

– Opter pour un module dédié compatible avec votre CMS. 

Les équipes de l’agence Profileo ont développé un module Lazy Loading spécialement conçu pour les sites PrestaShop. 
Ce module lit le code HTML de vos pages et le modifie afin que les images ne soient pas chargées dès le début, mais soient remplacées par un pixel transparent. Après le chargement de la page, un javascript va charger les images à proprement parler. Lors de la mise en place de ce module, nos équipes prennent également en charge la réalisation des tests et vérifications d’implémentation et d’affichage pour s’assurer de son bon fonctionnement.
En savoir plus

En conclusion, le lazy loading est une excellente méthode pour réduire le temps de chargement et d’affichage de vos pages, et ainsi améliorer l’expérience utilisateurs sur votre site. Mais il s’agit d’une technique parmi d’autres : combinez-la à d’autres actions d’optimisation des webperfs de votre site e-commerce. Contactez nos équipes PrestaShop pour en discuter !