Core web Vitals : de quoi parle t-on ?

“Core Web Vitals” est une initiative de Google, représentant un ensemble de mesures visant à quantifier l'expérience des sites web, et identifier des opportunités d'amélioration. Il y a aujourd’hui 3 indicateurs : le temps de chargement perçu (LCP), la vitesse d'interactivité (FID), et la stabilité visuelle (CLS). Il pourrait y avoir davantage de mesures par la suite.

L’enjeu de référencement des Core Web Vitals

L’initiative vise avant tout à mesurer la performance UX des pages et donc de maximiser le confort des utilisateurs. Mais Google a également annoncé qu’à partir de mai 2021, les scores des Core Web Vitals entrerait en compte dans l’algorithme de classement des résultats de recherche. Bien entendu, la qualité du contenu restera le critère principal de classement, mais ces indicateurs permettront une optimisation plus fine.  Search signals

Indicateur #1 : le temps de chargement perçu (LCP)

Contrairement aux classiques mesures de temps de chargement total des pages, la métrique LCP (Largest Contentful Paint) indique le temps de rendu de la plus grande image ou bloc de texte visible dans la fenêtre. LCPGoogle recommande un affichage en moins de 2.5 secondes. 
Google estime que la moitié des mobinautes ne fait pas l’effort d’attendre l’affichage au-delà de 5 secondes, et pénaliserait donc le positionnement dans les résultats de recherche.
Les recommandations d’optimisation sont à retrouver sur https://web.dev/optimize-lcp/ LCP

Dans cet exemple, on observe que le contenu principal, le LCP (ici en vert) est chargé très tôt, avant même l’apparition du logo en haut de page.

Indicateur #2 : la vitesse d'interactivité (FID)

Le First Input Delay (FID) évalue la réactivité de la page suite à une interaction demandée par l’utilisateur. Ainsi chaque action d’un utilisateur (clic, rollover etc) doit fournir un feedback en moins de 100ms. Recommandations d’optimisaitons sur https://web.dev/optimize-fid/

Indicateur #3 : la stabilité visuelle (CLS)

Le dernier Core Web Vital mesure la stabilité visuelle (CLS pour “Cumulative Layout Shift”). Il s’agit de vérifier la stabilité visuelle d’une page durant son temps de chargement. Il arrive régulièrement que des blocs de page se déplacent après un premier chargement, pour faire apparaître une publicité ou un autre contenu. Particulièrement désagréable sur mobile, il peut nous amener à cliquer sur une zone non désirée. Les robots de Google attribuent à chaque page visitée un score CLS compris entre 0 et 1. Obtenir un score inférieur à 0,1 devrait vous permettre d’optimiser efficacement votre SEO. Recommandations d’optimisation : https://web.dev/optimize-cls/

Comment mesurer les Core web Vitals ? 

Les outils classiques : Core web vitals tools

PageSpeed Insights

PageSpeed Insights fournit des suggestions d’optimisation page par page. Vous pouvez analyser vos pages, observer si les critères de notation Google sont respectés, et obtenir des pistes d’amélioration.   

Google Search Console

Le nouveau rapport « signaux web essentiels » de la Search Console permet d’identifier des groupes de pages qui nécessitent d’être améliorées.

Lighthouse

Très pratique et prisé des développeurs en passant directement par la console de Chrome, Lighthouse indique un score de performance de 0 à 100, en distinguant mobile de dekstop. 6 métriques sont mesurés, dont les Core Web Vitals. Sachant que le FID ne peut être mesuré qu’en conditions réelles car il implique une interaction d’un utilisateur, il est ici remplacé par le Total Blocking Time. 

CrUX

Le CrUX, pour Chrome User Experience Report, remonte les données d'utilisateurs réels directement depuis les sites en production.Il s’agit d’un dashboard personnalisé pour monitorer les Core Web Vitals d’un site web.

Limite des outils en ligne

Attention toutefois, les outils comme Lighthouse qui chargent des pages dans un environnement simulé ne peuvent pas mesurer certaines données, notamment les interactions utilisateurs (FID). Pour obtenir des données très fiables, il faut donc mesurer les données en local, notamment avec la librairie JS : https://github.com/GoogleChrome/web-vitals. Plus d’infos avec la documentation officielle : https://web.dev/vitals/

Extension chrome

Pour gagner du temps, une Extension chrome est également disponible en version beta, et fonctionne plutôt bien : https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma 

Ressources