Core Web Vitals : Qu'est-ce que c'est ? Comment les optimiser ?

Définition publiée le 19/09/2023

En 2020, Google a introduit un concept appelé "Core Web Vitals" ou en français, "Signaux Web essentiels". Ces signaux sont en fait un ensemble de mesures spécifiques qui visent à déterminer la santé et la performance d'un site web du point de vue de l'expérience utilisateur.

Les sources officielles

Pourquoi Google a mis en place les Core Web Vitals ?

Dans le monde numérique d'aujourd'hui, où chaque milliseconde compte, la performance d'un site web est cruciale non seulement pour la satisfaction des utilisateurs, mais aussi pour le succès d'un site en termes de visibilité et de conversion. Google, en tant que principal moteur de recherche, se donne la mission de guider les créateurs de sites web vers les meilleures pratiques qui favorisent une expérience utilisateur de qualité.

Les Core Web Vitals ont été introduits par Google pour plusieurs raisons :

Démocratiser la compréhension des performances

Tous les propriétaires de sites ne sont pas nécessairement experts en matière de performance web. Google a voulu simplifier et rendre plus accessible la compréhension des éléments principaux qui influencent la vitesse et la stabilité d'un site. En mettant en avant ces "signaux essentiels", l'entreprise espère que ceux qui ne sont pas techniquement avertis pourront comprendre et prendre des mesures pour améliorer leur site.

Se concentrer sur l'essentiel

Dans le passé, il y avait de nombreux indicateurs et mesures pour évaluer la performance d'un site. Cela pouvait souvent être écrasant. Les Core Web Vitals se concentrent sur les trois aspects les plus critiques de l'expérience utilisateur : la vitesse de chargement, l'interactivité et la stabilité visuelle. En se concentrant sur ces trois aspects, Google espère que les propriétaires de sites pourront prioriser efficacement leurs efforts d'optimisation.

Standardiser les critères d'évaluation

Il est important pour les créateurs de sites web d'avoir un ensemble unifié et cohérent de critères pour évaluer la performance de leurs sites. Avec les Core Web Vitals, Google vise à établir un standard clair et universel sur ce qui constitue une bonne expérience web. Cela permet de créer une sorte de "langage commun" pour discuter et évaluer la qualité de l'expérience utilisateur.

Importance de cette notion pour le SEO

L’expérience utilisateur est au cœur des préoccupations de Google. Ainsi, un site web rapide, stable et réactif est non seulement favorable pour les utilisateurs, mais il peut être aussi mieux classé par le moteur de recherche.

En effet, deux sites équivalents en termes de contenu et de qualité pourront être départagés par Google en fonction de leurs performances : le site le mieux classé pourra être celui qui répond le mieux aux critères des Core Web Vitals.

Rappelons que le volet technique (qui comprend la “web performance”) est l’un des 3 piliers du SEO, avec le netlinking et la qualité du contenu.

D’autre part, dans un monde où l'information est à portée de clic, les utilisateurs sont de moins en moins tolérants face aux sites web lents ou peu réactifs. Les propres données de Google montrent que même de légères augmentations du temps de chargement peuvent entraîner une augmentation significative du taux de rebond.

Par conséquent, offrir une expérience utilisateur optimale est non seulement essentiel pour maintenir l'engagement des visiteurs, mais aussi pour le positionnement d'un site web dans les résultats de recherche. En pratique, Google considère qu’un site ayant un fort taux de rebond n’est pas satisfaisant pour les utilisateurs, ce qui impacte négativement son classement dans les moteurs de recherche.

Le lancement des Core Web Vitals par Google en 2020 affirme que ces indicateurs sont désormais importants pour juger de la qualité d'un site, même si les conséquences sur le positionnement SEO sont indirectes.

Que peut-on apprendre du rapport de Google sur les Core Web vitals ?

Performances des URLs

Le rapport classe vos pages en trois catégories : "Médiocre", "Amélioration nécessaire", et "Bon". Cela vous donne une idée claire de ce qui fonctionne et de ce qui doit être amélioré.

Types de métriques

Google se concentre sur trois principaux indicateurs que nous détaillerons dans la partie suivante :

CLS (Cumulative Layout Shift) : mesure la stabilité visuelle de votre page ;
FID (First Input Delay) : mesure la réactivité de votre page. Ce critère sera remplacé par l’INP (Interaction to Next Paint) en mars 2024 ;
LCP (Largest Contentful Paint) : mesure la vitesse de chargement du contenu principal de la page.

Groupes d'URLs

Le rapport groupe des pages similaires pour vous aider à identifier des tendances ou des problèmes spécifiques à certaines sections de votre site.

Les trois piliers des Core Web Vitals

Largest Contentful Paint (LCP)

Qu'est-ce que c'est ?

