Publié le 4 mai 2020
L'optimisation de la qualité de l'expérience utilisateur est indispensable à la réussite sur le long terme de tout site Web. Que vous soyez propriétaire d'une entreprise, marketeur ou développeur, appuyez-vous sur les signaux Web pour quantifier l'expérience de 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 offrent à 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 métriques Core Web Vitals.
Core Web Vitals
Les Core Web Vitals sont un sous-ensemble des signaux Web. Elles s'appliquent à toutes les pages Web, doivent être mesurées 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 axé sur l'utilisateur essentiel.
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é. Pour offrir une expérience utilisateur de qualité, les pages doivent avoir un INP 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 maintenir 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 qui évaluent la conformité aux Core Web Vitals doivent considérer qu'une page est conforme si elle atteint les objectifs recommandés au 75e percentile pour les trois métriques Core Web Vitals.
Cycle de vie
Les métriques du canal Core Web Vitals suivent un cycle de vie en 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 peuvent encore subir des modifications importantes 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 offrir une excellente expérience utilisateur.
Les métriques Core Web Vitals se trouvent aux étapes suivantes du cycle de vie:
Expérimentation
Lorsqu'une métrique est développée pour la première fois et qu'elle 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, puis éventuellement en itérant sur ce que les métriques précédentes n'ont peut-être pas réussi à résoudre. 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 Core Web Vitals vise également à offrir de la flexibilité dans le développement d'une métrique en identifiant les bugs et en explorant même les modifications apportées à sa définition initiale. C'est aussi 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 prouvé son efficacité, elle devient une métrique en attente. Par exemple, en 2023, l'INP est passé de l'état expérimental à l'état en attente, dans le but de supprimer à terme le FID.
Les métriques en attente sont conservées pendant au moins six mois dans cette phase 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 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 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. Tout changement apporté à une métrique Core Web Vitals sera clairement communiqué dans la documentation officielle de la métrique, ainsi que dans son journal des modifications. Les métriques Core Web Vitals sont également incluses dans toutes les évaluations.
Outils pour mesurer et générer des rapports sur les Core Web Vitals
Google considère que les métriques Core Web Vitals sont essentielles à toutes les expériences Web. C'est pourquoi elle s'engage à afficher ces métriques dans tous ses outils populaires. Les sections suivantes indiquent les outils compatibles avec les Core Web Vitals.
Outils sur le terrain pour mesurer les Core Web Vitals
Le rapport d'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 avoir à instrumenter manuellement les données analytiques sur leurs pages. Elles alimentent également des outils tels que les outils pour les développeurs Chrome, 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. C'est pourquoi nous vous recommandons vivement de configurer votre 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 obtenir des informations complètes 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 qu'il utilise la bibliothèque web-vitals afin de mesurer et d'envoyer vos données Core Web Vitals à un point de terminaison d'analyse, l'étape suivante consiste à agréger ces données et à créer des rapports pour voir si vos pages respectent 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 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 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.
Vous pouvez utiliser les outils suivants pour mesurer les Core Web Vitals dans un environnement de test:
| 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 varier considérablement en fonction des fonctionnalités de l'appareil de l'utilisateur, de l'état de son réseau, des autres processus pouvant s'exécuter sur l'appareil et de la façon 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. Seules les mesures sur le terrain peuvent fournir 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. Chaque approche présente des niveaux d'impact, de pertinence et de facilité d'utilisation différents en fonction de la 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 Time to First Byte (TTFB) (Délai avant le premier octet) et First Contentful Paint (FCP) (Premier élément affiché) sont toutes deux des aspects essentiels de l'expérience de chargement. Elles sont également utiles pour diagnostiquer les problèmes liés au LCP (temps de réponse du serveur lent ou ressources bloquant le rendu, respectivement).
De même, une métrique telle que le temps de blocage total (TBT) est essentielle pour détecter et diagnostiquer les problèmes potentiels d'interactivité pouvant affecter 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.