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
Les métriques Web Vitals sont une initiative de Google visant à fournir des conseils unifiés concernant 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 créer des rapports sur ces performances. Certains développeurs maîtrisent parfaitement l'utilisation de ces outils, tandis que d'autres trouvent qu'il est difficile de suivre l'abondance de ces outils et de ces 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 des métriques Core Web Vitals évolueront au fil du temps. L'ensemble actuel se concentre sur trois aspects de l'expérience utilisateur, à savoir le chargement, l'interactivité et la 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 se produire dans les 2,5 secondes suivant le 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 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 l'objectif recommandé pour ces métriques pour la plupart de vos utilisateurs, nous vous conseillons de mesurer le 75e centile de chargements de pages, segmenté en fonction des appareils mobiles et des ordinateurs.
Les outils d'évaluation de la conformité des Core Web Vitals doivent tenir compte de la réussite d'une page si elle atteint les cibles recommandées au 75e centile pour les trois métriques Core Web Vitals.
<ph type="x-smartling-placeholder">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.
<ph type="x-smartling-placeholder">Chaque phase vise à indiquer aux développeurs comment ils doivent réfléchir à 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 métriques Core Web Vitals qui ont passé l'étape des tests et des commentaires, et dont le délai de stabilité est clairement défini.
- Les métriques stables représentent l'ensemble actuel de Core Web Vitals que Chrome considère comme essentielles pour offrir une expérience utilisateur de qualité.
Les métriques Core Web Vitals se trouvent aux étapes suivantes de leur 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 exhaustive que le FID (First Input Delay).
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 lors de cette phase que 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 Core Web Vitals est finalisée, elle devient une métrique stable. C'est à ce moment-là que la métrique peut devenir une métrique Core Web Vitals.
Les métriques stables font l'objet d'une prise en charge active, 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.
<ph type="x-smartling-placeholder">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 pratiques pour mesurer les métriques 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 à effectuer manuellement des analyses sur leurs pages. Elles alimentent des outils tels que PageSpeed Insights et le rapport Core Web Vitals de la Search Console.
| LCP | INP | CLS | |
| <ph type="x-smartling-placeholder"></ph> Rapport sur l'expérience utilisateur Chrome | |||
| <ph type="x-smartling-placeholder"></ph> PageSpeed Insights | |||
| <ph type="x-smartling-placeholder"></ph> 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 les données télémétriques détaillées par page vue, souvent nécessaires pour diagnostiquer, surveiller et réagir rapidement en cas de régression. 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.
<ph type="x-smartling-placeholder">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 pour la production autour des API Web sous-jacentes. Il mesure chaque métrique d'une manière qui correspond exactement à la manière dont elle est signalée 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 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 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 à générer 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 de solutions d'analyse sont compatibles avec les métriques Core Web Vitals. Toutefois, même ceux qui ne le sont pas doivent inclure des fonctionnalités de métriques personnalisées de base qui vous permettent de mesurer les métriques Core Web Vitals dans leur outil.
Le rapport "Signaux Web" en est un exemple, qui permet aux propriétaires de sites de mesurer leurs Core Web Vitals à l'aide de Google Analytics. Pour obtenir des conseils sur la mesure des Core Web Vitals à l'aide d'autres outils d'analyse, consultez Bonnes pratiques pour mesurer les métriques Core Web Vitals sur le terrain.
Vous pouvez également générer des rapports sur chacun des Core Web Vitals sans avoir à é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 afficher aux utilisateurs lorsqu'ils naviguent sur le Web.
Cette extension peut vous aider à analyser les performances de vos propres sites, de ceux de vos concurrents et du Web en général.
| LCP | INP | CLS | |
|---|---|---|---|
| web-vitals | |||
| <ph type="x-smartling-placeholder"></ph> Extension Web Vitals |
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 Web Vitals sur le terrain.
Outils de l'atelier pour mesurer les métriques Core Web Vitals
Bien que tous les Core Web Vitals soient avant tout des métriques réelles, nombre d'entre eux sont également mesurables dans l'atelier.
La mesure en laboratoire 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 Core Web Vitals dans un environnement d'atelier:
| LCP | INP | CLS | |
|---|---|---|---|
| <ph type="x-smartling-placeholder"></ph> Outils pour les développeurs Chrome | (utilisez plutôt TBT) | ||
| <ph type="x-smartling-placeholder"></ph> Phare | (utilisez plutôt TBT) |
Si les mesures en laboratoire sont essentielles pour offrir des expériences exceptionnelles, elles ne remplacent pas les mesures sur le terrain.
Les performances d'un site peuvent considérablement 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 façon 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 permettent de capturer une image complète avec précision.
Recommandations pour améliorer vos scores
Les guides suivants proposent des recommandations spécifiques sur l'optimisation de vos pages pour chacun des Core Web Vitals:
Autres signaux Web
Si les métriques Core Web Vitals sont essentielles pour comprendre et offrir une expérience utilisateur de qualité, il existe d'autres métriques utiles.
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 de 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, il ne fait pas partie de l'ensemble des métriques Core Web Vitals, car ils ne sont pas mesurables sur le terrain et ils 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 dont disposent actuellement les développeurs pour mesurer la qualité de l'expérience sur le Web. Toutefois, ces signaux ne sont pas parfaits et il faut s'attendre à des améliorations ou des ajouts futurs.
Les métriques Core Web Vitals sont pertinentes pour toutes les pages Web et figurent dans les outils Google correspondants. Les modifications apportées à ces métriques auront un impact vaste. les développeurs doivent s'attendre à ce que les définitions et les seuils des métriques Core Web Vitals soient stables, et que les mises à jour soient notifiées à l'avance et suivent un rythme annuel prévisible.
Les autres signaux Web sont souvent spécifiques au contexte ou à l'outil, et peuvent être plus expérimentaux que les Core Web Vitals. Par conséquent, leur définition et leur seuil peuvent changer plus souvent.
Pour toutes les métriques Web Vitals, les modifications seront clairement documentées dans ce CHANGELOG public.