Core Web Vitals

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont des métriques créées par Google pour améliorer l'expérience utilisateur sur les sites web. La grande variété d'outils disponibles pour analyser la vitesse de chargement a été l'un des facteurs qui a poussé Google à unifier toutes ces métriques, afin de simplifier un peu la complexité qu'implique l'optimisation des temps de chargement. Cette initiative vise à nous faire nous concentrer sur ces « signaux de qualité » qui sont si importants pour atteindre une expérience utilisateur optimale.

Google résume en quelques mots sur quoi se concentrent les Core Web Vitals :

• ›

  Expérience de chargement

• ›

  Interactivité

• ›

  Stabilité visuelle du contenu de la page

Largest Contentful Paint ou LCP

Le LCP ou Largest Contentful Paint est une métrique qui nous indique le temps de chargement pour que le « plus grand » contenu visible par l'utilisateur soit disponible et utile. Autrement dit, Google dit que les éléments placés dans ce qu'on connaît comme « Above the Fold » doivent se charger rapidement et être lisibles, et donc être disponibles pour l'utilisateur afin qu'il puisse interagir avec eux.

Il faut préciser que les éléments qui apparaissent quand l'utilisateur clique sur l'écran ou fait défiler n'affectent pas le LCP. Le contenu le plus grand peut être un bloc de texte, une vidéo, une image, etc.

Classification du statut LCP selon les temps. Image © web.dev

Quel temps Google considère-t-il optimal ?

Comme on peut le voir sur le graphique, Google considère que le temps maximum pour charger le LCP et offrir une bonne expérience utilisateur est inférieur à 2,5 secondes. Il est important de noter que pendant le chargement, l'élément LCP peut changer.

Comment connaître le LCP d'une URL ?

Dans le navigateur Chrome lui-même, en lançant un audit Lighthouse, on a l'option de savoir ce que Google considère comme le plus grand contenu à charger. Voici comment :

Quels facteurs peuvent influencer le chargement du LCP ?

Plusieurs actions influencent le fait que le temps de chargement LCP soit plus élevé que prévu. Ces éléments ou actions sont :

• ›

  Réponse du serveur

• ›

  Requêtes à la base de données

• ›

  Réponses d'API qui prennent du temps à se résoudre

• ›

  CSS ou JS qui bloque le rendu

• ›

  Lenteur dans le chargement d'autres ressources

• ›

  Images non optimisées

• ›

  Etc.

First Input Delay ou FID

Le FID ou First Input Delay est une métrique qui indique combien de temps la page met à réagir quand l'utilisateur interagit avec l'un des éléments.

Métriques tirées de Pagespeed

Dans l'outil Pagespeed, que Google a mis à disposition de tout le monde il y a quelque temps, on peut voir la référence à cette métrique. Les valeurs considérées comme bonnes doivent être inférieures à 100 ms.

Classification du statut First Input Delay (FID) selon les temps. Image © web.dev

Les principales causes des problèmes avec cette métrique (FID) viennent de l'exécution du JavaScript, donc on devrait identifier quelle partie du code fait que la page met du temps à réagir à l'interaction. J'ai personnellement vécu ce problème avec des chargements JS publicitaires.

Cumulative Layout Shift ou CLS

Le Cumulative Layout Shift est une métrique qui fixe des limites au chargement des éléments qui modifient l'affichage à mesure qu'ils se chargent. On parle de fournir de la stabilité aux éléments à l'écran pour que la vue ne se décale pas à mesure que d'autres ressources se chargent.

Google considère (enfin, Google et chaque utilisateur) qu'il est très agaçant que, quand on a commencé à interagir avec une page (que ce soit pour lire, faire défiler, etc.), un élément qui se charge plus tard décale la position de l'utilisateur par rapport au contenu, le forçant à corriger en faisant défiler.

Cet exemple nous aide à mieux expliquer comment fonctionne cette métrique. Au début, on voit le contenu chargé sur la partie gauche. Quand Google parle de stabilité, il fait référence au chargement d'un troisième élément qui ne déplace pas ceux chargés précédemment. Comme on le voit sur l'image de droite, le chargement de la vidéo YouTube a décalé les deux blocs qui étaient chargés au début.

Pourquoi les Core Web Vitals sont-ils importants ?

Depuis qu'on coexiste avec les moteurs de recherche, et plus précisément avec Google, il a incorporé des obligations pour quiconque a un site et veut qu'il soit l'une des options dans les résultats de recherche.

Améliorer l'accessibilité depuis tous les appareils, favoriser la navigation sécurisée sous un protocole de sécurité, ou pénaliser les sites qui utilisaient de la publicité invasive (interstitiels), ont été certaines des batailles du géant tech.

Ces métriques sont des indicateurs que Google nous donne pour signaler quelles parties du site peuvent poser problème à l'utilisateur, mais... Cela veut-il dire qu'elles sont importantes ?

