Amahousse temps de construction

Amahousse propose une large gamme de produits de protection pour téléphones, y compris des étuis ceintures, des coques de protection et des housses. Leur boutique en ligne offre des solutions élégantes et fonctionnelles pour protéger les téléphones des chocs, des rayures et des chutes tout en ajoutant une touche de style. Les clients peuvent choisir parmi diverses options de protection pour répondre à leurs besoins spécifiques.

Pour optimiser considérablement les performances du site web d'Amahousse, notre équipe s'est attaquée à un défi essentiel : réduire les temps de chargement des pages, qui présentaient des délais particulièrement longs.

Le temps nécessaire pour charger les fiches produit atteignait un préoccupant 3,1 secondes, ce qui dépassait nettement les recommandations de Google. L'objectif était d'atteindre un affichage en moins de 2,5 secondes, pour une expérience utilisateur optimale.

Nous avons entrepris une analyse approfondie à l'aide de l'outil Xdebug, effectuant des benchmarks pour identifier les domaines du site nécessitant des améliorations significatives. Au cours de ces tests, nous avons identifié un goulot d'étranglement majeur : le module de menu.

Plus précisément, le module de menu contenait des codes excessivement lourds, qui affectaient près de 70% du temps de chargement total de la page. Cette découverte a été cruciale pour orienter nos efforts vers l'optimisation de cette section du site, ce qui a grandement contribué à améliorer les performances globales de la boutique en ligne d'Amahousse.

capture : extrait XDebug

Afin de résoudre cette problématique et d'améliorer significativement les performances de la construction de nos pages, nous avons initié une stratégie de gestion de cache très efficace. Cette approche proactive vise à éliminer la nécessité de reconstruire intégralement le menu à chaque interaction, ce qui était la source d'un ralentissement perceptible dans le chargement de nos pages.

Le cœur de cette solution repose sur un cache intelligent qui joue un rôle crucial en identifiant précisément la catégorie actuellement sélectionnée pour être affichée en tant qu'élément "sélectionné" dans le menu. Cela signifie que l'utilisateur voit instantanément la catégorie pertinente déjà mise en avant, sans attendre une reconstruction laborieuse à chaque visite.

L'impact de cette innovation a été immédiatement perceptible, avec une réduction significative du temps nécessaire à la construction de nos pages. Concrètement, ce processus a été optimisé de manière à ne prendre que quelques fractions de seconde, le ramenant à moins d'une seconde au total. Cette transformation rapide se traduit par une expérience utilisateur considérablement améliorée, avec des pages qui se chargent rapidement et sans heurt, contribuant ainsi à la satisfaction générale de nos utilisateurs.

En poursuivant nos analyses, nous avons mis en place des caches successifs et pilotés par des clés de cache pertinentes* pour gérer les traitements lourds, des caches ont ainsi été posés sur :

• 3 modules
• 1 fonctionnalité native PrestaShop (récupération des accessoires d'un produit)
• 1 développement qui récupérait les derniers posts du blog, cette récupération se faisait par une requête web (ce qui est à éviter car si le service requeté ne répond pas, cela ralentit d'autant le temps de construction de la page)

*Les clés de cache représentent des mécanismes ingénieux qui servent à créer des identifiants uniques, jouant un rôle essentiel dans la gestion de notre système de stockage et de récupération des données en cache. Leur fonction principale est de garantir que les différentes variations des contenus affichés sont correctement distinguées et manipulées de manière efficace.

Pour mieux comprendre leur importance, prenons l'exemple d'un de nos caches spécifiques, appliqué à un module particulier. Ce cache utilise des clés de cache judicieusement conçues pour discerner des paramètres cruciaux tels que la devise et la langue. En conséquence, il est en mesure de présenter de manière précise le contenu approprié, même lorsque le mécanisme de mise en cache est actif.

Les clés de cache agissent comme des étiquettes intelligentes qui permettent de catégoriser et d'organiser les données en cache de manière à ce qu'elles soient rapidement accessibles et correctement associées aux contextes spécifiques. Cela signifie que, malgré la complexité des opérations de mise en cache, notre système est en mesure de fournir aux utilisateurs le contenu exact et actuel qu'ils recherchent, tout en garantissant une efficacité optimale dans le traitement des données. En somme, les clés de cache constituent une composante fondamentale de notre architecture, garantissant une expérience utilisateur fluide et cohérente, même lorsque le contenu est stocké en cache.

Grâce aux efforts entrepris, des résultats substantiels ont été accomplis. En fin de compte, le temps d'attente nécessaire à la construction des pages, tel que mesuré par l'indicateur "waiting" sur GtMetrix, s'est transformé de manière remarquable. Il est passé de 3,1 secondes à une impressionnante réduction de 95 %, se limitant désormais à seulement 134 millisecondes.

Ces avancées ont engendré une optimisation considérable des performances de la boutique en ligne Amahousse. Cela s'est traduit par une amélioration substantielle de l'expérience de navigation pour les utilisateurs. Ces ajustements techniques ne se résument pas simplement à des chiffres ; ils incarnent l'engagement continu de la boutique en ligne envers la satisfaction des clients et la qualité de son service en ligne.