Publié le 4 mai 2020
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, responsable marketing ou développeur, le rapport Core Web Vitals peut vous aider à quantifier l'expérience proposée par votre site et à identifier des opportunités d'amélioration.
Présentation
Web Vitals est une initiative de Google visant à fournir des conseils unifiés concernant des signaux de qualité, essentiels pour proposer une expérience utilisateur optimale sur le Web.
Au fil des ans, Google a fourni un certain nombre d'outils pour mesurer et générer des rapports sur les performances. Certains développeurs sont des experts dans l'utilisation de ces outils, tandis que d'autres ont du mal à suivre l'abondance d'outils et de métriques.
Les propriétaires de sites n'ont pas besoin d'être des experts en performances pour comprendre la qualité de l'expérience qu'ils proposent à leurs utilisateurs. L'initiative Web Vitals vise à simplifier le paysage et à aider les sites à se concentrer sur les métriques les plus importantes, à savoir les Core Web Vitals.
Core Web Vitals
Les Core Web Vitals constituent un sous-ensemble de signaux Web qui s'appliquent à toutes les pages Web. Ils doivent être mesurés par tous les propriétaires de sites et s'afficheront dans tous les outils Google. Chacune des métriques Core Web Vitals représente une facette distincte de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat critique axé sur l'utilisateur.
Les métriques qui constituent les Core Web Vitals évolueront 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. Il comprend 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 se produire dans les 2,5 secondes à compter du début du chargement de la page.
- Interaction to Next Paint (INP) : mesure l'interactivité. Afin d'offrir une bonne expérience utilisateur, les pages doivent avoir un INP de 200 millisecondes ou moins.
- 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 la cible recommandée pour ces métriques pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75e centile des chargements de pages, segmenté par appareil mobile et ordinateur.
Les outils d'évaluation de la conformité des Core Web Vitals doivent tenir compte de l'efficacité d'une page si elle atteint les cibles recommandées au 75e centile pour les trois métriques Core Web Vitals.
Cycle de vie
Les métriques du canal Core Web Vitals passent par un cycle de vie composé de trois phases: expérimentale, en attente et stable.
Chaque phase est conçue pour indiquer aux développeurs comment ils doivent penser à chaque métrique :
- Les métriques expérimentales sont des Core Web Vitals potentiels qui sont peut-être encore en train de subir des 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 passé l'étape de test et de commentaires, et dont la date de stabilisation est bien définie.
- Les métriques stables sont l'ensemble actuel de Core Web Vitals que Chrome considère comme essentiel pour une expérience utilisateur de qualité.
Les métriques Core Web Vitals se trouvent aux étapes suivantes du cycle de vie :
Expérimentation
Lorsqu'une métrique est initialement développée et intégrée 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, en explorant d'abord le problème à résoudre, puis en effectuant éventuellement une itération sur les métriques précédentes qui n'ont peut-être pas été résolues. Par exemple, l'Interaction to Next Paint (INP) a été initialement développée 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 complète que le First Input Delay (FID).
La phase expérimentale du cycle de vie des métriques Core Web Vitals vise également à offrir une certaine flexibilité dans le développement d'une métrique en identifiant les bugs et même en explorant les modifications apportées à sa définition initiale. C'est également la phase au cours de 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. Par exemple, en 2023, INP est passé de l'état expérimental à l'état "En attente" dans l'intention de supprimer FID à terme.
Les métriques en attente sont conservées dans cette phase pendant au moins six mois pour laisser le temps à l'écosystème de s'adapter. Les commentaires de la communauté restent un aspect important de cette phase, car 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 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 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 communiqué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 estime que les Core Web Vitals sont essentiels pour toutes les expériences Web. Par conséquent, il 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 sur le terrain pour mesurer les Core Web Vitals
Le rapport sur l'expérience utilisateur Chrome collecte des données de mesure utilisateur 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 avoir à instrumenter manuellement les données analytiques sur leurs pages. Elles alimentent également des outils tels que Chrome DevTools, PageSpeed Insights et le rapport Core Web Vitals de la Search Console.
| LCP | INP | CLS | |
| Rapport sur l'expérience utilisateur de Chrome | |||
| Outils pour les développeurs 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 des sites, mais elles ne fournissent pas la télémétrie détaillée par page vue qui est souvent nécessaire pour diagnostiquer, surveiller et réagir rapidement aux régressions. Par conséquent, nous recommandons vivement aux sites de configurer leur propre surveillance des utilisateurs réels.
Mesurer les Core Web Vitals en 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 prêt à la production autour des API Web sous-jacentes qui mesure chaque métrique de manière à correspondre précisément à la façon dont elles sont signalées 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 les 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 les données Core Web Vitals et de les envoyer à un point de terminaison d'analyse, l'étape suivante consiste à agréger ces données et à créer des rapports les concernant afin de voir si vos pages atteignent les seuils recommandés pour au moins 75% des visites de pages.
Certains fournisseurs d'outils d'analyse sont compatibles avec les métriques Core Web Vitals, mais même ceux qui ne le sont pas devraient inclure des fonctionnalités de métriques personnalisées de base qui vous permettent de mesurer les Core Web Vitals dans leur outil.
Les développeurs qui préfèrent mesurer ces métriques directement à l'aide des API Web sous-jacentes peuvent utiliser ces guides de métriques pour obtenir des détails d'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 signaux Web dans le champ.
Outils de laboratoire pour mesurer les Core Web Vitals
Bien que toutes les métriques Core Web Vitals soient avant tout des métriques sur le terrain, beaucoup d'entre elles sont également mesurables en laboratoire.
Les mesures en laboratoire sont le meilleur moyen de tester les performances des fonctionnalités en cours de développement, avant qu'elles ne soient publiées auprès 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 métriques Core Web Vitals dans un environnement d'atelier:
| LCP | INP | CLS | |
|---|---|---|---|
| Outils pour les développeurs Chrome | |||
| Lighthouse | (utilisez plutôt TBT) |
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 grandement varier en fonction des capacités de l'appareil d'un utilisateur, de l'état de son réseau, des autres processus en cours d'exécution 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. Seules les mesures sur le terrain peuvent donner un aperçu complet et précis.
Recommandations pour améliorer vos scores
Les guides suivants proposent des recommandations spécifiques pour optimiser vos pages en fonction de chacune des métriques Core Web Vitals :
Il existe de nombreuses façons d'améliorer les métriques Core Web Vitals, et chaque approche présente des niveaux d'impact, de pertinence et de facilité d'utilisation différents pour chaque situation. Consultez Les moyens les plus efficaces d'améliorer les Core Web Vitals pour obtenir une courte liste des principales recommandations de l'équipe Chrome.
Autres Web Vitals
Bien que les Core Web Vitals soient les métriques essentielles pour comprendre et offrir une expérience utilisateur optimale, d'autres métriques complémentaires existent.
Ces autres métriques peuvent servir de proxy (ou de métriques supplémentaires pour les trois Core Web Vitals) pour capturer une plus grande partie de l'expérience ou pour diagnostiquer un problème spécifique.
Par exemple, les métriques Délai avant le premier octet (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 lents ou ressources bloquant l'affichage, respectivement).
De même, une métrique comme le Temps de blocage total (TBT) est une métrique de laboratoire. Elle est essentielle pour détecter et diagnostiquer les problèmes d'interactivité potentiels qui peuvent avoir une incidence sur l'INP. Cependant, 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 Web Vitals
Les métriques Web Vitals et Core Web Vitals représentent les meilleurs signaux disponibles pour les développeurs afin de mesurer la qualité de l'expérience sur le Web. Toutefois, ces signaux ne sont pas parfaits, et des améliorations ou des ajouts devraient être attendus à l'avenir.
Les Core Web Vitals sont pertinentes pour toutes les pages Web et sont présentées dans les outils Google pertinents. Les modifications apportées à ces métriques auront un impact considérable. Par conséquent, les développeurs doivent s'attendre à ce que les définitions et les seuils des Core Web Vitals soient stables, et que les mises à jour soient annoncées à l'avance et suivent une cadence annuelle prévisible.
Les autres métriques Web Vitals sont souvent spécifiques au contexte ou à l'outil, et peuvent être plus expérimentales que les métriques Core Web Vitals. Par conséquent, leurs définitions et leurs seuils peuvent changer plus fréquemment.
Pour tous les Web Vitals, les modifications seront clairement documentées dans ce JOURNAL DES MODIFICATIONS public.