Pack Full performance
La boutique en ligne Cesare Nori se spécialise dans la vente de vêtements en cuir pour hommes et femmes. Les pièces sont fabriquées en France et sont personnalisées selon les préférences des clients, notamment en ce qui concerne la couleur, les boutons, les poches et les fermetures. L'objectif principal est de fournir des articles de qualité tout en offrant un service client exceptionnel.
L'implémentation du Pack Full Performance sur le site cesarenori.fr a apporté des résultats significatifs. Cette étude de cas détaille l'approche analytique utilisée pour identifier les facteurs qui influencent le temps de chargement des pages, ainsi que les actions spécifiques qui ont été mises en place pour améliorer ces temps.
Le Pack Full Performance comprend deux principaux axes :
- L'analyse de la performance pour déterminer quels éléments affectent les temps de chargement, ce qui permet ensuite de mettre en place des actions ciblées.
- La mise en place du cache côté serveur grâce à la technologie Varnish, visant à minimiser au maximum les temps de réponse du serveur.
L'optimisation ainsi mise en œuvre a été spécifiquement adaptée aux besoins de cesarenori.com, ce qui a permis d'obtenir des gains de performance significatifs et d'atteindre une note de performance globale de 74%. De plus, cette optimisation a eu un impact positif sur le référencement du site, renforçant ainsi sa visibilité dans les moteurs de recherche.
Avant
Après
| avant | après | |
| Perf. grade |
55/ 100
|
74/ 100
|
Mise en cache coté serveur : Varnish
La mise en place du cache serveur via la technologie Varnish sur le site PrestaShop de Cesare Nori a été une réponse proactive à un besoin pressant d'amélioration des performances de chargement. Nous avons reconnu l'importance cruciale d'offrir à nos visiteurs une expérience de navigation fluide et rapide, ce qui a motivé notre décision d'exploiter pleinement le potentiel de Varnish.
Varnish, en tant que cache serveur hautement efficace, s'est avéré être la solution idéale pour atteindre nos objectifs de réduction significative du temps de construction des pages. En fait, nos mesures ont montré des améliorations tangibles, avec des valeurs de temps de chargement optimales désormais atteintes. Pour en savoir plus sur la manière dont nous avons implémenté et tiré parti du cache Varnish, nous vous invitons à consulter notre article de blog dédié à ce sujet.
Dans le cadre de notre prestation complète, nous avons pris en charge la configuration du système de cache, ainsi que toutes les adaptations logicielles nécessaires pour garantir une intégration transparente avec notre site PrestaShop. De plus, nous avons déployé avec succès notre module de gestion des caches dans le back office de PrestaShop, ce qui facilite la gestion efficace de ce puissant outil de performance.
Évolution du temps de construction du html ('wait' en ms)
| avant | après | |
| Tps de construction | 207 ms | 30 ms |
Amélioration des Web Vitals
CLS (Cumulative Layout Shift) : Détermine la stabilité visuelle d'une page.
Nos actions spécifiques :
- amélioration CLS mobile et desktop en travaillant les fichiers CSS et JS : réservation d'espace pour images non encore chargées, figeage des positions des blocs etc etc
- pré-chargement des polices de caractères afin de réduire à quasiement zéro leur temps de blocage (temps d'attente navigateur)
LCP (Largest Contentful Paint) : Affichage du plus grand élément de la page.
Nos actions spécifiques :
- ré-génération des miniatures au bon format : cela allège les images et évite des calculs de redimension au navigateur
- reconfiguration du délai d’apparition du bandeau de cookies (il apparaissait trop tôt et était considéré comme le plus grand élément de la page, ce qui faussait le résultat du LCP)
Référenciel :
Pour en savoir plus sur les Cores Web Vitals dont les indicateurs CLS et LCP font partie, nous vous invitons à lire l'article dédié à ce sujet.
| avant | après | |
| CLS | 0,23 | 0 |
| LCP | 1,6 s | 853 ms |
Améliorations diverses
L'analyse initiale a révélé des opportunités complémentaires pour améliorer les performances globales du site e-commerce Cesare Nori :
-
L'optimisation Apache a été désactivée, car les serveurs de Cesare Nori sur 7724 étaient déjà configurés conformément aux recommandations de Google. Cette décision a permis au site de bénéficier d'une configuration optimale par rapport à la configuration native de PrestaShop, en éliminant ainsi les redondances potentielles d'optimisation et en réduisant la charge serveur.
-
La compression des fichiers JavaScript a été activée, réduisant ainsi considérablement le temps de chargement des pages de la boutique PrestaShop de Cesare Nori. Cette mesure a permis de limiter la taille des fichiers JavaScript et de rationaliser leur transfert, aboutissant à des économies substantielles en termes de ressources serveur et à une amélioration notable de l'expérience utilisateur grâce à des chargements plus rapides.
-
Un problème récurrent de double chargement de l'image favicon a été résolu, contribuant ainsi à l'optimisation générale de la vitesse du site Cesare Nori. Cette action a éliminé une source de confusion potentielle et a renforcé la cohérence visuelle pour les visiteurs.
-
En outre, la pré-connexion à tous les noms de domaines externes utilisés a été mise en place, améliorant la performance globale du site en accélérant la connexion à ces ressources externes.
En conclusion, ces mesures complémentaires ont permis d'optimiser encore davantage les performances du site e-commerce Cesare Nori. Elles ont non seulement contribué à réduire le temps de chargement des pages, mais elles ont également amélioré la cohérence visuelle et la connectivité aux ressources externes. En adoptant une approche proactive en matière d'optimisation, Cesare Nori a renforcé l'expérience utilisateur et la compétitivité de cette boutique en ligne.