Qu'on comprenne les sites du point de vue « robots » ou du point de vue « utilisateurs », ces métriques sont des indicateurs que nos sites ne fonctionnent pas aussi bien qu'ils devraient. On a déjà vu dans plusieurs études à quel point le temps de chargement influence la conversion et la patience de l'utilisateur. Actuellement, ils n'influencent pas le positionnement, mais allons-nous ignorer ces métriques ?

Pour notre part, on va certainement les prendre en compte.

Les Core Web Vitals affectent-ils le positionnement ?

À ce jour, tout ce qu'on sait, c'est que les métriques pour améliorer l'expérience utilisateur deviennent de plus en plus importantes, et certaines sont déjà prises en compte dans les résultats de recherche. Dans l'article du 28 mai sur le blog de Google, il a été annoncé qu'en 2021, on s'attend à déployer une nouvelle Update pour incorporer plusieurs métriques liées à l'expérience utilisateur.

Il suffit de se rappeler comment ils ont géré le Mobile First Index et les avis préalables. Dans ce cas, en se référant à nouveau à l'article de mai, il prévient qu'il y aura une notification préalable d'au moins 6 mois, donc... Y aura-t-il une mise à jour d'ici la fin de l'année prochaine ?

Outils pour optimiser les Core Web Vitals

Maintenant qu'on a parlé de ce que sont les Core Web Vitals et de l'importance qu'ils auront dans les mois à venir, il est temps de commencer à travailler sur l'optimisation de ces métriques. Via différents outils, on pourra s'attaquer aux problèmes détectés et obtenir une amélioration des performances.

Lighthouse

Lighthouse est un outil open source puissant qu'on trouve dans Chrome. Via Lighthouse, on peut auditer notre site en lançant différents tests pour obtenir des résultats sur les défauts ou parties de la page qui doivent être optimisées. Parmi ces parties figurent les métriques Core Web Vitals.

Image tirée des résultats d'un audit Lighthouse

Page Speed Insights

Page Speed Insights est une autre option que Google nous fournit pour obtenir les données de performance de notre site. Cet outil nous montre même des graphiques des métriques les plus importantes et de leur statut. Page Speed Insights se base sur un rapport d'expérience utilisateur dont l'objectif est d'obtenir des données en comparaison avec d'autres sites.

Métriques offertes par Page Speed Insights

Chrome UX

Chrome User Experience Report est un ensemble de données que Google fournit sur le comportement des utilisateurs dans le monde via Chrome. Pour accéder à ces données, il faut utiliser Big Query, ainsi qu'avoir un compte Google Cloud.

Via Google Data Studio, ils ont facilité l'accès et ont presque tout préparé pour nous dans ce Dashboard

Chrome Dev Tools

On peut analyser les métriques Core Web Vitals non seulement avec Lighthouse ; si on plonge dans les outils développeur de Chrome, on peut arriver aux mêmes conclusions. Par exemple, dans l'onglet « Performance », si on fait un enregistrement ou un nouveau chargement, on peut obtenir des informations précieuses sur le comportement de notre URL.

Capture d'écran prise dans l'option Performance de Chrome Dev Tools

Web.Dev

Il y a toujours une façon plus simple de faire les choses, du moins quand il s'agit de connaître nos Core Web Vitals. Sur le site officiel, on a une page qui détaille chaque métrique et nous donne une explication de ce que c'est et des pratiques pour l'améliorer.

De plus, dans le Chrome Store, on a une extension qui nous donne ces informations en entrant dans chaque URL :

Avec une indication rouge ou verte, on peut voir le statut de notre URL par rapport à ces métriques :

Capture d'écran des résultats donnés par l'extension Web Vitals

Search Console

Search Console est un outil indispensable pour tout webmaster. Une fonctionnalité a été ajoutée qui nous aide à voir quelles URL ont des problèmes avec ces 3 métriques (LCP, FID et CLS). Dans le menu de gauche, on a l'option « Core Web Vitals ». Quand on choisit cette option, deux graphiques apparaissent montrant les résultats des URL par appareil. Si on choisit l'appareil (desktop ou mobile), on verra en détail quelles URL ont des problèmes.

Ne t'alarme pas si tu vois un grand nombre d'URL sur la droite ; c'est relativement normal, puisque les problèmes surviennent généralement par types de pages (par exemple les articles de blog) et travailler sur l'un d'eux nous apportera l'amélioration sur tous.

Conclusions

Cette tournée des Core Web Vitals vise à nous présenter des métriques qui prendront de plus en plus d'importance, et nous, qu'on soit SEO ou Webmasters, on va devoir vivre avec. Chez SEO Alive, on veut te recommander d'utiliser tous ces outils qu'on t'a fournis, qui t'aideront sans aucun doute à améliorer la performance WPO de ton site.

*Tu acceptes le défi d'améliorer la vitesse de ton site ? Lance un test avec n'importe lequel des outils qu'on a mentionnés et envoie-nous un message avec une capture d'écran. On te donnera un conseil pour l'améliorer totalement gratuitement ! *