Les Core Web Vitals de Google : bien préparer son site WordPress

Envie de tout savoir sur les Core Web Vitals et la Page Expérience de Google ? Vous êtes au bon endroit. Avec le déploiement de la mise à jour Google en Juin prochain, vos efforts de référencement devront désormais se concentrer sur l’expérience utilisateur (UX). L’UX sera bientôt un facteur déterminant dans le classement de votre site WordPress sur Google. L’ultime but de cette manœuvre est de s’assurer que les premiers sites présentés aux internautes proposent une expérience optimale.

Mais voilà, comment définir cette fameuse “Page Experience”? Sur quels fondements Google se base pour définir si un site a une bonne ou une mauvaise expérience? Quels outils peut-on utiliser pour mesurer les Core Web Vitals de notre site WordPress? Mais d’ailleurs, que sont ces fameux Core Web Vitals qui influencent le SEO et que l’on voit partout en ce moment?

Restez encore un peu avec nous, ce guide complet a été créé pour répondre à toutes vos interrogations.

1. Définition de la nouvelle “Page Expérience” de Google

Google va mettre l’expérience utilisateur “Page Expérience” au cœur de son algorithme SEO. Ces éléments qui composent la Page Expérience rejoignent les centaines de facteurs de positionnement que Google prend déjà en compte pour déterminer quelle page sera affichée en premier sur les SERPs.

En juin 2021, Google ajoute 5 métriques qui vont définir l’expérience utilisateur et donc déterminer le ranking de votre site WordPress :

1. Les Core Web Vitals
2. Être mobile-friendly
3. La navigation sécurisée
4. Le certificat d’authenticité “https “
5. Les pop-ups intempestives

Puisque Google ajoute l’UX à son algorithme, alors on pourrait se demander quel est le critère SEO le plus important entre l’expérience utilisateur et  la pertinence du contenu?

La réponse de Google est simple:

Bien que tous les composants de l’expérience sur la page soient importants, nous allons prioriser les pages avec les meilleures informations, même si certains aspects de l’expérience utilisateur sont inférieurs à la moyenne. Une bonne expérience de page ne remplace pas le fait d’avoir un contenu pertinent et de qualité. Cependant, dans les cas où plusieurs pages ont un contenu similaire, l’expérience de la page devient beaucoup plus importante pour la visibilité dans la recherche Google.

Vous l’avez compris, continuez à produire et publier du contenu de très haute qualité pour être bien référencé, mais à contenu égal Google va ensuite vérifier l’expérience utilisateur que vous offrez à vos visiteurs. Donc pas d’impasse possible !

🥇 Récapitulatif :  Les 5 métriques de l’expérience utilisateur vont permettre de mesurer l’expérience utilisateur et seront déterminants pour votre SEO

2. Les Core Web Vitals de Google : on vous dit tout sur ces “Signaux Web Essentiels” (LCP, FID et CLS)

Les Core Web Vitals sont trois critères de performance que Google ajoutera à son algorithme SEO dès juin 2021. Ces trois métriques sont déterminantes pour mesurer l’expérience vécue par un utilisateur lorsqu’il visite votre site. Comme vu précédemment, ils font partie intégrante de la Google Page experience.

2.1 Définition et interprétation du Largest Contentful Paint (LCP)

• Le Largest Contentful Paint (LCP) correspond au temps de chargement du contenu le plus important. Qui aime un site lent? Personne! Par ailleurs, Google dit que “si le contenu le plus pertinent met du temps à charger, alors le visiteur va avoir tendance à conclure que l’ensemble du site est lent.”

• Interprétation du LCP: mais alors qu’est-ce qu’un bon LCP? A quel moment Google pense que mon contenu le plus pertinent charge assez rapidement? Pour cela, Google a définit trois seuils:
  • Good (Bon) : le contenu se charge en moins de 2,5 secondes
  • Needs Improvement (Besoin d’amélioration) : le contenu se charge entre 2,5 secondes et 4 secondes
  • Poor (Mauvais): le contenu prend plus de 5 secondes pour s’afficher

• Un exemple pour illustrer : Vous arrivez sur un site d’agence de voyage pour trouver un hôtel. Dans ce cas, le contenu le plus important sera sans doute la bannière principale avec le formulaire de recherche. Mais voilà, ce formulaire de recherche met 5 secondes à s’afficher. Qu’allez-vous pensez de ce site? Vous allez sûrement l’associer à un site lent, peut-être pas sécurisé et surtout, cela ne donne pas envie de poursuivre toutes les étapes de la réservation.

 2.2 Définition et interprétation du First Input Delay (FID)

