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, Web Vitals peut vous aider à quantifier l'expérience utilisateur sur votre site et à identifier les opportunités d'amélioration.
Présentation
Cette initiative de Google regroupe 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 permettant de mesurer les performances et de générer des rapports les concernant. Certains développeurs maîtrisent l'utilisation de ces outils, tandis que d'autres trouvent que la multitude d'outils et de métriques est difficile à gérer.
Les propriétaires de sites ne doivent pas avoir à être des experts en performances pour comprendre la qualité de l'expérience qu'ils offrent à leurs utilisateurs. L'initiative "Signaux Web" vise à simplifier le paysage et à aider les sites à se concentrer sur les métriques les plus importantes : les Signaux Web essentiels.
Signaux Web essentiels
Les Signaux Web essentiels sont 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 apparaîtront dans tous les outils Google. Chacun des Signaux Web essentiels 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 centré sur l'utilisateur dans le monde réel.
Les métriques qui composent les Signaux Web essentiels évoluent au fil du temps. L'ensemble actuel pour 2020 se concentre sur trois aspects de l'expérience utilisateur (chargement, interactivité et stabilité visuelle) et inclut les métriques suivantes (et leurs seuils respectifs):
- Largest Contentful Paint (LCP): mesure les performances de chargement. Pour offrir une expérience utilisateur de qualité, le LCP doit apparaître dans les 2,5 secondes suivant le début du chargement de la page.
- FID (First Input Delay): mesure l'interactivité. Pour offrir une expérience utilisateur de qualité, le FID des pages doit être inférieur ou égal à 100 millisecondes.
- CLS (Cumulative Layout Shift): mesure la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS de 0.1. ou moins.
Pour chacune des métriques ci-dessus, pour vous assurer d'atteindre l'objectif recommandé pour la plupart de vos utilisateurs, le 75e centile des chargements de page est un bon seuil à mesurer, segmenté entre les appareils mobiles et les ordinateurs.
Les outils qui évaluent la conformité aux Signaux Web essentiels doivent envisager de passer une page si elle atteint les objectifs recommandés au 75e centile pour toutes les trois métriques ci-dessus.
Cycle de vie
Les métriques du canal Signaux Web essentiels passent par un cycle de vie composé de trois phases: expérimentale, en attente et stable.
Le tableau ci-dessous indique où se trouvent actuellement tous les Signaux Web essentiels dans leur cycle de vie:
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 signaux Web essentiels potentiels qui peuvent encore faire l'objet de modifications importantes en fonction des tests et des commentaires de la communauté.
- Les métriques en attente sont les futurs signaux Web essentiels qui ont passé l'étape des tests et des commentaires, et ont un calendrier bien défini pour devenir stable.
- Les métriques stables correspondent à l'ensemble actuel de signaux Web essentiels que Chrome considère comme essentiels pour offrir une expérience utilisateur de qualité.
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 que le FID (First Input Delay).
La phase expérimentale du cycle de vie des Signaux Web essentiels vise également à offrir une certaine flexibilité au 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 le feedback de la communauté est le plus important.
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 pendant cette phase pendant au moins six mois afin de laisser à l'écosystème le temps de s'adapter. Pour qu'une métrique puisse progresser au-delà de la phase d'attente, le seul obstacle qu'il reste à attendre la période de transition. 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 "Signaux Web essentiels" est finalisée, elle devient une métrique stable. Pour les métriques du canal "Signaux Web essentiels", cela signifie qu'elle devient une métrique "Signaux Web essentiels".
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 des Signaux Web essentiels stables ne changent pas plus d'une fois par an. Toute modification apportée à un Signal Web essentiel sera clairement annoncée dans la documentation officielle de la métrique, ainsi que dans son CHANGELOG. Les signaux Web essentiels sont également inclus dans toutes les évaluations.
Outils de mesure et de création de rapports sur les Signaux Web essentiels
Nous pensons que les Signaux Web essentiels sont essentiels à toutes les expériences Web. Par conséquent, elle s'engage à afficher ces métriques dans tous ses outils populaires. Les sections suivantes détaillent les outils compatibles avec les Signaux Web essentiels.
Outils de terrain pour mesurer les Signaux Web essentiels
Le rapport d'expérience utilisateur Chrome collecte des données de mesure utilisateur réelles et anonymisées pour chaque Signal Web essentiel. Ces données permettent aux propriétaires de sites d'évaluer rapidement leurs performances sans avoir à instrumenter manuellement les analyses sur leurs pages. Elles alimentent des outils tels que PageSpeed Insights et le rapport Signaux Web essentiels de la Search Console.
| LCP | FID | CLS | |
| Rapport d'expérience utilisateur Chrome | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (rapport Signaux Web essentiels) | ✔ | ✔ | ✔ |
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 avec précision 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 Signaux Web essentiels en JavaScript
Chacun des Signaux Web essentiels peut être mesuré en JavaScript à l'aide d'API Web standards.
Le moyen le plus simple de mesurer tous les signaux Web essentiels 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 manière dont elle est signalée par tous les outils Google répertoriés ci-dessus.
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 et 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 Signaux Web essentiels et de les envoyer à un point de terminaison d'analyse, l'étape suivante consiste à regrouper ces données et à générer des rapports afin de savoir si vos pages atteignent les seuils recommandés pour au moins 75% des visites.
Bien que certains fournisseurs de solutions d'analyse soient compatibles avec les métriques des Signaux Web essentiels, même ceux qui ne doivent pas inclure des fonctionnalités de base des métriques personnalisées qui vous permettent de mesurer les Signaux Web essentiels dans leur outil.
Le rapport "Signaux Web" en est un bon exemple. Il permet aux propriétaires de sites de mesurer leurs Signaux Web essentiels à l'aide de Google Analytics. Pour obtenir des conseils sur la mesure des signaux Web essentiels à l'aide d'autres outils d'analyse, consultez les bonnes pratiques pour mesurer les signaux Web dans ce domaine.
Vous pouvez également générer des rapports sur chacun des Signaux Web essentiels sans écrire de code à l'aide de l'extension Chrome Web Vitals. 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 être utile pour 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 via les API Web sous-jacentes peuvent également consulter ces guides sur les métriques pour en savoir plus sur l'implémentation:
Outils de l'atelier pour mesurer les Signaux Web essentiels
Bien que tous les Signaux Web essentiels soient avant tout des métriques de terrain, bon nombre d'entre eux sont également mesurables en laboratoire.
La mesure de l'atelier 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 aussi 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 signaux Web essentiels dans un environnement de laboratoire:
| LCP | FID | CLS | |
|---|---|---|---|
| Outils pour les développeurs Chrome | ✔ | ✘ (Utilisez TBT) | ✔ |
| Lighthouse | ✔ | ✘ (Utilisez TBT) | ✔ |
Bien que les mesures en laboratoire soient essentielles pour offrir des expériences de qualité, elles ne se substituent pas aux 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 Signaux Web essentiels peut être affecté par les interactions des utilisateurs. Seule la mesure du champ permet d'obtenir une vue d'ensemble précise.
Recommandations pour améliorer vos scores
Une fois que vous avez mesuré les Signaux Web essentiels et identifié les points à améliorer, l'étape suivante consiste à les optimiser. Les guides suivants proposent des recommandations spécifiques sur l'optimisation de vos pages pour chacun des Signaux Web essentiels:
Autres signaux Web
Les Signaux Web essentiels sont des métriques essentielles pour comprendre et offrir une expérience utilisateur de qualité, mais il en existe également d'autres.
Ces autres signaux Web servent souvent de métriques proxy ou supplémentaires pour les Signaux Web essentiels. Ils permettent de capturer une plus grande partie de l'expérience ou de 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. Elles sont toutes deux utiles pour diagnostiquer les problèmes liés au LCP (temps de réponse du serveur lent ou ressources qui bloquent le rendu, respectivement).
De même, les métriques telles que Total Blocking Time (TBT) et Time to Interactive (TTI) sont des métriques de test essentielles pour détecter et diagnostiquer les problèmes d'interactivité potentiels qui auront un impact sur le FID. Toutefois, ils ne font pas partie des Signaux Web essentiels définis, car ils ne sont pas mesurables sur les champs et ne reflètent pas non plus un résultat axé sur l'utilisateur.
Évolution des signaux Web
Les signaux Web et les Signaux Web essentiels sont 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 Signaux Web essentiels sont pertinents pour toutes les pages Web et présentés dans les outils Google correspondants. Les modifications apportées à ces métriques auront un impact étendu. Par conséquent, les développeurs doivent s'attendre à ce que les définitions et les seuils des Signaux Web essentiels soient stables, et que les mises à jour soient communiquées préalablement et que leur fréquence annuelle soit prévisible.
Les autres signaux Web sont souvent spécifiques à un contexte ou à un outil, et peuvent être plus expérimentaux que les Signaux Web essentiels. Par conséquent, leurs définitions et seuils peuvent changer plus fréquemment.
Pour tous les signaux Web, les modifications seront clairement documentées dans ce CHANGELOG public.