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'un établissement, responsable marketing ou développeur, Web Vitals peut vous aider à 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 experts dans l'utilisation de ces outils, tandis que d'autres ont du mal à suivre le rythme en raison de leur abondance et de celle des métriques.
Les propriétaires de sites ne devraient pas avoir à ê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 Core Web Vitals.
Core Web Vitals
Les Core Web Vitals correspondent au sous-ensemble des métriques Web Vitals qui s'appliquent à toutes les pages Web. Elles doivent être mesurées par tous les propriétaires de sites et seront visibles 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 centré sur l'utilisateur.
Les métriques qui composent 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) :
- LCP (Largest Contentful Paint) : mesure les performances de chargement. Pour proposer une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page.
- INP (Interaction to Next Paint) : mesure l'interactivité. Pour proposer une bonne expérience utilisateur, les pages doivent avoir un INP de 200 millisecondes ou moins.
- CLS (Cumulative Layout Shift) : mesure la stabilité visuelle. Pour proposer une bonne expérience utilisateur, les pages doivent maintenir un CLS de 0,1 ou moins.
Afin de vous assurer d'atteindre ces objectifs pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75e centile de vos chargements de page, segmentés entre appareils mobiles et ordinateurs.
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 centile pour les trois métriques Core Web Vitals.
Cycle de vie
Les métriques de suivi des Core Web Vitals passent par 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 considérer chaque métrique :
- Les métriques expérimentales sont des Core Web Vitals potentielles qui peuvent encore subir des modifications importantes en fonction des tests et des commentaires de la communauté.
- Les métriques en attente sont de futures Core Web Vitals qui ont passé l'étape de test et de commentaires, et dont la chronologie pour devenir stables est bien définie.
- Les métriques stables sont l'ensemble actuel de 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 :
Version expérimentale
Lorsqu'une métrique est développée et intégrée à 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 en itérant éventuellement sur ce que les métriques précédentes n'ont pas réussi à résoudre. Par exemple, l'INP (Interaction to Next Paint) a été initialement développé comme 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 FID (First Input Delay).
La phase expérimentale du cycle de vie des Core Web Vitals vise également à offrir une 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 également la phase où 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, l'INP est passé du statut expérimental au statut en attente en 2023 dans le but de retirer le 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 la métrique.
Stable
Lorsqu'une métrique candidate Core Web Vital est finalisée, elle devient une métrique stable. C'est à ce moment-là que la métrique peut devenir une Core Web Vital.
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 Core Web Vital sera clairement communiquée dans la documentation officielle de la métrique, ainsi que dans son journal des modifications. Les 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 essentielles 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écrivent les outils compatibles avec les Core Web Vitals.
Outils de terrain pour mesurer les Core Web Vitals
Le rapport sur l'expérience utilisateur de Chrome collecte des données de mesure anonymisées et réelles pour chaque Core Web Vital. Ces données permettent aux propriétaires de sites d'évaluer rapidement leurs performances sans avoir à instrumenter manuellement l'analyse 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 sur l'expérience utilisateur de 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 Core Web Vitals peut être mesurée en JavaScript à l'aide d'API Web standards.
Le moyen le plus simple de mesurer toutes les Core Web Vitals consiste à utiliser la bibliothèque JavaScript web-vitals, un wrapper petit et prêt pour la production autour des API Web sous-jacentes qui mesure chaque métrique d'une manière qui correspond 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, la mesure de chaque métrique peut être effectuée en appelant une seule fonction. Pour obtenir des informations complètes sur l'utilisation et l'API, consultez la documentation.
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 à générer des rapports pour voir si vos pages respectent les seuils recommandés pour au moins 75% des visites de pages.
Bien que certains fournisseurs d'analyses aient une prise en charge intégrée des métriques Core Web Vitals, même ceux qui n'en ont 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 informations 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 Web Vitals sur le terrain.
Outils de laboratoire pour mesurer les Core Web Vitals
Bien que toutes les Core Web Vitals soient avant tout des métriques de terrain, beaucoup 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 leur mise à 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 | |||
| Phare | (utiliser plutôt TBT) |
Bien que la mesure en laboratoire soit essentielle pour offrir des expériences optimales, elle ne remplace pas la mesure sur le terrain.
Les performances d'un site peuvent varier considérablement en fonction des capacités de l'appareil d'un utilisateur, des conditions de son réseau, des autres processus qui peuvent 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. Seule la mesure sur le terrain peut capturer avec précision l'image complète.
Recommandations pour améliorer vos scores
Les guides suivants proposent des recommandations spécifiques sur la façon d'optimiser vos pages pour chacune des Core Web Vitals :
Il existe de nombreuses façons d'améliorer les Core Web Vitals, et chaque approche présente des niveaux d'impact, de pertinence et de facilité d'utilisation différents pour chaque situation. Pour obtenir une courte liste des principales recommandations de l'équipe Chrome, consultez Les méthodes les plus efficaces pour améliorer les Core Web Vitals.
Autres Web Vitals
Bien que les Core Web Vitals soient les métriques essentielles pour comprendre et offrir une expérience utilisateur optimale, il existe d'autres métriques d'assistance.
Ces autres métriques peuvent servir de proxy ou de métriques supplémentaires pour les trois Core Web Vitals afin de capturer une plus grande partie de l'expérience ou d'aider à diagnostiquer 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 et sont utiles pour diagnostiquer les problèmes liés au LCP (temps de réponse du serveur lents ou ressources bloquant le rendu, respectivement).
De même, une métrique comme Total Blocking Time (TBT) est une métrique de laboratoire essentielle pour détecter et diagnostiquer les problèmes d'interactivité potentiels qui peuvent avoir un impact sur l'INP. Toutefois, elle ne fait pas partie de l'ensemble des Core Web Vitals, car elle n'est pas mesurable sur le terrain et ne reflète pas un résultat centré sur l'utilisateur.
Modifications apportées aux Web Vitals
Les Web Vitals et les Core Web Vitals représentent les meilleurs signaux disponibles pour les développeurs aujourd'hui afin de mesurer la qualité de l'expérience sur le Web, mais ces signaux ne sont pas parfaits et des améliorations ou des ajouts futurs sont à prévoir.
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 aient une cadence annuelle prévisible.
Les autres 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 leurs seuils peuvent changer plus fréquemment.
Pour toutes les Web Vitals, les modifications seront clairement documentées dans ce journal des modifications public CHANGELOG.