SEO : préparer son site PrestaShop à la mise à jour Google Page Experience (Partie 1)
[Update – Lors de la 1ère publication de cet article, le 24 février 2021, le déploiement de la mise à jour Google Page Experience était annoncé pour le mois de mai 2021.
Le contenu de l’article a été mis à jour le 26 avril 2021, après l’annonce de Google d’un déploiement progressif à partir de la mi-juin.]
La prochaine mise à jour de l’algorithme de Google sera déployée de façon progressive à partir de la mi-juin 2021. Son nom ? Google Page Experience Update.
Avec cette mise à jour majeure, Google accélère sa démarche centrée sur l’expérience utilisateurs (UX). Parmi les différents critères de son algorithme de classement, le moteur de recherche prendra désormais également en compte les niveaux de convivialité et de fluidité que les pages offrent dans le parcours des internautes. En clair, les sites qui ne proposeront pas une expérience utilisateurs de qualité satisfaisante pourraient être impactés dans le positionnement de leurs pages.
De nouveaux critères appelés Core Web Vitals – ou Signaux Web essentiels, en français – viendront ainsi s’ajouter aux signaux UX déjà pris en compte par Google depuis quelques années. On pense notamment à la compatibilité mobile (responsive design & Progressive Web App), à la sécurisation des sites (HTTPS) ainsi qu’à l’accessibilité du contenu (absence d’interstitiels intrusifs).
On fait le point dans ce billet sur les signaux Web essentiels à optimiser sur votre site PrestaShop en prévision de la future mise à jour Page Experience.
Quels sont les Core Web Vitals de Google Page Experience ?
La mise à jour de Google se base sur la combinaison de trois Core Web Vitals, des indicateurs de performance Web qui mesurent la manière dont les internautes peuvent interagir avec une page.
Indicateur n° 1 > LCP (Largest Contentful Paint)
Le score LCP correspond à la performance perçue d’une page Web. Il mesure le temps de chargement nécessaire avant l’affichage du plus grand élément de la page. Google considère en effet que l’affichage de cet élément – qu’il soit visuel ou textuel – permet à l’internaute de confirmer que cette page répond bien à sa recherche. Selon les recommandations de Google, un bon score LCP ne devrait pas excéder 2,5 secondes.
Indicateur n°2 > FID (First Input Delay)
Le score FID correspond au niveau de réactivité de la page. Il se base pour cela sur le temps que met le navigateur à renvoyer l’action demandée au serveur. Ce délai peu notamment être augmenté à cause de Javascripts trop lourds ou mal optimisés. Le FID calcule donc le temps écoulé entre une action réalisée par l’internaute (comme, par exemple, un clic sur un bouton d’action) et le moment où cette action est envoyée au serveur. Google préconise un score FID inférieur à 100 millisecondes.
Indicateur n°3 > CLS (Cumulative Layout Shift)
Le score CLS détermine quant à lui le niveau de stabilité visuelle de la page. Il est calculé à partir des mouvements de mise en page qui peuvent se produire lorsqu’un internaute navigue. Ces décalages, potentiellement désagréables pour le visiteur, peuvent être liés à des déplacements d’éléments pendant le chargement de la page, à des effets de redimensionnement de widgets, ou encore à des apparitions progressives de blocs. Pour offrir une expérience utilisateur de qualité, Google recommande de ne pas dépasser un score CLS de 0,1.
Bonus – Indicateur n°4 > FCP (First Contentful Paint)
Le score FCP n’est pas listé dans les signaux pris en compte par la mise à jour Page Experience. Il nous semble cependant important de le mentionner ici car il fait, lui aussi, partie des indicateurs de performance clés pour votre site PrestaShop. Il est d’ailleurs affiché dans l’outil de mesure Google PageSpeed Insights, au même titre que les 3 autres indicateurs. Le score FCP détermine si la navigation de l’internaute a commencé sans problème. Il mesure pour cela le temps nécessaire au navigateur pour afficher, au sens technique du terme, le premier élément du contenu à l’écran (texte, image, fond, SVG ou <canvas>). Selon Google, ce temps d’affichage ne doit pas dépasser 1,36 seconde pour obtenir un score FCP optimal.
Comment vérifier les performances des Core Web Vitals sur votre site PrestaShop ?
La mise à jour Page Experience de Google pourrait impacter le référencement de votre boutique. Mais savez-vous comment vos pages sont positionnées aujourd’hui sur chacun de ces indicateurs ?
Il est essentiel de mesurer ces différents signaux, avant de commencer à les optimiser sur votre site. D’autant qu’au-delà de l’impact SEO (que l’on ne pourra réellement mesurer qu’une fois la mise à jour lancée), les performances de votre site ont une influence directe sur votre taux de conversion et, par extension, sur votre chiffre d’affaires.
Parmi les différents outils de mesure des Core Web Vitals, nous vous conseillons d’utiliser Google PageSpeed Insights. Grâce à cet outil intuitif, vous réalisez une mesure initiale de vos KPI, et détectez les opportunités d’optimisation pour votre site PrestaShop. → Accéder à l’outil PageSpeed Insights
Exemple de résultat PageSpeed Insights présentant les 4 signaux Web de performance :
Nos conseils pour l’analyse des métriques webperf
- Situez vos indicateurs par rapport aux recommandations de Google :
- Pensez à mesurer vos performances sur desktop et sur mobile, pour repérer vos points d’amélioration sur chaque support de consultation.
- Gardez en tête qu’une analyse précise et personnalisée des données récoltées vous permettra de définir concrètement les actions à réaliser pour optimiser les performances de votre site.
Besoin d’être accompagné·e dans cette analyse ?
Chez Profileo, les experts PrestaShop sont à votre disposition pour réaliser un diagnostic de vos performances et vous fournir la liste des éléments qui affectent le temps de chargement de vos pages. 2 formules, selon vos besoins : Audit rapide des performances ou Audit détaillé des performances.
Comment améliorer les scores des Core Web Vitals sur votre site ?
Vous disposez des mesures initiales pour vos indicateurs de performance Page Experience. Mais vous ne savez pas par où commencer pour optimiser chacune de ces métriques en prévision de la mise à jour Google ? Découvrez les conseils de notre équipe pour améliorer les Core Web Vitals de votre site PrestaShop.
Indicateur n° 1 > LCP (Largest Contentful Paint)
Le LCP dépend, on l’a vu, du plus grand élément de la page. Généralement, il s’agit d’une image. Pour optimiser votre score, pensez à vérifier le fichier image correspondant :
- Ses dimensions correspondent-elles aux dimensions de l’image affichée dans le navigateur ? Évitez de publier une image trop grande. Car le navigateur devra la redimensionner.
- Le fichier est-il trop volumineux ? Si c’est le cas, utilisez un service de compression en ligne, tel que https://tinypng.com/.
- Le plus grand élément visuel de votre page est une image statique qui se charge avec du lazy loading ? Désactivez le chargement différé sur cette image.
Vous ne savez pas quelles actions mettre en place pour booster votre score LCP ?
Contactez-nous pour en discuter.
Indicateur n°2 > FID (First Input Delay)
Pour booster le niveau de réactivité de la page, la première étape à réaliser est de vérifier sur votre tableau de bord PrestaShop que :
- votre cache est bien activé ;
- la compilation des templates n’est pas forcée.
Pour vérifier ces paramètres → “Configurer” > “Paramètres avancés” > “Performances”.
Une fois cette étape effectuée, l’enjeu est de réduire le temps de construction de vos pages. Plusieurs leviers pour cela :
- Détecter, avec des outils dédiés, les goulots d’étranglements de votre site et les optimiser. Ces lenteurs peuvent être liées à une requête trop lourde en base de données (voire même plusieurs), un appel à un site externe, ou un algorithme PHP non optimisé. Si vous avez des besoins spécifiques pour votre page d’accueil, notez que nos équipes sont en mesure de réduire son temps de chargement, via une intervention technique dédiée.
- Mettre en place un module de cache plus efficace que le cache natif. Un exemple : PageCache Ultimate.
- Vous êtes client 7724 ? Pousser le temps de construction de vos pages dans ses derniers retranchements avec un cache serveur avancé (et les adaptations PrestaShop associées, bien sûr).
Grâce à ces actions, les temps de chargement de vos pages peuvent généralement être réduits à des délais situés entre 40 et 80 millisecondes ! (Pour rappel, la recommandation de Google est de ne pas excéder 100 millisecondes.)
Indicateur n°3 > CLS (Cumulative Layout Shift)
La clé de l’optimisation de votre score CLS réside dans une analyse préalable qui vous permettra de déterminer précisément quels sont les effets de sursaut, redimensionnement, apparition, etc., et de détecter les actions correctives pour chacun.
Pour mener votre analyse, utilisez la console de développement du navigateur Google Chrome. → Accédez à l’onglet “Performance”, puis lancez le diagnostic en cliquant sur “Start profiling and reload page” :
N’hésitez pas à contacter notre équipe dédiée PrestaShop si vous avez besoin d’aide pour réaliser les actions correctives liées à votre CLS.
Indicateur n°4 > FCP (First Contentful Paint)
Votre FCP est lent ? Les raisons peuvent être extrêmement variées. En voici quelques exemples (attention, cette liste est loin d’être exhaustive) :
- Un mauvais score FID impacte le FCP.
- Des javascripts ralentissent le premier affichage.
- Le navigateur est en attente de chargement de polices de caractères.
Le test Google Chrome utilisé pour l’analyse du score CLS (ci-dessus) permet d’identifier le premier élément de contenu affiché. En ce qui concerne l’optimisation du temps d’affichage cependant, il y a autant d’actions correctives possibles que de raisons, et même de sites !
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.
Comme vous avez pu le voir dans le titre de notre article, il s’agissait là de la 1ère partie de notre “saga” sur la préparation de votre site PrestaShop à la mise à jour Google Page Experience ;-).
L’idée de la partie 2 ? Vous aider à suivre l’évolution de ces différentes métriques et à les optimiser, dans le temps. Et on en profite pour vous parler aussi des autres indicateurs de performance mesurés dans PageSpeed Insights. À lire par ici > SEO : préparer son site PrestaShop à la mise à jour Google Page Experience (Partie 2).