• Le First Input Delay (FID) – premier délai d’entrée –  mesure l’interactivité de votre site. Ce score représente le temps écoulé entre l’action d’un visiteur qui interagit pour la première fois avec votre page et le moment où le navigateur répond à cette interaction.

• Interprétation du FID: 

• Good (Bon) : moins ou égal à 100 ms
• Needs Improvement (Besoin d’amélioration) : entre 100 et 300 ms
• Poor (Mauvais): plus de 300 ms

• Un exemple pour illustrer: Vous arrivez directement sur la page FAQ qui possède plusieurs liens à cliquer comme ci-dessous. Le FID sera le temps entre votre clic et le moment où le navigateur va traiter l’action.

 2.3 Définition et interprétation du Cumulative Layout Shift (CLS)

• Le Cumulative Layout Shift – stabilité visuelle –  mesure la fréquence à laquelle vos visiteurs subissent des changements de mise en page intempestifs.

• Interprétation du CLS: Zéro signifie qu’il n’y a pas de décalage dans votre contenu. En revanche, plus le chiffre est élevé, plus la mise en page est “décalée”.

• Good (Bon) : moins ou égal à 0,1
• Needs Improvement (Besoin d’amélioration) : entre 0,1 et 0,25
• Poor (Mauvais) : plus de 0,25

• Un exemple pour illustrer: Peut-être que la définition vous a fait penser à la même chose que moi: Les pubs intempestives par exemple! Combien de fois j’ai eu l’intention de cliquer sur la page suivante d’un article de blog par exemple et combien de fois mon action a été interrompue car le site a affiché 50 pubs au milieu de nulle part? Dans ces cas-là, vous me direz, pas besoin de Google pour voir que l’expérience utilisateur est proche de zéro…Un autre exemple serait un bouton qui “bouge” intempestivement  à la fin du chargement de la page, ce qui pourrait vous faire manquer votre clic.

📝 Récapitulatif : Les 3 Core Web Vitals que Google va ajouter à son algorithme SEO: LCP= l’interactivité entre un utilisateur et le site FID = le temps de chargement du contenu le plus pertinent CLS= la stabilité visuelle de votre site

3. Les 6 outils pour tester et mesurer les Core Web Vitals

Google a communiqué sur six outils essentiels pour calculer les 3 Core Web Vitals et vérifier l’état de santé de votre site WordPress.  Ils reposent tous sur la technologie Lighthouse: Un outil open-source qui mesure la vitesse et l’expérience utilisateur de votre site WordPress.

3.1 PageSpeed Insights

Le test étant disponible sur mobile et desktop, cet outil permet donc d’améliorer la vitesse de chargement de tous vos appareils. Il suffit de mettre l’URL dans le champ d’analyse et vous aurez vos Core Web Vitals en un clic.

3.2 Chrome UX Report (CrUX)

L’ensemble de données Chrome UX Report (CrUX) représente la manière dont les utilisateurs réels de Chrome découvrent les destinations populaires sur le Web.

3.3 La SearchConsole de Google:

• Le rapport Expérience sur la page vous permet d’avoir une vue d’ensemble de l’expérience utilisateur offerte par votre site pour CHAQUE URL.
• On retrouve les signaux qui constitue l’expérience de la page vue dans la section 1: les core web vitals (signaux web essentiels), l’ergonomie mobile, la navigation sécurisée et le protocole https

3.4 Chrome Dev Tools

• Ouvrez une page en mode incognito sur Google Chrome p
• Allez à votre site WordPress
• Faites un clic droit n’importe où sur le site et cliquer sur “Inspect”

• Sélectionnez “Lighthouse” dans les outils dev en haut à droite de l’écran:

• Choisissez ensuite sur quel device vous souhaitez éditer le rapport puis cliquez sur “Generate Report”.

Vous allez obtenir un rapport divisé en 4 grandes parties:

1. 1. La Performance qui regroupe les Core Web Vitals et d’autre métriques utiles pour mesurer la vitesse de votre site/
   2. L’Accessibilité vérifie s’il y a des problèmes qui pourraient empêcher certains visiteurs d’accéder à votre contenu.
   3. Best Practice (les meilleures pratiques) pour vérifier si votre site WordPress utilise bien les best practices du web: page en https, images avec le bon ratio par exemple etc.
   4. Le SEO qui vous dit si votre site va être bien indexé dans les résultats Google.