Le Largest Contentful Paint, ou LCP, mesure le temps nécessaire pour afficher le plus grand élément visible (comme une image ou un bloc de texte) lors du chargement d'une page web. Selon Google, un bon LCP ne dépasse pas 2,5 secondes et est considéré comme médiocre à partir de 4 secondes.

Pourquoi est-ce important pour la performance web ?

LCP est essentiel car il donne une indication de la performance perçue par l'utilisateur. Une valeur faible pour le LCP signifie que l'élément principal d'une page est chargé et affiché rapidement, ce qui donne à l'utilisateur l'impression que la page est performante et réactive.
Cela demande également moins de ressources aux serveurs des moteurs de recherche pour afficher les pages web.

Comment l'optimiser ?

Optimisez et compressez vos images pour qu'elles se chargent rapidement sans compromettre leur qualité.
Utilisez le lazy-loading pour les images qui n'apparaissent pas immédiatement à l'écran.
Réduisez le temps de réponse du serveur, par exemple en améliorant votre hébergement ou en utilisant des réseaux de distribution de contenu (CDN).
Évitez les styles et polices bloquants en optimisant le CSS et en chargeant les polices de manière asynchrone.

First Input Delay (FID)

Rappelons que ce critère a été jugé insuffisant pour Google et sera remplacé par le critère INP d’ici quelques mois ! Nous reviendrons plus en détail sur ce nouvel indicateur à la suite de cette partie.

Qu'est-ce que c'est ?

Le First Input Delay, ou FID, mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec une page (par exemple, en cliquant sur un bouton) et le moment où le navigateur arrive à répondre à cette action. Un bon FID est inférieur à 100 millisecondes et est considéré comme mauvais à partir de 300 millisecondes.

Pourquoi est-ce important pour l'interactivité du site web?

FID est essentiel pour la réactivité d'un site. Si un site a un long délai de FID, l'utilisateur peut avoir l'impression que le site est gelé ou non réactif, ce qui peut être frustrant.

Comment l'optimiser ?

