Étude de cas : Optimisation des temps de chargement sur un site PrestaShop

Publié le , par 772424.com
étude de cas chargement

Le site e-commerce You-Print est spécialisé dans la fourniture de cartouches et toners pour imprimantes. Le gérant de ce site a opté pour un hébergement chez 772424.com en 2014. Les raisons de son choix : l’expertise des équipes sur la technologie PrestaShop, et les services associés visant à optimiser les performances de son site e-commerce en fonction des (inévitables) évolutions du Web.

Les équipes 772424.com sont récemment intervenues afin d’améliorer les temps de chargement des pages Web du site. L’enjeu : proposer une expérience de navigation et d’achat encore plus fluide aux visiteurs.

On fait le point sur 2 des actions clés mises en place, et leurs bénéfices, chiffrés.

Action n°1 > Réduire le temps de construction des pages

/ Contexte /

Sur le Web, chaque seconde compte. Plus le temps de chargement d’une page est long, plus le taux de rebond risque d’augmenter. On retiendra notamment que :

  • 47 % des internautes s’attendent à ce qu’une page Web soit chargée en moins de 2 secondes,
  • 40 % des personnes quittent un site si celui-ci prend plus de 3 secondes à charger,
  • 1 délai d’une seconde dans le temps de chargement peut faire baisser le taux de conversion de 7 %(1).

Le temps de chargement des pages est intimement lié à leur temps de construction html. Plus ce dernier est court, plus le temps de chargement global est réduit.

Avant intervention des équipes 772424.com, le temps d’attente pour la construction de la page d’accueil du site You-Print était de 440 millisecondes, et le temps de chargement de 1.27 secondes.

/ Action mise en place /

772424.com a intégré et paramétré des systèmes de mise en cache Varnish optimisés PrestaShop. L’objectif : réduire au maximum le fait d’avoir recours aux constructions des pages clés. À savoir la page d’accueil, ainsi que les pages catégories et produits.

L’intégralité de ces pages ont ainsi été mises en cache, et les éléments dynamiques tels que le panier, paramétrés pour être chargés après l’affichage de la page.

/ Résultat /

Après intervention, la page d’accueil est fournie par le serveur en seulement 18 ms (quand elle était fournie, pour rappel, en 440 ms avant la mise en place du système de cache). Le temps d’attente a ainsi été divisé par 24 !

Optimisation caches serveurs avant

Avant l’optimisation Caches Serveurs

Après l’optimisation Caches Serveurs

Une optimisation maximale qui permet de réduire considérablement le temps de chargement global de la page de 1.27 s à 0.7 s, et d’améliorer dans le même temps la satisfaction des internautes.

En savoir plus sur les optimisations caches PrestaShop-Serveur de 772424.com

Action n°2 : afficher plus rapidement les pages

/ Contexte /

Sur un site e-commerce, les images sont nombreuses. Et plus elles sont nombreuses, plus elles impactent le temps de chargement des pages. Or, il n’est pas forcément utile de les charger dès l’arrivée de l’internaute sur le site, d’autant plus s’il ne scrolle pas sur la page. Il peut alors être intéressant de différer le chargement de ces ressources tant qu’elles ne sont pas nécessaires.

Avant intervention des équipes 772424.com, le chargement de la page d’accueil You-Print nécessitait l’envoi de 84 requêtes pour afficher les images.

/ Action mise en place /

772424.com a procédé à la mise en place d’un module de Lazy Loading sur la boutique – une méthode recommandée par Google pour améliorer la perception des utilisateurs sur le temps de chargement d’une page.

Le système du Lazy Loading modifie le code html des pages pour que les images ne soient pas chargées directement, et soient remplacées par un pixel transparent. Les éléments structurels et textuels de la page sont, eux, affichés de façon quasi instantanée. Et ce n’est qu’après le chargement de la page qu’un javascript chargera les images au fur et à mesure de la navigation de l’internaute.

/ Résultat /

Après la mise en place du Lazy Loading, le nombre de requêtes au chargement de la page d’accueil est passé à 33, soit une économie de 51 transferts de fichiers. Le temps de chargement global de la page passe quant à lui de 1.27 à 0.57 secondes !

Avant la mise en place du Lazy Loading

Avant la mise en place du Lazy Loading

Aprèsla mise en place du Lazy Loading

Après la mise en place du Lazy Loading

En savoir plus sur la mise en place du Lazy Loading sur PrestaShop

Bilan

Suite aux interventions des équipes 772424.com, les pages du site e-commerce You-Print enregistrent une nette amélioration de leurs temps de chargement :

  • Page d’accueil fournie en seulement 18 ms, contre 440 ms avant la mise en place du système de cache,
  • Nombre de requêtes au chargement de la page réduit à 33, contre 84 avant la mise en place du lazy loading.

Le temps de chargement global de la page d’accueil passe ainsi, après la mise en place du système de cache et du module de lazy loading, de 1.27 s à seulement 0.57 s.

Des résultats qui améliorent grandement la perception et la satisfaction des visiteurs du site !

Vous avez des questions relatives aux performances de votre site PrestaShop ou de son hébergement ? Contactez les équipes 772424.com pour en discuter.

(1) https://neilpatel.com/wp-content/uploads/2011/04/loading-time-sml.jpg