Dans notre exemple, tout est vert sauf l’accessibilité. Dans le rapport propulsé par Lighthouse, on peut voir que les titres ne sont pas dans l’ordre “descendant” ce qui peut provoquer sur le mobile des soucis d’accessibilité.

3.5 Lighthouse

Vous pouvez exécuter Lighthouse dans Chrome DevTools, à partir de la ligne de commande ou en tant que module Node. Tout ce que vous avez à faire est de fournir une URL d’audit à Lighthouse. Il effectuera une séquence d’audits sur le site Web, puis il créera un rapport sur les performances de la page. Lighthouse est une technologie open-source qui est utilisée par tous les outils mentionnés dans cette quatrième section.

3.6 L’extension Web Vitals (Web Vitals Extension)

L’extension est téléchargeable gratuitement et vous permet de connaître le score de vos Core Web Vitals en instantané:

4. Etude de cas: comment mesurer le score de votre site WordPress ?

4.1 Test avec Google PageInsights

• Aller à Google PageInsights
• Entrez l’URL de votre site WordPress et sélectionnez Mobile ou Ordinateur:

Score de WP Formation sur mobile:	Score de WP Formation sur Ordinateur

WP Formation passe donc le test d’évaluation du rapport Core Web Vitals sur mobile et desktop.

4.2 Analyse et interprétation des résultats de nos Core Web Vitals

Commençons par rappeler les scores recommandés par Google pour chaque Core Web Vitals.

Voici les données de terrain (basées sur des utilisateurs réels) des Core Web Vitals de WP Formation: 

LCP= 1,7 (BON)  I  < 2,5 sec
FID = 2 ms (BON) I < 100ms
CLS = 0,01 (BON) I < 0,1

Section diagnostic:

Seulement une petite erreur a été diagnostiquée: la taille des images qui ne possèdent pas de largeur/hauteur explicites sur la page d’accueil.

Tous les autres audits ont été réussis: 

5. Comment Améliorer vos Core Web Vitals et Bien Préparer Votre Site WordPress : Notre Checklist

Comment bien vous préparer avec la mise à jour de l’algorithme et pour garder un bon ranking sur Google (voir l’améliorer) ? C’est ce que nous allons voir à travers notre checklist.

En préambule, j’ajouterais que votre thème peut vous pénaliser, de fait un thème comme Divi par exemple, est très difficile à optimiser car assez lourd et qui charge de nombreux scripts. Il en va de même avec les constructeurs de page, qui, si mal utilisés/configurés/surchargés peuvent provoquer des ralentissements et ainsi rendre l’optimisation encore plus complexe. Enfin, vos extensions peuvent parfois être un frein, je ne vous apprend rien en disant que certains plugins sont très gourmands en ressources.

5.1 Améliorez vos Core Web Vitals (LCP, FID et CLS)

Considérez VRAIMENT les résultats de vos Core Web Vitals. Comme nous l’avons vu dans cet article, plusieurs outils sont disponibles pour vous aider à suivre ces trois paramètres clés, notamment PageSpeed Insights et Lighthouse.

5.1.1 Comment améliorer le score LCP (temps de chargement du contenu le plus pertinent) ?

⚠️ Les causes d’un mauvais score LCP:

• Temps de réponse du serveur lents
• JavaScript et CSS bloquant le rendu
• Temps de chargement des ressources lents

✅ Les solutions pour rendre votre LCP contenu principal plus rapide à charger:

• Mesurez le temps de réponse du serveur (TTFB). Plus le navigateur met de temps pour recevoir le contenu du serveur, plus il faut de temps pour rendre quoi que ce soit à l’écran. Un temps de réponse du serveur plus rapide améliore directement chaque métrique de chargement de page, y compris LCP. Un plugin de cache comme WP Rocket ou W3 Total Cache peut vous être utile
• Améliorez comment et où votre serveur gère votre contenu. Compressez vos fichiers au niveau du serveur en utilisant par exemple Gzip.
• Utilisez Preconnect pour faire une “pre-connexion” et ainsi permettre au navigateur de configurer des connexions précoces avant une requête http.

5.1.2 Comment améliorer le score CLS: apprenez à éviter les changements trop soudains de mise en page

