Core Web Vitals : C’est quoi ?

En 2020, Google présentait les Core Web Vitals. Avec ces 3 nouveaux indicateurs, Google montre quels sont les facteurs essentiels pour l’expérience utilisateur (UX). C’est-à-dire que pour être visible sur le moteur de recherche, on doit prendre encore plus en compte la satisfaction des utilisateurs.

‍

Un site web doit donc présenter non seulement un contenu pertinent, mais une bonne structure pour proposer une navigation fluide, sans faille. Cela peut passer par le temps de chargement, par l’instabilité et par le temps de réactivité de chaque page.

Ce n’est pas encore très clair ? On jette un coup d'œil sur chaque indicateur.

‍

La définition de Core Web Vitals

Le Core Web Vitals, ou signaux web essentiels, est un ensemble de 3 indicateurs qui ont comme objectif de mesurer la performance d’un site web et d’évaluer son expérience utilisateur. Ces trois indicateurs sont le LCP (Largest Contentful Paint), le FID (First Input Delay) et le CLS (Cumulative Layout Shift).

‍

Les indicateurs rejoignent donc d’autres facteurs déjà pris en compte par Google tel que le responsive, le certificat HTTPS, la sécurité et les menaces d’intrusions.

‍

‍

Les 3 indicateurs Core Web Vitals

‍

‍

Le Largest Contentful Paint (LCP)

‍

‍

Cet indicateur mesure le temps nécessaire pour qu’une page télécharge les éléments principaux visibles et utiles. Pour faire simple, il mesure la vitesse de chargement de la majorité du contenu de la page nécessaire à une interaction pertinente de la part de l’utilisateur. Pour Google, le LCP inférieur à 2,5 secondes est considéré comme bon.

‍

Pour optimiser des sites web et des applications, selon des études, il y a 3 limites de temps de réponse. Quand le temps de réponse d’une page est de 0,1 seconde, elle donne à l’utilisateur l’impression que le système réagit instantanément, tandis que 1 seconde est le temps limite pour que l’utilisateur ne perde pas le fil de sa pensée. Pour le temps de réponse dépassant les 10 secondes, les utilisateurs seront enclins à effectuer d’autres tâches en attendant la fin du chargement.

Qui n’a pas déjà vécu cette situation ? Lorsque l’on arrive sur un site internet qui ne se charge pas ou alors très lentement, en général, on va voir ailleurs.

‍

Le First Input Delay (FID)

‍

‍

Le FID, de son côté, mesure le temps nécessaire à une page pour répondre à la première interaction d’un utilisateur. En gros, cet indicateur mesure la réactivité de la page. Pour Google, le FID doit être inférieur à 100ms.

‍

Il n’est pas rare de voir un internaute cliquer sur un élément avant même la fin de chargement de la page (je suis certaine que même toi tu l’as déjà fait). Il peut se produire alors cette espèce de latence où l’on s’interroge sur la prise en compte de l’action.

• La page a-t-elle bien enregistré mon clic ?
• J’ai saisi mon nom mais rien ne s’affiche, ça charge encore ?

En conséquence, on interrompt simplement notre action ou alors on peste s’il faut tout recommencer. Voilà de quoi rendre l’UX chaotique.

‍

À noter que le FID va être remplacé par l’Interaction Next Paint (INP) dès mars 2024.

Ce nouvel indicateur des Core Web Vitals mesure le temps nécessaire à une page pour répondre à une interaction d’un utilisateur (clic ou tactile). Il s’agit là encore d’un indicateur de réactivité pour mesurer le temps écoulé entre action de l’internaute et réaction de la page.

Un bon INP doit être inférieur à 200 millisecondes.

‍

Le Cumulative Layout Shift (CLS)

‍

‍

Le CLS mesure tous les changements de mise en page qui se produisent durant le chargement. Il va donc mesurer la stabilité visuelle de la page. À savoir que le score donné par Google est de 0 à 1, mais un bon score CLS ne doit pas dépasser 0,1.

‍

