Que sont les Core Web Vitals ?

Les Core Web Vitals sont des indicateurs de la vitesse, de la réactivité et de la stabilité visuelle des pages de votre site Internet. À ce jour, Google prend en compte trois métriques principales des Core Web Vitals comme facteur de positionnement dans Google, dont certains ont évolué récemment.

Ces trois indicateurs sont :

• LCP (Largest Contentful Paint)

• INP (Interaction to Next Paint)

• CLS (Cumulative Layout Shift)

Voici la documentation officielle de Google sur le sujet : https://web.dev/articles/vitals?hl=fr

Comment mesurer les Core Web Vitals de vos pages Web ?

Il existe deux manières de mesurer vos Core Web Vitals :

La première consiste à utiliser ce qu'on nomme le CrUX report, qui se sert des utilisateurs avec Google Chrome pour mesurer les performances des sites internet à de nombreuses reprises. Ce rapport est très utile, car il permet d’analyser les performances des Core Web Vitals de votre site internet non pas uniquement à l’instant T, mais tout au long de sa vie.

Le CrUX report peut être consulté de plusieurs manières :

1. Dans votre Google Search Console, dans la section “Expérience”, “Core Web Vitals”.

2. Via le rapport en ligne Pagespeed Insights fourni par Google.

De quelle manière les Core Web Vitals impactent le SEO ?

La définition évoquée par John Mueller (expert SEO officiel de chez Google) sur un thread Reddit est que les Core Web Vitals sont des tie-breakers, que l'on peut traduire en français par “départageurs”.

Par exemple, si le site A et le site B ont des contenus du même niveau de pertinence et avec une autorité similaire sur un sujet, alors Google favorisera le site Internet qui a les meilleurs Core Web Vitals, surtout si l’écart est important.

Voici le thread Reddit avec la réponse de John Mueller.

De quelle manière Google interprète les Core Web Vitals ?

Étant donné que Google prend en compte les mesures des Core Web Vitals auprès d'un lot d'individus important qui viennent sur votre site Internet, en fonction de l'heure de la journée, de la santé de votre serveur et de la connexion des utilisateurs, les Core Web Vitals vont être très différents parfois d'un utilisateur à l'autre.

C'est pour cela que Google utilise une règle, celle du 75e percentile.

Voici un exemple de mesure pour comprendre comment cela fonctionne :

100 utilisateurs viennent sur votre site internet. Google va classer les performances de vos Core Web Vitals rencontrées par ces 100 personnes des plus performantes au moins performantes, puis regarder les performances de la 75ème meilleure mesure.

Ce sont ces performances qui vont être enregistrées et exploitées dans vos rapports CrUX. Cela permet de garantir qu'au moins les trois quarts des utilisateurs qui viennent sur votre site Internet ont au moins le score identifié lors des mesures.

Voici un exemple de cas problématique de mesure du LCP : Un cas problématique, par exemple, serait que 70 % de vos utilisateurs aient un LCP inférieur à 1 seconde, ce qui est un excellent score, mais que 30 % d'entre eux aient un LCP supérieur à 5 secondes. Ainsi, quand Google va effectuer la mesure du 75 %, il va mesurer un LCP à 5 secondes.

LCP, Largest Contentful Paint : la vitesse d’affichage

Largest Contentful Paint signifie, en français : temps d'affichage de l'élément le plus grand. Google mesure le temps que met l'élément le plus grand dans la zone d’affichage au chargement, au-dessus de la ligne de flottaison (visible sans scroller).

Si, par exemple, vous êtes sur un article de blog, il va souvent s'agir de votre image à la une. Sur une landing page, il peut s'agir d'un slider situé en haut de la page, ou d'une zone de texte.

Voici les seuils indiqués par Google :

Comment améliorer le LCP ?

Le LCP est un indicateur de la vitesse de chargement de votre site. Il permet de mesurer à quelle vitesse votre site est affiché à l’utilisateur. Il est impacté directement par son propre chargement, mais aussi toutes les étapes de chargement de la page qui le précèdent.

Les éléments que vous devez analyser pour améliorer votre LCP sont, dans l’ordre :

1. Le temps de réponse de votre serveur (TTFB).

2. Les ressources qui bloquent le chargement : Ressources, utiles ou non, qui vont se charger entre le TTFB et l’élément LCP.

3. Le temps de chargement de l’élément LCP lui-même.

Pour réduire la durée de l’ensemble de la chaîne, vous pouvez :

• Améliorer votre hébergement et/ou souscrire à un cache + CDN (personnellement j’utilise Cloudflare).

• Précharger via une balise preload l’item LCP, qui indique au navigateur de charger cette ressource en priorité au chargement de la page.

• Réduire les codes JS et CSS inutiles pour afficher la ligne de flottaison. En général, cela passe par le découpage de vos CSS et JS : un global qui contient tout le code, un mini fichier qui contient l’unique nécessaire à la zone directement visible au chargement.

