L'optimisation de la qualité de l'expérience utilisateur est essentielle au succès à long terme de tout site Web. Que vous soyez propriétaire d'une entreprise, marketeur ou développeur, le rapport Core Web Vitals peut vous aider à quantifier l'expérience proposée sur votre site et à identifier des opportunités d'amélioration.
Présentation
Cette initiative de Google vise à regrouper les signaux de qualité essentiels pour offrir une expérience utilisateur de qualité sur le Web.
Au fil des ans, Google a fourni un certain nombre d'outils pour mesurer les performances et générer des rapports sur ces performances. Certains développeurs sont experts dans l'utilisation de ces outils, tandis que d'autres ont trouvé difficile de suivre l'abondance d'outils et de métriques.
Les propriétaires de sites ne devraient pas avoir à être des experts des performances pour comprendre la qualité de l'expérience qu'ils offrent à leurs utilisateurs. L'initiative Core Web Vitals vise à simplifier le paysage et à aider les sites à se concentrer sur les métriques les plus importantes : les Core Web Vitals.
Core Web Vitals
Les Core Web Vitals sont un sous-ensemble de signaux Web. Ils s'appliquent à toutes les pages Web, doivent être mesurés par tous les propriétaires de sites et s'affichent dans tous les outils Google. Chacune des métriques Core Web Vitals représente un aspect distinct de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat centré sur l'utilisateur essentiel.
Les métriques qui composent les métriques Core Web Vitals évoluent au fil du temps. Les objectifs actuels de 2020 se concentrent sur trois aspects de l'expérience utilisateur : le chargement, l'interactivité et la stabilité visuelle. Ils incluent les métriques suivantes (et leurs seuils respectifs) :
- Largest Contentful Paint (LCP): mesure les performances de chargement. Pour offrir une bonne expérience utilisateur, le LCP doit apparaître dans les 2,5 secondes suivant le début du chargement de la page.
- Interaction to Next Paint (INP): mesure l'interactivité. Pour offrir une expérience utilisateur de qualité, l'INP des pages doit être inférieur ou égal à 200 millisecondes.
- Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une expérience utilisateur de qualité, les pages doivent conserver un CLS de 0.1. ou moins.
Pour vous assurer d'atteindre l'objectif recommandé pour ces métriques pour la plupart de vos utilisateurs, le 75e centile des chargements de pages est un bon seuil à mesurer, segmenté selon les appareils mobiles et les ordinateurs.
Les outils qui évaluent la conformité avec les Core Web Vitals doivent tenir compte d'une page qui réussit si elle répond aux objectifs recommandés au 75e centile pour les trois métriques Core Web Vitals.
Cycle de vie
Les métriques du canal Core Web Vitals suivent un cycle de vie composé de trois phases: expérimentale, en attente et stable.
Chaque phase est conçue pour indiquer aux développeurs ce qu'ils doivent penser de chaque métrique:
- Les métriques expérimentales correspondent aux métriques Core Web Vitals potentielles qui font encore l'objet de changements importants en fonction des tests et des commentaires de la communauté.
- Les métriques en attente sont les futures Core Web Vitals qui ont franchi l'étape des tests et des commentaires et qui ont un calendrier bien défini pour devenir stables.
- Les métriques stables correspondent à l'ensemble actuel de métriques Core Web Vitals que Chrome considère comme essentielles pour une expérience utilisateur optimale.
Les Core Web Vitals se trouvent aux étapes suivantes du cycle de vie:
Expérimentation
Lorsqu'une métrique est initialement développée et entre dans l'écosystème, elle est considérée comme une métrique expérimentale.
L'objectif de la phase expérimentale est d'évaluer l'adéquation d'une métrique, d'abord en explorant le problème à résoudre et éventuellement d'itérer les métriques précédentes qui n'auraient pas pu être traitées. Par exemple, Interaction to Next Paint (INP) a été initialement développé en tant que métrique expérimentale pour résoudre les problèmes de performances d'exécution présents sur le Web de manière plus exhaustive qu'First Input Delay (FID).
La phase expérimentale du cycle de vie des métriques Core Web Vitals vise également à offrir de la flexibilité dans le développement d'une métrique en identifiant les bugs et même en explorant les modifications de sa définition initiale. C'est aussi à cette phase que les commentaires de la communauté sont les plus importants.
En attente
Lorsque l'équipe Chrome détermine qu'une métrique expérimentale a reçu suffisamment de commentaires et a prouvé son efficacité, elle devient une métrique en attente. Par exemple, en 2023, INP est passé de l'état expérimental à l'état "En attente" dans le but de supprimer le FID.
Dans cette phase, les métriques en attente sont conservées pendant au moins six mois afin de laisser à l'écosystème le temps de s'adapter. Les commentaires de la communauté restent un aspect important de cette phase, à mesure que de plus en plus de développeurs commencent à utiliser cette métrique.
Stable
Lorsqu'une métrique candidate Core Web Vitals est finalisée, elle devient une métrique stable. C'est à ce moment-là que la métrique peut devenir une métrique Core Web Vitals.
Les métriques stables sont activement prises en charge, et peuvent faire l'objet de corrections de bugs et de changements de définition. Les métriques Core Web Vitals stables ne changent pas plus d'une fois par an. Toute modification apportée à une métrique Core Web Vitals sera clairement indiquée dans la documentation officielle de la métrique, ainsi que dans son journal de modifications. Les métriques Core Web Vitals sont également incluses dans toutes les évaluations.
Outils de mesure et de reporting des Core Web Vitals
Google considère les métriques Core Web Vitals comme essentielles pour toutes les expériences Web. Par conséquent, l'entreprise s'engage à afficher ces métriques dans tous ses outils populaires. Les sections suivantes détaillent les outils compatibles avec les métriques Core Web Vitals.
Outils de terrain pour mesurer les Core Web Vitals
Le rapport sur l'expérience utilisateur Chrome collecte des données de mesure réelles et anonymisées pour chaque métrique Core Web Vitals. Ces données permettent aux propriétaires de sites d'évaluer rapidement leurs performances sans qu'ils aient à instrumenter manuellement les analyses sur leurs pages. Elles permettent également d'utiliser des outils tels que PageSpeed Insights et le rapport Core Web Vitals de la Search Console.
| LCP | INP | CLS | |
| Rapport d'expérience utilisateur Chrome | |||
| PageSpeed Insights | |||
| Search Console (rapport Core Web Vitals) |
Les données fournies par le rapport sur l'expérience utilisateur Chrome permettent d'évaluer rapidement les performances des sites. Cependant, elles ne fournissent pas les données télémétriques détaillées de chaque page vue, qui sont souvent nécessaires pour diagnostiquer et surveiller avec précision les régressions, et y réagir rapidement. C'est pourquoi nous recommandons vivement aux sites de configurer eux-mêmes leur surveillance des utilisateurs réels.
Mesurer les Core Web Vitals dans JavaScript
Chacune des métriques Core Web Vitals peut être mesurée en JavaScript à l'aide d'API Web standards.
Le moyen le plus simple de mesurer toutes les métriques Core Web Vitals consiste à utiliser la bibliothèque JavaScript web-vitals, un petit wrapper prêt pour la production autour des API Web sous-jacentes, qui mesure chaque métrique de manière à correspondre précisément à la façon dont elle est rapportée par tous les outils Google listés précédemment.
Avec la bibliothèque web-vitals, vous pouvez mesurer chaque métrique en appelant une seule fonction (consultez la documentation pour en savoir plus sur l'utilisation et l'API):
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Une fois que vous avez configuré votre site pour utiliser la bibliothèque web-vitals afin de mesurer vos données Core Web Vitals et de les envoyer à un point de terminaison d'analyse, l'étape suivante consiste à regrouper ces données et à générer des rapports les concernant pour voir si vos pages atteignent les seuils recommandés pour au moins 75% des visites de pages.
Même si certains fournisseurs de solutions d'analyse sont compatibles avec les métriques Core Web Vitals, même ceux qui ne doivent pas inclure de fonctionnalités de base des métriques personnalisées vous permettant de mesurer les Core Web Vitals dans leur outil.
Le rapport Core Web Vitals est un bon exemple. Il permet aux propriétaires de sites de mesurer leurs Core Web Vitals à l'aide de Google Analytics. Pour savoir comment mesurer les Core Web Vitals à l'aide d'autres outils d'analyse, consultez Bonnes pratiques pour mesurer les Core Web Vitals sur le terrain.
L'extension Chrome Web Vitals vous permet également de créer des rapports sur chacune des métriques Core Web Vitals sans avoir à écrire de code. Cette extension utilise la bibliothèque web-vitals pour mesurer chacune de ces métriques et les présenter aux utilisateurs lorsqu'ils naviguent sur le Web.
Cette extension peut s'avérer utile pour comprendre les performances de vos propres sites, des sites de vos concurrents et du Web en général.
| LCP | INP | CLS | |
|---|---|---|---|
| web-vitals | |||
| Extension Web Vitals |
Les développeurs qui préfèrent mesurer ces métriques directement à l'aide des API Web sous-jacentes peuvent plutôt utiliser ces guides sur les métriques pour en savoir plus sur l'implémentation:
Pour obtenir des conseils supplémentaires sur la mesure de ces métriques à l'aide de services d'analyse populaires ou de vos propres outils d'analyse internes, consultez Bonnes pratiques pour mesurer les métriques Web Vitals sur le terrain.
Outils de l'atelier pour mesurer les Core Web Vitals
Bien que les métriques Core Web Vitals soient avant tout des métriques réelles, la plupart d'entre elles sont également mesurables en laboratoire.
La mesure en laboratoire est le meilleur moyen de tester les performances des fonctionnalités pendant le développement, avant qu'elles ne soient mises à la disposition des utilisateurs. C'est également le meilleur moyen de détecter les régressions de performances avant qu'elles ne se produisent.
Les outils suivants peuvent être utilisés pour mesurer les Core Web Vitals dans un environnement de laboratoire:
| LCP | INP | CLS | |
|---|---|---|---|
| Outils pour les développeurs Chrome | (utilisez TBT à la place) | ||
| Phare | (utilisez TBT à la place) |
Bien que les mesures en laboratoire soient essentielles pour offrir une expérience de qualité, elles ne remplacent pas les mesures sur le terrain.
Les performances d'un site peuvent varier considérablement en fonction des fonctionnalités de l'appareil de l'utilisateur, de l'état du réseau, des autres processus pouvant s'exécuter sur l'appareil et de la manière dont il interagit avec la page. En fait, le score de chacune des métriques Core Web Vitals peut être affecté par l'interaction de l'utilisateur. Seule la mesure sur le terrain permet de capturer avec précision un aperçu complet.
Recommandations pour améliorer vos scores
Les guides suivants proposent des recommandations spécifiques sur la manière d'optimiser vos pages pour chacune des métriques Core Web Vitals:
Autres Web Vitals
Si les métriques Core Web Vitals sont des métriques essentielles pour comprendre et offrir une expérience utilisateur de qualité, il existe d'autres métriques à l'appui.
Ces autres métriques peuvent servir de proxy ou de complément aux trois Core Web Vitals afin de capturer une plus grande partie de l'expérience ou de faciliter le diagnostic d'un problème spécifique.
Par exemple, les métriques Time to First Byte (TTFB) et First Contentful Paint (FCP) sont deux aspects essentiels de l'expérience de chargement. Elles sont toutes deux utiles pour diagnostiquer les problèmes liés au LCP (temps de réponse du serveur ou ressources bloquant l'affichage, respectivement).
De même, une métrique telle que Total Blocking Time (TBT) est une métrique expérimentale qui s'avère essentielle pour détecter et diagnostiquer les éventuels problèmes d'interactivité susceptibles d'avoir un impact sur l'INP. Toutefois, elles ne font pas partie de l'ensemble des Core Web Vitals, car elles ne sont pas mesurables sur le terrain et ne reflètent pas un résultat axé sur l'utilisateur.
Modifications apportées aux métriques Web Vitals
Les signaux Web et Core Web Vitals représentent les meilleurs signaux dont disposent actuellement les développeurs pour mesurer la qualité de l'expérience sur le Web. Toutefois, ces signaux ne sont pas parfaits et les futures améliorations ou ajouts sont à prévoir.
Les métriques Core Web Vitals sont pertinentes pour toutes les pages Web et présentées dans les outils Google pertinents. Les modifications apportées à ces métriques auront un impact étendu. Les développeurs doivent donc s'attendre à ce que les définitions et les seuils des métriques Core Web Vitals soient stables, et que les mises à jour soient prévenues à l'avance et suivent un rythme annuel prévisible.
Les autres signaux Web sont souvent spécifiques à un contexte ou à un outil, et peuvent être plus expérimentaux que les Core Web Vitals. Par conséquent, leurs définitions et seuils peuvent changer plus fréquemment.
Pour toutes les métriques Web Vitals, les modifications seront clairement documentées dans ce CHANGELOG public.