Le rapport Core Web Vitals est une initiative de Google qui vise à regrouper les signaux de qualité des pages Web, qui sont essentiels pour offrir une expérience utilisateur de qualité. Il vise à simplifier la grande variété d'outils disponibles de mesure des performances et à aider les propriétaires de 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 métriques Web Vitals qui s'appliquent à toutes les pages Web. Elles doivent être mesurées par tous les propriétaires de sites et disponibles 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.
Les métriques qui composent les métriques Core Web Vitals évoluent au fil du temps. L'ensemble actuel se concentre sur trois aspects de l'expérience utilisateur: le chargement, l'interactivité et la stabilité visuelle. Elle inclut les métriques suivantes:
- Largest Contentful Paint (LCP): mesure les performances de chargement. Pour offrir une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page.
- First Input Delay (FID): mesure l'interactivité. Pour offrir une expérience utilisateur de qualité, le FID des pages doit être inférieur ou égal à 100 millisecondes.
- Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, vous devez conserver un CLS de 0.1. ou moins.
Pour chacune de ces métriques, afin de vous assurer d'atteindre l'objectif recommandé pour la plupart de vos utilisateurs, le 75e centile des chargements de pages est un bon seuil à mesurer, segmenté entre les appareils mobiles et les ordinateurs.
Les outils qui évaluent la conformité avec les Core Web Vitals doivent considérer qu'une page est conforme si elle répond aux objectifs recommandés au 75e centile pour chacune de ces trois métriques.
Lifecycle (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:
- LCP: stable
- FID : "Stable"
- CLS: stable
- Interaction to Next Paint (INP): en attente
Pour en savoir plus sur le développement d'INP, consultez Advancing Interaction to Next Paint.
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, en effectuant des itérations sur les métriques précédentes qui auraient pu échouer à résoudre. Par exemple, INP a été initialement développé en tant que métrique expérimentale pour résoudre les problèmes de performances d'exécution du 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 la phase à laquelle 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. Les métriques en attente sont conservées au cours de cette phase pendant au moins six mois afin de laisser le temps à l'écosystème 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 la 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 modifications de la 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.
Important: Les métriques stables ne sont pas nécessairement permanentes. Une métrique stable peut être supprimée et remplacée par une autre métrique qui résout le problème plus efficacement.
Mesurer les Core Web Vitals et générer des rapports
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, anonymisées pour chaque métrique Core Web Vitals. Ces données permettent aux propriétaires de sites d'évaluer rapidement leurs performances sans avoir à configurer manuellement les analyses pour leurs pages. Elles alimentent des outils tels que PageSpeed Insights et le rapport Core Web Vitals de la Search Console.
| LCP | FID | CLS | |
| Rapport d'expérience utilisateur Chrome | |||
| PageSpeed Insights | |||
| Search Console (rapport Core Web Vitals) |
Les données fournies par le rapport d'expérience utilisateur Chrome permettent d'évaluer rapidement les performances d'un site, mais elles ne fournissent pas la télémétrie détaillée par page vue, qui est souvent nécessaire pour diagnostiquer et surveiller avec précision les régressions, et y réagir rapidement. Par conséquent, nous vous recommandons vivement de configurer leur propre surveillance des utilisateurs réels sur les sites.
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. Il s'agit d'un petit wrapper d'API prêt pour la production qui mesure chaque métrique de manière à correspondre précisément à la manière dont les outils Google les rapportent.
Avec la bibliothèque web-vitals, mesurer chaque métrique est aussi simple que d'appeler une seule fonction (consultez la documentation pour en savoir plus sur l'utilisation complète de l'API):
import {onCLS, onFID, 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);
onFID(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.
Bien que certains fournisseurs de solutions d'analyse soient compatibles avec les métriques Core Web Vitals, même ceux qui ne doivent pas inclure de fonctionnalités de métriques personnalisées de base 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 obtenir des conseils sur la mesure des Core Web Vitals à l'aide d'autres outils d'analyse, consultez les bonnes pratiques pour mesurer les métriques 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 é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 vous aider à analyser les performances de vos propres sites, des sites de vos concurrents et du Web en général.
| LCP | FID | 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 de métriques pour les détails de 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 la page 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 Core Web Vitals soient avant tout des métriques de terrain, 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. 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 | FID | CLS | |
|---|---|---|---|
| Outils pour les développeurs Chrome | (utilisez TBT à la place) | ||
| Phare | (utilisez TBT à la place) |
Les outils tels que Lighthouse qui chargent des pages dans un environnement simulé sans utilisateur ne peuvent pas mesurer le FID, car ils ne comportent pas d'entrée utilisateur. Cependant, la métrique du temps de blocage total (TBT) est mesurable en laboratoire et constitue un excellent proxy pour le FID. Les optimisations de performances qui améliorent la navigation détaillée en laboratoire devraient améliorer le FID sur le terrain. Pour en savoir plus, consultez Recommandations pour améliorer vos scores.
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 capacité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 les interactions des utilisateurs. Seule la mesure sur le terrain permet de capturer avec précision la vue d'ensemble.
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
Bien que les Core Web Vitals constituent des métriques essentielles pour comprendre et offrir une expérience utilisateur de qualité, d'autres métriques essentielles sont également disponibles.
Elles servent souvent de métriques proxy ou supplémentaires pour les métriques Core Web Vitals. Elles permettent de capturer une plus grande partie de l'expérience ou de diagnostiquer un problème spécifique.
Par exemple, Time to First Byte (TTFB) et First Contentful Paint (FCP) sont deux aspects essentiels de l'expérience de chargement. Ils sont tous 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 comme le Total Blocking Time (TBT) est une métrique d'atelier essentielle à la détection et au diagnostic de problèmes d'interactivité potentiels pouvant avoir un impact sur le FID et l'INP. Cependant, il ne fait pas partie des métriques Core Web Vitals, car il n'est pas mesurable sur le terrain et ne reflète pas un résultat centré sur l'utilisateur.
Modifications apportées aux métriques Web Vitals
Les signaux Web et Core Web Vitals représentent les meilleurs signaux dont les développeurs disposent aujourd'hui 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 correspondants. Étant donné que les modifications apportées à ces métriques ont un impact étendu, les développeurs doivent s'attendre à ce que les définitions et les seuils des métriques Core Web Vitals soient stables, ainsi qu'avec une notification préalable et un calendrier prévisible des mises à jour.
Les autres métriques Web Vitals sont souvent spécifiques au contexte ou à l'outil, et peuvent être plus expérimentales 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 sont documentées dans ce journal des modifications public.