⚠️ Les causes d’un mauvais score CLS

• Images sans dimensions
• Pubs, contenu intégrés (comme une vidéo YouTube par exemple) sans dimensions précisées
• Vos polices utilisées sur votre site WordPress peuvent causer FOIT/FOUT
• Des actions retardées par un délais de réponse du serveur avant de mettre à jour les DOM.

✅ Les solutions pour rendre votre CLS inférieur à 0,1:

• Optez pour un design “stable” afin d’éviter que vos boutons ne se décalent trop pendant le chargement de la page
• Optimisez la taille de vos images. WP Formation avait comparé quelques extensions à utiliser pour optimiser au mieux vos images.
• Mettez vos images manuellement à la bonne taille (largeur et hauteur), ne laissez pas WordPress décider pour vous. Il est important de définir une largeur et une hauteur appropriées pour aider le navigateur à allouer la bonne quantité d’espace dans la page pendant le chargement du visuel.
• Pas de pop-ups intempestives: vérifiez l’absence d’annonces ou de publicités nuisibles à l’expérience utilisateur.
• Attention au contenu dynamique: n’injectez pas de contenu dynamique par-dessus du contenu déjà existant.

5.1.3 Comment améliorer le score FID: comment faire une bonne première impression auprès de vos utilisateurs

⚠️ Les causes d’un mauvais score FID

• Les fonctions JavaScript mettent trop de temps à s’exécuter

✅ Les solutions pour rendre votre FID acceptable

• Optimisez votre CSS et votre JavaScript avec un plugin de cache par exemple
• Pensez à votre LCP (le contenu le plus pertinent) qui est facile à optimiser et qui a une corrélation positive avec le FID. En effet, si vous améliorez votre LCP alors il y aura aussi une tendance positive sur le FID. Il s’agit le plus souvent de votre bannière hero: faites en sorte que l’image ne soit pas trop lourde par exemple. Cela évitera au visiteur de placer (même inconsciemment) votre site dans la catégorie “lent”.

5.1.4 Les autres solutions facilement applicables pour améliorer la performance globale et l’expérience utilisateur

1. Tournez-vous vers un hébergeur performant (WP Formation recommande WP Serveur qui est un hébergeur performant spécialisé WordPress)
2. Utilisez un CDN qui est un réseau de diffusion de contenu pour que votre site soit accessible rapidement partout dans le monde (WP Serveur possède aussi un CDN avec 21 points de présence dans le monde)
3. Optez pour un plugin de cache facile à installer
4. Faites attention au plugins utilisés, certains sont lourds et vont ralentir votre site WordPress
5. Choisir un thème léger qui ne ralentit pas votre site
6. Pensez mobile, mobile, mobile! Votre site Web doit fonctionner parfaitement sur les appareils mobiles, notamment à l’aide des outils mentionnés préalablement dans cet article. Une ergonomie mobile irréprochable doit être au cœur de votre stratégie web.
7. Assurez-vous que vos pages soient sécurisées. Vous devez toujours vous assurer que votre site soit sécurisé et  sans contenu malveillant tel que des virus ou des malwares. Si ce n’est pas le cas, migrer votre site en HTTPS. Il s’agit d’un protocole de sécurité qui protège l’utilisateur en trois étapes : le cryptage, l’intégrité des données et l’authentification.

Conclusion

Avec cette mise à jour, Google montre bien qu’encore une fois l’objectif à viser pour être premier sur Google est de satisfaire au maximum l’utilisateur. La pertinence et la qualité du contenu restent les facteurs les plus déterminants pour le SEO mais n’oubliez pas qu’à qualité de contenu similaire, Google se tournera alors vers l’expérience utilisateur qui englobe 5 facteurs clés: les Core Web Vitals, l’ergonomie mobile, l’utilisation du https et une navigation sécurisée.

Google a repoussé cette mise à jour en Juin 2021 (au lieu de mai) ce qui vous laisse encore quelques semaines pour réaliser tous les tests nécessaires avec les outils présentés.

Google commence à communiquer officiellement sur les gains relatifs aux signaux Web essentiels. Ci-dessous un mail reçu concernant Ad Manager :

Ces trois signaux Web essentiels seront désormais pris en compte pour le classement dans la recherche (…). Plutôt clair et ne laissant plus de place à l’ambiguïté !

N’hésitez pas si vous avez des questions sur les Core Web Vitals ou sur la page Experience, posez-les en commentaires.