Core Web Vitals, ces signaux Web essentiels pour le SEO de votre PrestaShop
Depuis quelques années, les moteurs de recherche, et notamment Google, intègrent au cœur de leur algorithme de classement la notion d’expérience utilisateur (UX). Cette démarche orientée sur l’utilisateur s’est accentuée au fil des ans à travers différents critères et composants. On citera par exemple l’index Mobile-first qui encourage les sites à optimiser leur affichage sur les appareils mobiles ou encore les Rich Snippets qui améliorent la présentation des résultats de recherche.
Dernière évolution en date : la mise à jour Google Page Experience. Cette update est venue ajouter aux critères SEO existants 3 signaux Web essentiels (les Core Web Vitals) : le Largest Contentful Paint – LCP, le First Input Delay – FID et le Cumulative Layout Shift – CLS.
La vocation de cette alliance entre le SEO et l’UX est d’améliorer l’expérience de recherche des utilisateurs en fournissant des réponses qui correspondent le mieux possible à leurs nouvelles attentes et habitudes.
On fait le point dans ce billet sur les signaux Web essentiels à optimiser sur votre site PrestaShop lorsque vous souhaitez renforcer votre positionnement dans les résultats des moteurs de recherche (également appelés SERP, pour Search Engine Result Page).
FOCUS : OUTILS DE MESURE DES CORE WEB VITALS→ Comment vérifier les performances des signaux Web essentiels sur votre boutique ?Avant toute chose, il est essentiel de réaliser un état des lieux précis de vos scores Page Experience. Les recommandations de Google à l’égard de ces indicateurs sont les suivantes :
Pour vérifier les performances de vos pages, il existe plusieurs outils tels que GTmetrix, Google Search Console ou encore l’extension Lighthouse. Analysez les résultats de ces différents outils pour obtenir une mesure initiale de vos signaux Web essentiels, un signalement de ceux qui sont à améliorer ainsi que des suggestions d’optimisation. |
Signal n°1 : Largest Contentful Paint – LCP
C’est quoi le score LCP ?
Le score LCP mesure la vitesse avec laquelle le plus grand élément de la page s’affiche sur le navigateur. La rapidité d’affichage de ce contenu est essentielle selon Google. Le moteur de recherche considère en effet que l’élément principal permet à l’internaute de confirmer ou non que la page répond bien à sa demande initiale.
Comment l’optimiser ?
Pour optimiser votre score LCP, vérifiez quel est le plus grand élément de chaque page. S’il s’agit d’une image (ce qui est bien souvent le cas), plusieurs actions peuvent être mise en place :
- Redimensionnez-la afin que ses dimensions correspondent réellement aux dimensions de l’image affichée dans le navigateur.
- Allégez son poids en utilisant, si besoin, un service de compression en ligne (tel que https://tinypng.com/ par exemple).
- Désactivez le lazy loading sur cette image, le cas échéant.
Signal n°2 : First Input Delay – FID
C’est quoi le score FID ?
Le score FID reflète le niveau de réactivité du chargement suite à une interaction. Concrètement, il correspond au délai qui s’écoule entre le moment où l’internaute effectue une première action sur la page (un clic sur un lien ou un bouton, par exemple) et celui où le serveur est capable d’y répondre. Plus ce laps de temps est court, plus la page est considérée comme utilisable rapidement.
Comment l’optimiser ?
Selon nos experts PrestaShop, il est relativement rare que des sites enregistrent des scores FID considérés comme mauvais par Google.
Vérifiez cependant vos résultats sur Google Search Console ou Google Speed Insights. Si votre site rencontre des problématiques qui plombent votre indicateur FID, vous en serez notifiés directement sur ces outils dans la section « signaux Web essentiels ». Ensuite, il conviendra d’analyser et de corriger les Javascripts trop lourds ou mal optimisés qui augmentent le délai de réponse FID.
Signal n°3 : Cumulative Layout Shift – CLS
C’est quoi le score CLS ?
Le score CLS se rapporte au niveau de stabilité visuelle de la page. Il est déterminé en fonction des éventuels décalages de mise en page pendant le chargement. Il peut s’agir par exemple d’effets de sursaut, de redimensionnement ou d’apparition progressive de widgets ou de blocs. Moins il y a de changements inattendus, plus la page est considérée comme agréable.
Comment l’optimiser ?
Pour optimiser votre score CLS, il est essentiel de déterminer précisément quels sont les éléments qui génèrent des décalages visuels, pour ensuite pouvoir réaliser les actions correctives appropriées.
Pour cela, lancez un diagnostic via GTmetrix. Vous pourrez tout d’abord visualiser les éventuelles instabilités visuelles via l’onglet Vidéo en activant le mode de lecture le plus lent. Ensuite, consultez, via l’onglet Structure, le détail des éléments qui impactent votre CLS dans la section « Avoid large layout shifts ».
Bonus – Signal n°4 : First Contentful Paint – FCP
C’est quoi le score FCP ?
S’il n’est pas inclus dans les critères Page Experience, le score FCP est tout de même un indicateur de performance clé pour le référencement de votre site PrestaShop. Il se réfère au délai dont le navigateur a besoin pour commencer à afficher un premier élément de contenu sur la page.
Comment l’optimiser ?
Difficile de donner des actions concrètes pour améliorer votre score FCP. Pourquoi ? Parce qu’il existe autant de pistes d’optimisation que de raisons qui peuvent impacter cet indicateur.
Notre conseil : accélérez les temps de chargement et d’affichage de vos pages en mettant en place un système de mise en cache optimisé basé sur la technologie Varnish.
Besoin d’être accompagné·e dans l’analyse de vos Core Web Vitals ?
Obtenez un diagnostic précis de vos performances et des actions à réaliser
pour améliorer vos signaux Web essentiels via l’Audit détaillé des performances.
Améliorer ses signaux Web essentiels – Cas pratique
On vous résume ci-dessous un cas concret d’optimisation des Core Web Vitals sur un site PrestaShop. Il s’agit de Limited Resell, une boutique en ligne de sneakers, hébergée chez 772424.com et dont la maintenance est gérée par les équipes Profileo.
Problématique rencontrée par ce site PrestaShop
→ Des temps de chargement trop lents qui impactaient les résultats SEO, et même les ventes.
Avant notre intervention, la performance globale du site relevée via l’outil GTmetrix était de 26 %.
Du côté des signaux Web essentiels, deux d’entre eux montraient des résultats préjudiciables :
- le LCP était de 3,5 s (pour rappel, Google recommande un temps inférieur à 2,5 s),
- et le CLS, de 1,13 (le score préconisé devant être inférieur à 0,1).
Solution mise en place pour nos équipes
→ Le Pack Full Performance PrestaShop, qui inclut une analyse détaillée des performances et la mise en place d’une série d’actions correctives côté PrestaShop & côté serveur. On retiendra notamment les suivantes :
- installation et configuration du cache côté serveur Varnish
- mise en place du CDN cloudflare
- changement de module de diaporama pour un chargement des images + rapide
- mise en place de la méthode de lazy loading
- préchargement d’images externes liées au module de cookies
- préchargement des polices de caractères
- résolution d’une erreur 400 sur le badge google
- benchmarking et optimisations d’appels ajax
Résultats après intervention
→ La note de performance globale du site a plus que doublé, passant de 26 % à 60 %.
Si l’on regarde à nouveau les indicateurs LCP et CLS, les gains sont tout aussi marquants.
Le LCP est ainsi passé de 3,5 à 1 s ; le CLS de 1,13 à 0. Des résultats en totale adéquation avec les recommandations de Google !
Pour conclure, il apparait essentiel d’investir du temps et des ressources dans l’optimisation des signaux Web essentiels de votre boutique PrestaShop. Si vous pourrez en tirer des bénéfices directs au niveau de votre visibilité en ligne, vos performances globales seront, elles aussi, positivement impactées. Vos visiteurs profiteront d’une expérience de navigation optimale, les menant jusqu’à l’achat. Les bonnes performances de vos Core Web Vitals amélioreront donc, aussi, votre taux de conversion.
Vous préférez être accompagné·e dans l’optimisation de vos Core Web Vitals ?
Laissez-vous guider au travers de notre Pack Performance. Il inclut un audit détaillé des métriques de votre site + la mise en place des actions correctives nécessaires pour booster vos performances.
Vous pouvez aussi opter pour des interventions précises et ciblées, en fonction de vos besoins : discutez-en avec nos experts PrestaShop.