Pack Performance axé sur les Signaux Web Essentiels
Voici une étude de cas axée sur les retombées positives engendrées par l'implémentation d'un "Pack Performance" au sein de TOF Paris, une marque française réputée pour ses collections de vêtements sensuels conçus spécialement pour les hommes. Cette marque propose une gamme diversifiée de sous-vêtements, de vêtements de sport et de maillots de bain masculins, confectionnés à partir de matériaux de haute qualité.
La demande de notre client ciblait prioritairement une amélioration des Signaux web Essentiels (Core Web Vitals) en vue d’améliorer le SEO de sa boutique en ligne.
Découvrons comment l'introduction de cette initiative a contribué à dynamiser et à améliorer l'ensemble du site.
Actions spécifiques pour réduire le temps de construction
Dans un premier temps, il est question de réduire le temps de construction, car celui-ci influe sur notamment sur un des indicateurs clés parmi les signaux web essentiels définis par Google : le LCP (Largest Contentful Paint).
En effet, le fait est que plus le temps de construction est court, plus le score LCP est bon.
Suite à une analyse préalable, nous avons pu définir plusieurs points à mettre en œuvre dans le but de réduire le temps de construction, et par extension, le LCP.
1/ La première étape a consisté à effectuer un benchmarking des temps de construction des pages, identifiant trois principaux goulots d'étranglement.
2/ La seconde étape à ensuite été de poser de caches sur les modules suivants :
- stfeaturedslider
- stlovedproduct
- stspecialslider
- productsasvariants
Suite à cette pose de caches, un nouveau benchmarking a été effectué. Il a permis d’identifier d’autres modules nécessitant une pose de caches :
- ganalyticspro
- stthemeeditor
- spmreviewsadv
3/ La dernière étape de ces actions est de reconfigurer les paramètres de caches sur le back-office pour optimiser davantage les performances.
| avant | après | |
| Perf. grade |
67/ 100
|
93/ 100
|
| Tps de construction | 764 ms | 397 ms |
| LCP (Largest Contentful Paint) | 2 s | 954 ms |
| CLS (Cumulative Layout Shift) | 0,56 | 0 |
Relevés des indicateurs GtMetrix des fiches produits :
Avant
Après
Actions spécifiques pour optimiser le LCP
Parmi les Core Web Vitals, il est essentiel de mettre en avant le Largest Contentful Paint (LCP). En relation avec le temps de construction précédemment évoqué, le LCP mesure le temps nécessaire à l'affichage du plus grand élément de la page.
Logiquement, une réduction de ce délai est favorable à une meilleure expérience utilisateur.
Pour être considéré comme satisfaisant, il est souhaitable que ce chiffre se situe en dessous de la barre des 2,5 secondes.
Voici la liste des actions additionnelles au temps de construction menées pour optimiser le LCP sur tof-paris.com :
- Suppression du lazy loading sur l'image la plus grande de la page produit.
Le lazy loading a un grand intérêt de façon générale pour optimiser les temps de chargement de vos pages. (En savoir plus sur le lazy loading ici : https://www.profileo.com/blog/optimiser-site-prestashop-avec-le-lazy-loading/)
Cependant, dans le cas d'images au dessus de la ligne de flottaison, il n’est pas du tout recommandé, dans notre cas, il était même un frein à une bonne optimisation du LCP.
- Régénération des images des pages catégories et des produits pour qu'elles aient la même taille de fichier que celle affichée à l'écran, afin d'éviter les calculs de redimensionnement par le navigateur.
Retrouvez toutes nos recommandations sur les formats de vos images produits idéales dans l’article de blog suivant : https://www.profileo.com/blog/optimisation-prestashop-travailler-ses-images-de-fiche-produit/
- Compression des images du diaporama sans perte de qualité à l'aide de https://tinypng.com/
Actions complémentaires déroulées lors du suivi des courbes de la Search Console.
- Optimisation de l'image la plus grande (LCP) de la page produit en la convertissant en base64.
- Réduction de la taille du bandeau de cookies pour qu'il ne soit plus considéré comme l’élément le plus grand de la page.
- Élimination du lazy loading sur les 4 premières images de la page catégorie et conversion de ces quatre images en base64. Les images suivantes sont quant à elles chargées en mode lazy loading natif.
- Puis pour la page catégorie, 8 images ont été converties en encodage base64, la deuxième ligne étant sur certains écrans au dessus de la ligne de flottaison
La conversion d'une image en base64 implique sa transformation en une chaîne de caractères. Au lieu d'être un fichier distinct, l'image est directement intégrée dans la page sous forme de code, évitant ainsi un téléchargement de fichier par le navigateur. Il convient de noter que cette technique est appropriée principalement pour des images légères, car l'utilisation excessive sur des images plus volumineuses peut entraîner une surcharge de la page.
| avant | après | |
| LCP (Largest Contentful Paint) | 2 s | 954 ms |
Référenciel :
Actions spécifiques pour optimiser le CLS
Le score CLS (Cumulative Layout Shift) évalue la stabilité visuelle d'une page web en tenant compte des perturbations de la mise en page qui peuvent se produire lorsque les utilisateurs naviguent.
Ces perturbations, potentiellement gênantes pour les visiteurs, peuvent résulter du déplacement d'éléments pendant le chargement de la page, de redimensionnements de widgets ou même de l'apparition progressive de blocs. Pour garantir une expérience utilisateur de haute qualité, Google préconise de maintenir un score CLS inférieur à 0,1.
Nous avons orienté nos actions d’optimisation du CLS spécifiquement pour les mobiles sur les pages catégories et les fiches produits (qui posaient souci à google) :
- Basiquement, cela consiste à réserver des espaces et fixer des positions pour les différents composants et blocs des pages du site.
- Lors des itérations de vérification via la Google Search Console dans le cadre de notre suivi, nous avons progressivement pu affiner ces optimisations.
| avant | après | |
| CLS (Cumulative Layout Shift) | 0,56 | 0 |
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.
Impact sur les courbes Google Search Console
Le suivi des courbes via l'outil Google Search Console permet de mettre en évidence les changements résultant des différentes actions entreprises.
La page de synthèse du rapport "Signaux Web Essentiels" dans la Search Console détaille les données en fonction de l'appareil utilisé pour afficher l'URL, que ce soit sur mobile ou sur ordinateur. Les données sont classées en fonction de l'état de l'URL, soit "Médiocre," "Amélioration nécessaire," ou "Bon."
Une URL est considérée comme rapide lorsque tous les indicateurs mesurés (les signaux web essentiels) sont dans la zone "Bon."
Avant nos interventions, le nombre d'URLs rapides était faible, notamment avec un score de zéro URLs rapides pour la version mobile.
Après la mise en œuvre de nos interventions à partir du 17/03/203, l'évolution s'est améliorée jusqu'à atteindre un résultat de 100% d'optimisation : toutes les URLs sont désormais rapides, que ce soit en version ordinateur ou mobile.
Avant
|
Après
|