Vous avez aussi la possibilité de mettre en place des “Early hints”, une méthode avancée qui va directement charger l’élément LCP depuis le serveur à l’instant même du premier octet. C’est une solution réalisable essentiellement grâce à des Workers sur Cloudflare.

Exemple de réussite en LCP

Si vous analysez le site internet sur lequel vous êtes en train de lire sur Pagespeed Insights, vous allez voir que le LCP varie de 2s à 2,7s, sans aucun système de cache à l’heure où j’écris ces lignes, pour un score Core Web Vitals de 96/100 ! J’ai récemment effectué une migration et désactivé CloudFlare et les early Hints. Une fois en place, je devrais revenir aux alentours de 100/100 avec un LCP inférieur à 2 secondes.

INP, Interaction to Next Paint : La Réactivité

L'INP est un indicateur qui mesure, depuis une page, le temps moyen nécessaire après une action d'utilisateur pour obtenir un rendu visuel. En résumé, il s'agit du temps de réaction de votre page web. C'est un indicateur de positionnement depuis 2024, qui est venu remplacer le FID (First Input Delay).

Si le 75ème percentile de votre INP dépasse les 200 ms, vous perdez alors le bénéfice du signal “page experience”.

Les conséquences d'un mauvais score INP sont, par exemple, ce que l'on appelle le "rage click". Lorsqu'un utilisateur clique une première fois sur un bouton, mais que rien ne se passe, il va parfois cliquer à de nombreuses reprises. Google détecte ce comportement.

Ce critère est essentiellement important sur mobile, étant donné que les processeurs des appareils portables sont moins performants que ceux des ordinateurs.

Comment améliorer le INP ?

Afin de s'assurer d'avoir un bon score INP, vous devez éviter les problèmes suivants :

• Avoir des scripts JavaScript trop longs (Long Tasks), qui prennent plus de 50ms à s’exécuter.

• Une surcharge de Javascript tiers : Pixels Facebook, Hotjar, et autres technologies qui consomment beaucoup de ressources du processeur de vos visiteurs.

• Un embouteillage : Un script lourd en cours de traitement qui empêche le lancement de l’action de l’utilisateur.

CLS, Cumulative Layout Shift : La Stabilité Visuelle

Le CLS mesure la stabilité visuelle de votre page. Contrairement aux deux autres indicateurs qui sont liés au temps, le CLS calcule la fréquence et l'ampleur des mouvements inattendus du contenu pendant la lecture.

Il peut s'agir, par exemple, du décalage de boutons d'action ou même de zones de texte au chargement de publicités et de pop-in, etc.

Au-delà d'être un facteur de positionnement en SEO, le CLS a un impact significatif sur l'expérience de l'utilisateur. Il favorise un taux de rebond important, qui est lui-même un autre facteur de positionnement du site internet sur Google. Par conséquent, un CLS important peut donc avoir des conséquences extrêmement négatives sur votre visibilité.

Comment améliorer le CLS ?

Contrairement au LCP et à l'INP qui demandent souvent d'optimiser le serveur ou le Javascript, le CLS est un problème d'intégration (HTML/CSS).

Voici les 3 règles d'or pour stabiliser votre layout :

1. Toujours définir les attributs de dimension (Width & Height) : Que ce soit pour les images, les vidéos ou les iframes, vous devez indiquer au navigateur la place que l'élément va prendre avant même qu'il ne soit chargé. Cela permet au navigateur de réserver un rectangle blanc de la bonne taille, évitant le décalage à l'apparition de l'image.

2. Réserver l'espace pour les contenus dynamiques (Pubs, modales, etc.) : Si vous chargez des bannières publicitaires ou des widgets dynamiques, forcez une taille minimale en CSS (min-height) sur le conteneur parent. Ainsi, si la pub ne se charge pas, l'espace reste vide mais ne bouge pas.

3. Gérer le chargement des polices (Webfonts) : Le texte invisible qui apparaît soudainement ou qui change de police peut modifier la taille des paragraphes et créer un décalage. Utilisez font-display: swap ou préchargez vos polices critiques pour minimiser ces mouvements.

Conclusion : Quel score viser avec mes Core Web Vitals ?

Il arrive que dans certains scénarios, à cause de dettes techniques importantes, les équipes techniques rencontrent des difficultés pour optimiser les scores des Core Web Vitals.

Il reste néanmoins extrêmement important pour la qualité de l'expérience de vos utilisateurs, vos performances SEO et également vos performances en termes de conversion. Car ce que Google recherche au travers de cela, c'est de fournir aux utilisateurs la meilleure expérience possible lorsqu'ils naviguent sur Internet.

C’est pour cela qu’au-delà du SEO, des bons scores Core Web Vitals sont souvent synonymes d'une amélioration de vos taux de conversion.

Cela demande parfois du travail, la refonte du code (refacto), ou l'utilisation de nouveaux services payants, comme par exemple Cloudflare, Early Hints, etc.

Si vous voulez l’avis d'un expert sur le sujet pour vous aider à avancer et à améliorer vos Core Web Vitals significativement, je serais ravi de venir soutenir vos équipes marketing et technique.