Minimisez ou reportez le JavaScript: réduisez la quantité de JS exécuté au chargement de la page ou utilisez le chargement asynchrone pour ne pas bloquer la page.
Utilisez des web workers pour exécuter JavaScript en arrière-plan sans bloquer le thread principal (fil d'exécution). Par conséquent, même si vous avez un script JS lourd qui s'exécute, cela ne bloquera pas le thread principal, et la page restera réactive aux actions de l'utilisateur.
Optimisez le code : en éliminant les tâches inutiles ou en les rendant plus efficaces, vous pouvez améliorer le temps de traitement des interactions.

Interaction to Next Paint (INP)

Qu'est-ce que c'est ?

L'Interaction to Next Paint, ou INP, est un nouvel indicateur qui sera introduit par Google en mars 2024 pour évaluer la réactivité globale d'une page web.

Contrairement au FID qui se concentrait sur la première interaction, l'INP mesure la latence de toutes les interactions effectuées sur une page. Ces interactions englobent toutes les actions de l'utilisateur qui entraînent une réponse visuelle, telles que naviguer dans un menu sur smartphone, ajouter un article dans un panier ou s'authentifier dans un formulaire.

Selon Google, un bon score INP est inférieur à 200 millisecondes. Au-delà de 500 ms, la réactivité est jugée insuffisante et pourrait nuire à l'expérience utilisateur.

Pourquoi est-ce important pour l'interactivité du site web ?

L’INP est essentiel pour comprendre comment une page web répond globalement à l'utilisateur après son chargement. Google a mentionné que 90% du temps passé par un utilisateur sur une page se produit après son chargement. Ainsi, évaluer la réactivité tout au long de la vie d'une page est essentiel. Si une page présente une latence élevée, l'utilisateur pourrait avoir le sentiment que ses actions sont ignorées ou que la page est lente, réduisant la qualité de son expérience.

Comment l'optimiser ?

Vous pouvez déjà trouver le rapport INP dans la Search Console ! Pour le consulter, rendez-vous dans l'onglet "Expérience", puis cliquez sur "Signaux Web Essentiels". Un message s'affichera en haut de la page pour vous guider vers ce nouveau rapport.

Avec cet outil à votre disposition, vous disposez d’environ 6 mois pour adapter votre site au critère INP. C'est le moment idéal pour commencer à prendre des mesures correctives pour être d'ici mars 2024 !

Cumulative Layout Shift (CLS)

Qu'est-ce que c'est ?

Le Cumulative Layout Shift, ou CLS, mesure la quantité inattendue de mouvement des éléments visuels sur une page pendant son chargement.

Pourquoi est-ce important pour la stabilité visuelle ?

Un mauvais CLS peut être désorientant pour l'utilisateur. Si les éléments bougent inopinément sur la page pendant son chargement, cela peut entraîner des clics accidentels ou rendre la lecture du contenu difficile.

Comment l'optimiser ?

Utilisez des dimensions fixes pour les images et les éléments publicitaires. En définissant une hauteur et une largeur, vous évitez les redéfinitions inattendues.
Préchargez les polices ou assurez-vous qu'elles n'affectent pas le déplacement des éléments lorsqu'elles sont chargées.
Évitez les animations inutiles qui peuvent déclencher des déplacements d'éléments.
Chargez le contenu "hors écran" de manière asynchrone pour éviter que des éléments ne soient insérés soudainement à la vue de l'utilisateur.

Optez pour la mise en cache

La mise en cache joue un rôle prépondérant pour optimiser ces indicateurs et accélérer le temps de chargement des pages pour les visiteurs récurrents. En stockant localement des versions préchargées de ressources fréquemment utilisées, telles que des images, des scripts ou des feuilles de style, la mise en cache permet de réduire significativement la durée de chargement d'une page.

En offrant aux utilisateurs un contenu instantanément accessible depuis le cache, on améliore leur expérience, ce qui correspond aux objectifs des Core Web Vitals.
Toutefois, la mise en cache ne dispense pas d’améliorer les performances d’un site puisqu’elle n’est effective que pour les visiteurs qui reviennent au moins pour la deuxième fois sur vos pages.

Outils pour mesurer les Core Web Vitals

Pour mesurer ces signaux avec précision, plusieurs outils ont été développés et sont largement utilisés dans l'industrie du web :

Google Search Console

Après l'annonce officielle des Core Web Vitals, Google a mis à jour la Search Console. Elle a été modifiée principalement pour le rapport sur la vitesse, désormais réparti selon les trois métriques principales : LCP, FID et CLS. De plus, elle capture l'expérience des utilisateurs réels et fournit des recommandations aux éditeurs de sites pour améliorer les performances des pages.

PageSpeed Insights

Cet outil analyse le contenu d'une page Web sur mobile et desktop, et propose des suggestions pour améliorer sa vitesse. Les indicateurs de PageSpeed Insights sont extraits des données affichées dans la Search Console.

Lighthouse

C'est une plateforme open-source conçue pour améliorer les performances des sites Web en générant un rapport SEO sur les pages visitées. Lighthouse propose des audits de performance, des tests d'accessibilité, des audits d’applications Web et des outils de référencement.

Chrome DevTools

C'est une suite d'outils de développement Web intégrée au navigateur web Google Chrome. Ces outils permettent de modifier les pages en temps réel. Chrome DevTools a été mis à jour pour aider à corriger les problèmes d’instabilité visuelle sur une page, mesurant notamment le CLS. Il teste également le temps de blocage total (TBT), ce qui est utile pour optimiser la valeur du First Input Delay.

L’index Mobile-first

On estime que plus de 9 personnes sur 10 consultent internet via leur téléphone. Pour s’adapter à cette tendance, Google teste en priorité la version mobile des sites internet pour en vérifier la performance et procéder à leur classement dans la SERP.

Le test d’optimisation mobile de Google vous permet de vérifier que vos pages sont compatibles avec la navigation mobile. Notez bien qu’un site qui n’est pas accessible sur téléphone sera pénalisé par Google dans sa version desktop également.

L'impact des Core Web Vitals sur le SEO

Les données propres à Google démontrent que le temps de chargement d'une page influence directement la rétention des utilisateurs : plus une page prend de temps à charger, plus le taux de rebond augmente. Ainsi, un site performant, en termes de vitesse et de stabilité, favorise non seulement une meilleure expérience utilisateur, mais renforce également la fidélité des visiteurs. De ce fait, comme nous l’avons évoqué précédemment, Google accorde une importance indirecte à ces indicateurs lorsqu'il s'agit d'évaluer et de classer les sites web.

Des études récentes illustrent que les Signaux Web essentiels impactent directement l'engagement des utilisateurs. Par exemple :

Lorsqu'un site respecte les critères des Signaux Web essentiels, il est démontré que les utilisateurs sont 24% moins susceptibles d'abandonner le chargement de la page.
Une amélioration de 100 ms du Largest Contentful Paint (LCP) a permis d'augmenter le taux de conversion de Farfetch de 1,3%.
Yahoo! JAPON a noté une augmentation de 15% du nombre de pages vues par session après avoir réduit leur Cumulative Layout Shift (CLS) de 0,2. Cette amélioration a également conduit à une augmentation de la durée des sessions de 13%.
Netzwelt, en optimisant ses Core Web vitals, a constaté une hausse de 18% de ses revenus publicitaires et une augmentation de 27% de ses pages vues.

Ces exemples montrent clairement comment l'optimisation des performances d'un site, mesurée par les Core Web Vitals, peut avoir un impact significatif sur le comportement de l’utilisateur.

Mathilde Grattepanche

Responsable éditoriale & Rédactrice web

Avec sa plume affûtée et son expertise en rédaction web, Mathilde a acquis une solide expérience avant de rejoindre l’équipe en tant que responsable éditoriale d’Abondance. Quand elle est au clavier, réactivité et qualité sont toujours au rendez-vous !