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

Le site e-commerce You-Print, spécialisé dans la fourniture de cartouches et de toners pour imprimantes, a opté pour l’hébergement chez 772424.com en 2014. Les raisons derrière ce choix sont à la fois stratégiques et pragmatiques : d’une part, l’expertise inégalée de nos équipes dans le domaine de la technologie PrestaShop, et d’autre part, les services complémentaires visant à optimiser en permanence les performances du site en accord avec les évolutions incessantes du paysage numérique.

Récemment, les équipes de 772424.com sont intervenues pour relever un nouveau défi : améliorer les temps de chargement des pages Web du site You-Print. L’objectif était clair : offrir à chaque visiteur une expérience de navigation et d’achat encore plus fluide, renforçant ainsi la satisfaction des clients.

Dans cet article, nous allons explorer deux des actions clés mises en place pour atteindre cet objectif, tout en quantifiant les bénéfices tangibles qu’elles ont générés.

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

/ Contexte /

Sur le web, la rapidité est impérative. Le temps de chargement d’une page web est un facteur décisif qui influe directement sur l’expérience de l’utilisateur. Les équipes de 772424.com se sont penchées sur cette problématique cruciale, et voici ce qu’il est essentiel de retenir :

• Attentes des Internautes : Une grande majorité des internautes (47 %) s’attend à ce qu’une page web se charge en moins de 2 secondes. Cette première impression est critique pour retenir leur attention.
• Impact sur l’Abandon : Le temps de chargement a un impact direct sur l’abandon des visiteurs. En effet, 40 % des utilisateurs quittent un site si le chargement dépasse les 3 secondes. La patience en ligne est limitée.
• Conversion et Délai d’une Seconde : Il est crucial de noter que même un délai d’une seule seconde dans le temps de chargement peut réduire le taux de conversion de 7 %(1). Une performance optimale est donc cruciale pour maximiser les résultats.

Il est également important de souligner que le temps de chargement des pages est intrinsèquement lié au temps nécessaire pour construire le code HTML qui les compose. Un code court et efficace est la clé pour réduire le temps de chargement global.

Avant l’intervention de l’équipe de 772424.com, le temps d’attente pour la construction de la page d’accueil du site You-Print se situait à 440 millisecondes, tandis que le temps de chargement total atteignait 1,27 secondes. Ces chiffres serviront de point de départ pour évaluer les progrès réalisés après les ajustements effectués par nos experts.

/ 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 /

Suite à l’intervention de l’équipe de 772424.com, des améliorations significatives ont été apportées au temps de chargement de la page d’accueil. Désormais, cette page est servie par le serveur en un temps remarquablement court, seulement 18 millisecondes. Pour mettre ces chiffres en perspective, il est essentiel de se rappeler qu’auparavant, avant la mise en place du système de cache, le temps d’attente était de 440 millisecondes. Cela signifie que le temps d’attente a été réduit de manière spectaculaire, divisé par un impressionnant facteur de 24.

Ces résultats remarquables témoignent de l’efficacité des solutions mises en œuvre par les experts de 772424.com. Une optimisation aussi drastique du temps de chargement de la page d’accueil garantit une expérience utilisateur exceptionnelle en permettant un accès quasi-instantané au contenu du site. Cette amélioration non seulement répond aux attentes des visiteurs, mais elle est également susceptible de contribuer de manière significative à l’efficacité des opérations en ligne de You-Print, en augmentant potentiellement le taux de conversion et en améliorant la satisfaction de la clientèle.

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, l’abondance d’images est une réalité incontournable. Cependant, il est crucial de reconnaître que la quantité d’images présentes peut avoir un impact significatif sur le temps de chargement des pages. Ce délai est d’autant plus préjudiciable lorsque les images sont chargées dès que l’internaute accède au site, même s’il n’a pas encore fait défiler la page pour les visualiser.

Dans cette optique, il est judicieux d’explorer des stratégies pour optimiser la gestion des images. L’une de ces approches consiste à retarder le chargement des images jusqu’à ce qu’elles deviennent nécessaires pour l’utilisateur. Autrement dit, les images ne seront téléchargées que lorsque l’internaute les atteindra en faisant défiler la page.

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 Lazy Loading, ou chargement différé, est une technique qui apporte une amélioration significative à la gestion des images sur les pages web. Cette méthode repose sur une modification du code HTML, qui permet de retarder le chargement des images, tout en affichant instantanément les éléments structuraux et textuels de la page. Voici comment cette technique fonctionne en détail :

1. Changement dans le code HTML : Le code HTML de la page subit des ajustements intelligents. Plutôt que de charger directement les images, celles-ci sont remplacées par un pixel transparent lors du chargement initial de la page. Cela signifie que, dans les premiers instants, seuls les éléments structurels de la page, tels que les titres, les paragraphes et la mise en page, sont visibles pour l’utilisateur.
2. Affichage rapide des éléments : Grâce au Lazy Loading, les éléments structurels et textuels de la page sont rendus disponibles de manière quasi instantanée dès l’arrivée de l’internaute sur la page. Cela crée une expérience utilisateur réactive et agréable, car l’utilisateur peut commencer à parcourir le contenu dès le début.
3. Chargement progressif des images : La magie du Lazy Loading réside dans le fait que les images ne sont chargées qu’après le chargement initial de la page. Un script JavaScript prend le relais et commence à charger les images au fur et à mesure que l’internaute fait défiler la page. Ainsi, seules les images visibles à l’écran sont téléchargées, ce qui économise de la bande passante et optimise la vitesse de navigation.

Cette approche du chargement des images offre de multiples avantages. Elle améliore considérablement la vitesse de chargement de la page, réduit la charge du serveur et économise des ressources, tout en offrant une expérience utilisateur fluide et réactive. Le Lazy Loading est une pratique essentielle pour les sites web modernes soucieux d’offrir des performances optimales et une expérience utilisateur de premier ordre.

/ 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 !

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.

⁽¹⁾ https://neilpatel.com/wp-content/uploads/2011/04/loading-time-sml.jpg