Et disons le clairement, rien n’est plus agaçant que de commencer à lire un contenu et de voir un nouveau bloc apparaître en cours de route pour mieux décaler l’ensemble. La frustration peut encore être plus grande si on a entre-temps cliqué sur un élément et que l’instabilité de la page nous a fait commettre une erreur.

‍

Découvre notre Agence de création et refonte de site web

‍

Comment optimiser les Core Web Vitals ?

‍

Améliorer le LCP

Si tu as bien compris ce qu’était le Largest Contentful Paint, tu te doutes déjà que si ton site contient essentiellement du texte, il n’y aura pas grande chose à faire. L’amélioration portera surtout sur les sites composés d’animations, de contenus médias et de boutons d’interactions.

Tu peux déjà concentrer tes efforts :

• Sur le poids des éléments. Plus un élément est lourd plus il met du temps à charger.
• Sur ton hébergement.
• Sur les scripts inutiles.
• Sur des optimisations plus techniques telles que le CSS (qui rend ta mise en page jolie) et JavaScript.

‍

Améliorer le FID

Si ton site ne contient comme interaction que des actions de scroll tu devrais être tranquille. Mais si ce n’est pas le cas et que tu souhaites avoir un First Input Delay plus performant, voici quelques pistes à explorer avec l’aide d’un développeur :

• Alléger le flux d’instruction de la page. En gros diminuer les requêtes du code sur une même page.
• Optimiser le code.
• Utiliser un cache de navigateur (très pratique, cela permet au navigateur d’enregistrer certaines données de navigations, ainsi, quand on revient sur la page elle se charge plus vite).

‍

Améliorer le CLS

Pour continuer à être bien référencé par les robots de Google, il faut les aider à comprendre si la modification est bien du fait de l’interaction de l’internaute ou simplement du site. On peut aider l’utilisateur à patienter avec une petite animation (légère) ou un élément qui lui indique que la page charge encore avant qu’il ne se jette dessus et en ressorte frustré.

Voici quelques pistes d’amélioration du Cumulative Layout Shift :

• Placer les publicités dans un espace dédié plutôt que sur le contenu qui sera obligé de se décaler ou pire, rester derrière et devenir inaccessible en plus d’alourdir l’ensemble.
• Attribuer une dimension définie aux médias présents afin que le navigateur n’ait pas à la recalculer.
• Favoriser les transitions d’affichage pour plus de fluidité.

‍

Quels outils pour mesurer les Core Web Vitals ?

‍

Google Search Console

‍

‍

La Search Console propose le menu “Signaux Web Essentiels” où on peut avoir une vision d’ensemble des signaux vitaux de ton site web et recevoir des notifications quand un nouveau problème concernant les 3 indicateurs apparaît. L’expérience utilisateur est évaluée ici par groupe d’URL, par exemple le groupe d’URL de ton site web présente ici un score de LCP insuffisant sur mobile.

‍

Google PageSpeed Insights

‍

‍

Le PageSpeed Insight te permet de mesurer la performance de ton site web par page. Cet outil montre l’évaluation sur la version mobile et desktop, ensuite il fournit des suggestions d'optimisation pour améliorer les performances. Très pratique !

‍

Lighthouse

Cette extension Chrome, open source, fait passer des tests de barrage à ta page afin de déterminer la performance de ton site web, y compris les Core Web Vitals. Attention cependant, cet outil ne s’intéresse pas au FID.

‍

Web Vitals

Encore une extension Chrome qui te donne un rendu très minimaliste des performances d’un site internet pour tout checker en un clin d’œil.

‍

‍

Notre conclusion sur les Core Web Vitals

Les métriques prennent un rôle essentiel pour tous les acteurs de site web. Ceux qui se sont déjà penchés sur l’UX ne devraient pas avoir trop de soucis à se faire, quant aux autres, il va falloir dès à présent comprendre et surtout mettre en place les bonnes pratiques pour s’assurer de conserver une bonne place au sein du moteur de recherche de Google.

Heureusement, il existe bien des outils pour t’aider à prendre en compte ces mesures et t’assurer de plaire aux robots mais surtout, aux utilisateurs.

‍