L'optimisation de la qualité de l'expérience utilisateur est la clé du 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 proposée sur votre site et à identifier des 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 sont experts dans l'utilisation de ces outils, tandis que d'autres ont trouvé difficile de suivre l'abondance d'outils et de métriques.
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.
Core Web Vitals
Les signaux Web essentiels sont le sous-ensemble des 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.
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 bonne expérience utilisateur, le LCP doit apparaître 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.
- 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, segmenté entre appareils mobiles et ordinateurs, constitue un bon seuil à mesurer.
Les outils d'évaluation de la conformité avec les Signaux Web essentiels doivent tenir compte de la réussite d'une page si elle répond aux cibles recommandées au 75e centile pour les trois métriques ci-dessus.
Cycle de vie
Les métriques du canal Signaux Web essentiels suivent 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 futures signaux Web essentiels qui auront passé l'étape de tests et de commentaires, et dont le calendrier est 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 de test 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 sur le Web de manière plus complète que le FID (First Input Delay).
La phase expérimentale du cycle de vie des Signaux Web essentiels vise également à offrir de la 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 aussi à cette phase que 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. Dans cette phase, les métriques en attente sont conservées pendant au moins six mois afin de laisser le temps à l'écosystème de s'adapter. Pour qu'une métrique puisse progresser au-delà de la phase "En attente", le seul obstacle est d'attendre la fin de 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 candidate "Signaux Web essentiels" est finalisée, elle devient stable. Pour les métriques figurant dans le 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 changements de définition. Les métriques des signaux Web essentiels stables ne changeront pas plus d'une fois par an. Toute modification apportée à un Signal Web essentiel sera clairement indiquée dans la documentation officielle de la métrique, ainsi que dans le CHANGELOG de la métrique. 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, l'entreprise 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 sur l'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 qu'ils aient à 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 sur l'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 l'ensemble des 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 façon 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 à agréger ces données et à créer des rapports afin de voir 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 de fonctionnalités de métriques personnalisées de base vous permettant de mesurer les Signaux Web essentiels dans leur outil.
Le rapport "Signaux Web" 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 sur le terrain.
Vous pouvez également créer 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 vous aider à analyser les performances de vos propres sites, des sites de vos concurrents et du Web en général.
| LCP | FID | CLS | |
|---|---|---|---|
| vitals Web | ✔ | ✔ | ✔ |
| 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 d'atelier pour mesurer les Signaux Web essentiels
Bien que tous les Signaux Web essentiels soient avant tout des métriques réelles, bon nombre d'entre eux sont également mesurables en laboratoire.
La mesure des ateliers 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 é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 signaux Web essentiels dans un environnement de laboratoire:
| LCP | FID | CLS | |
|---|---|---|---|
| Outils pour les développeurs Chrome | ✔ | ✘ (Utilisez plutôt TBT) | ✔ |
| 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 capacité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 manière dont il interagit avec la page. En fait, le score de chaque métrique "Signaux Web essentiels" peut être affecté par l'interaction utilisateur. 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 la manière d'optimiser vos pages pour chacun des Signaux Web essentiels:
Autres signaux Web
Si les Signaux Web essentiels sont des métriques essentielles pour comprendre et offrir une expérience utilisateur de qualité, d'autres métriques sont également essentielles.
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 ou ressources bloquant le rendu, respectivement).
De même, des métriques telles que Total Blocking Time (TBT) et Time to Interactive (TTI) sont des métriques expérimentales qui sont 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 de l'ensemble des signaux Web essentiels, car ils ne sont pas mesurables sur le terrain et ne reflètent pas 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 des améliorations ou des 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 averties à l'avance et suivent une fréquence annuelle 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.