Optimiser 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’entreprise, spécialiste du marketing ou développeur, Web Vitals peut vous aider à quantifier l’expérience de votre site et à identifier les opportunités d’amélioration.
Web Vitals est une initiative de Google visant à fournir des conseils unifiés pour les signaux de qualité essentiels pour offrir une excellente expérience utilisateur sur le Web.
Google a fourni un certain nombre d’outils au fil des ans pour mesurer et rendre compte des performances. Certains développeurs sont des experts dans l’utilisation de ces outils, tandis que d’autres ont trouvé l’abondance d’outils et de métriques difficile à suivre. Les propriétaires de sites ne devraient pas avoir à être des gourous de la performance 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 mesures les plus importantes, les Core Web Vitals .
Core web vitals : LES BASES
Les Core Web Vitals sont le sous-ensemble de Web Vitals qui s’appliquent à toutes les pages Web, elles doivent être mesurés par tous les propriétaires de sites et seront affichés dans tous les outils Google. Chacun des Core Web Vitals représente une facette distincte de l’expérience utilisateur, est mesurable sur le terrain et reflète l’expérience du monde réel d’un résultat critique centré sur l’utilisateur .
Les métriques qui composent le Core Web Vitals évolueront au fil du temps. L’ensemble actuel pour 2020 se concentre sur trois aspects de l’expérience utilisateur à savoir : 1-chargement , 2-interactivité et 3-stabilité visuelle – et 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, LCP doit se produire dans les 2,5 secondes suivant le début du chargement de la page.
- First Input Delay (FID) : mesure l’ interactivité . Pour offrir une bonne expérience utilisateur, les pages doivent avoir un FID inférieur à 100 millisecondes .
- Cumulative Layout Shift (CLS) : mesure la stabilité visuelle . Pour offrir une bonne expérience utilisateur, les pages doivent conserver un CLS inférieur à 0,1.
Pour chacune des mesures ci-dessus, afin de vous assurer que vous atteignez la cible recommandée pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75e centile des chargements de page, segmenté entre les appareils mobiles et de bureau. Les outils qui évaluent la conformité de Core Web Vitals doivent prendre en compte le passage d’une page si elle atteint les objectifs recommandés au 75e centile pour les trois mesures ci-dessus.
Outils pour mesurer et rapporter Core Web Vitals
Google estime que les Core Web Vitals sont essentiels à toutes les expériences Web. En conséquence, il s’engage à faire apparaître ces métriques dans tous ses outils populaires . Les sections suivantes détaillent les outils qui prennent en charge Core Web Vitals.
Outils pour mesurer Core Web Vitals
Le rapport sur l’expérience utilisateur de Chrome collecte des données de mesure anonymes et réelles des utilisateurs pour chaque Core Web Vital. Ces données permettent aux propriétaires de sites d’évaluer rapidement leurs performances sans les obliger à instrumenter manuellement des analyses sur leurs pages, et alimentent des outils tels que PageSpeed Insights et le rapport Core Web Vitals de la Search Console .
Les données fournies par Chrome User Experience Report offrent un moyen rapide d’évaluer 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 avec précision, surveiller et réagir rapidement aux régressions. En conséquence, nous recommandons fortement aux sites de mettre en place leur propre surveillance des utilisateurs réels.
Mesurer les vitaux Web de base dans JavaScript
Chacun des Core Web Vitals peut être mesuré en JavaScript à l’aide d’API Web standard.
Le moyen le plus simple de mesurer tous les Core Web Vitals est d’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 d’une manière qui correspond exactement à la façon dont elles sont rapportées 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 (voir la documentation pour l’ utilisation complète et les détails de l’ API ):
Vous pouvez également créer des rapports sur chacun des Core Web Vitals 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 mesures et les afficher aux utilisateurs lorsqu’ils naviguent sur le Web. Cette extension peut être utile pour comprendre les performances de vos propres sites, des sites de vos concurrents et du Web en général.
Outils de laboratoire pour mesurer Core Web Vitals
Bien que tous les Core Web Vitals soient, avant tout, des mesures 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 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 principaux éléments vitaux du Web dans un environnement de laboratoire
Bien que la mesure en laboratoire soit un élément essentiel pour offrir de belles expériences, 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 de l’utilisateur, des conditions de son réseau, des autres processus pouvant être exécutés sur l’appareil et de la manière dont ils interagissent avec la page. En fait, chacune des métriques Core Web Vitals peut avoir son score 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
Une fois que vous avez mesuré les éléments essentiels du Web et identifié les domaines à améliorer, l’étape suivante consiste à optimiser. Les guides suivants proposent des recommandations spécifiques sur la façon d’optimiser vos pages pour chacun des Core Web Vitals:
Autres Web Vitals
Alors que les Core Web Vitals sont les mesures essentielles pour comprendre et offrir une excellente expérience utilisateur, il existe également d’autres mesures vitales.
Ces autres Web Vitals servent souvent de proxy ou de métriques supplémentaires pour les Core Web Vitals, pour aider à capturer une plus grande partie de l’expérience ou pour 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 vitaux de l’ expérience de chargement et sont tous deux utiles pour diagnostiquer les problèmes avec LCP (temps de réponse du serveur lent ou ressources bloquant le rendu , respectivement) .
De même, des mesures telles que le temps total de blocage (TBT) et le temps d’interactivité (TTI) sont des mesures de laboratoire qui sont essentielles pour détecter et diagnostiquer les problèmes d’ interactivité potentiels qui auront un impact sur le FID. Cependant, ils ne font pas partie de l’ensemble Core Web Vitals car ils ne sont pas mesurables sur le terrain et ne reflètent pas un résultat centré sur l’utilisateur .
Evolving Web Vitals
Web Vitals et Core Web Vitals représentent les meilleurs signaux disponibles dont disposent aujourd’hui les développeurs pour 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 pertinents pour toutes les pages Web et présentés dans les outils Google pertinents. Les changements apportés à ces paramètres auront un impact considérable; en tant que tels, 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 reçoivent un préavis et une cadence annuelle prévisible.
Les autres Web Vitals sont souvent spécifiques au contexte ou à un outil, et peuvent être plus expérimentaux que les Core Web Vitals. En tant que tels, leurs définitions et leurs seuils peuvent changer avec une plus grande fréquence.
