Core Web Vitals : que sont-ils et comment pouvez-vous les tester ?

Dernière mise à jour le 17 septembre 2020

Quiconque gère un site Web sait à quel point il est important de le faire fonctionner aussi bien que possible. Les sites lents et mal construits ne parviennent pas à transmettre un sentiment de fiabilité et de crédibilité. L'internaute moyen doit ressentir cela avant de se sentir suffisamment à l'aise pour utiliser votre site. Afin de mieux vous aider, vous et les développeurs Web du monde entier, à améliorer leurs sites, Google a récemment publié Core Web Vitals. Il s'agit d'un nouveau programme qui fournit une série de mesures pour aider à déterminer la qualité et l'expérience utilisateur potentielle sur un site. Dans cet article, nous décomposerons les principales métriques, ou éléments vitaux du Web, et comment vous pouvez les tester pour déterminer l'état de votre site.

Quels sont les principaux Web Vitals ?

Lors de la détermination de la qualité du service fourni par un site, il y a quelques paramètres à examiner pour développer une image claire. Google l'a réduit pour le développeur Web moyen. Ils ont déterminé que trois paramètres sont les principaux composants par lesquels un site peut être évalué. Ces trois métriques sont Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

La plus grande peinture de contenu est une mesure de la vitesse de chargement de votre page Web. Il marque le point où le contenu principal de la page en question a été mesuré. Il s'agit de la mesure du temps nécessaire au chargement du plus grand bloc de texte (ou d'image) de votre page. En règle générale, vous souhaitez que la plus grande peinture de contenu de votre site ne prenne pas plus de 2,5 secondes à se charger. Certes, c'est un point à considérer lors de la conception web .

Le premier délai d'entrée mesure le comportement de votre site lorsque les utilisateurs interagissent avec la page. Cela implique des choses comme la réactivité. Chaque fois qu'un utilisateur clique sur votre page, le temps mis par le site Web pour répondre à ce clic est mesuré par le premier délai de saisie. Habituellement, tout ce qui est plus rapide que 100 ms est bon, mais après cela, vous voudrez apporter quelques améliorations.

Enfin, Cumulative Layout Shift mesure la stabilité des visuels sur votre page. Il s'agit d'une mesure quantifiable de la quantité de décalage de mise en page inattendu de la page. Pour chacune de ces trois mesures, vous voudrez atteindre le 75e centile ou mieux de tous les chargements de page. Cela serait considéré comme «passant» dans la mesure où ces mesures sont prises en compte.

Comment mesurer les Core Web Vitals ?

Nous avons établi que ces métriques peuvent être aussi importantes qu'une campagne SEO bien exécutée, alors comment sont-elles mesurées ? Comme Google considère les éléments vitaux du Web comme la colonne vertébrale de l'expérience utilisateur, ils se sont engagés à fournir des outils pour les mesurer. Vous trouverez ci-dessous trois façons de mesurer les performances de base de leur site Web.

Grâce au rapport sur l'expérience utilisateur de Chrome, Google recueille des expériences utilisateur réelles anonymisées pour chaque site Web essentiel. Ceci est utile car cela signifie que les applications externes n'ont pas besoin d'être configurées à l'avance. En fait, Google s'en est déjà occupé à l'avance. De plus, des outils comme PageSpeed ​​Insights fonctionnent sur la même plate-forme, ce qui signifie que vous pouvez commencer à les utiliser immédiatement.

Bien que cette méthode soit assez simple et nécessite peu d'interventions de votre part, l'analyse proposée par cette méthode n'est pas très détaillée. Il néglige, entre autres, l'inclusion de la télémétrie par page vue. Cela aiderait quelqu'un à diagnostiquer avec précision tout problème potentiel avec une page Web.

Utilisation de JavaScript

Alternativement, on peut utiliser JavaScript pour maîtriser les éléments vitaux du Web. La façon la plus simple de commencer est de simplement extraire l'entrée de JavaScript dans sa bibliothèque pour les éléments vitaux du Web. Cela fournit des API Web prêtes à l'emploi et précises. De plus, le Chrome Web Store propose une extension, appelée Web Vitals Chrome Extension , qui vous permet de créer des rapports sur chaque Web Vital sans avoir à écrire de code.

Enfin, on peut utiliser des outils de laboratoire pour mesurer chacun des principaux éléments vitaux du Web. Ceci est particulièrement utile pour ceux qui cherchent à se faire une idée des performances d'un site avant son lancement. Cela ne signifie pas, cependant, que les métriques de terrain peuvent être ignorées. L'expérience d'un utilisateur est affectée par une grande variété de facteurs. Les exemples incluent les conditions du réseau et les programmes supplémentaires qui peuvent être exécutés du côté de l'utilisateur. Par conséquent, il est dans votre intérêt de tirer parti des tests d'outils de terrain une fois que votre site est opérationnel. C'est un moyen simple de s'assurer que tout est en bon état.

Autres mesures à connaître

Bien que les éléments vitaux Web de base couverts soient les plus importants à prendre en compte, il existe d'autres mesures de qualité Web précieuses à prendre en compte. Toute amélioration des performances du site et de la satisfaction de vos clients vis-à-vis d'un site est souhaitable, après tout. Ces mesures aident souvent à affiner le diagnostic d'une page Web. Certaines d'entre elles incluent des mesures telles que Time to First Byte, qui est importante pour l'expérience de chargement des utilisateurs sur votre site, et Time to Interactive, qui est utile si vous souffrez d'un problème d'interactivité sur votre site. Les deux, bien qu'importants, ne sont pas mesurables sur le terrain et, par conséquent, ne bénéficient pas du même statut que les principaux éléments vitaux du Web.

Quoi de neuf avec Lighthouse 6.0 ?

Si vous souhaitez évaluer la qualité de votre site, l'un de ces outils qui peut vous aider à démarrer si vous recherchez un diagnostic rapide est Lighthouse. Ce programme d'audit est automatisé et il est disponible dans Chrome DevTools soit en tant qu'extension disponible via le Chrome Store, soit en tant que module de nœud et CLI.

La dernière version de Lighthouse intègre l'accent mis par Google sur les éléments vitaux du Web tels que FDI et CLS et fournit une évaluation des performances de votre site par rapport à ces mesures. Maintenant, le score de performance fourni par Lighthouse concernant votre site a été mis à jour pour inclure ces nouveaux modèles, ce qui signifie que l'ancien modèle pondéré a été adapté pour ressembler à ceci :

Ces nouveaux changements ont des effets tangibles sur les évaluations de performance des sites. Seulement 20 % des sites ont vu une amélioration de leurs notes d'évaluation, tandis qu'environ 50 % de tous les sites ont connu une baisse de cinq points ou plus de leurs notes avec la nouvelle échelle pondérée.

Outils de développement Chrome

Chrome DevTools, comme Lighthouse, a connu de nouveaux changements pour mieux servir les développeurs Web. Le principal de ces changements est la correction de l'onglet des problèmes, qui, dans les itérations précédentes, souffrait de problèmes fréquents et d'encombrement. De plus, le panneau de performances enregistre désormais le temps de blocage total en bas de la page après avoir enregistré vos performances de chargement. Cet outil mesure la durée pendant laquelle une page semble être fonctionnelle mais n'est pas réellement utilisable pour le moment en raison du blocage par JavaScript du fil principal, empêchant l'entrée de l'utilisateur d'être traitée par la page. Enfin, le tableau de bord Chrome UX décompose désormais les pages par contenu web vital, permettant aux utilisateurs de comparer les performances de leur site à celles de leurs concurrents, ainsi qu'à l'industrie dans son ensemble.

En bref, les Core Web Vitals sont des mesures de l'expérience utilisateur sur une page Web. Au fur et à mesure que les choses évoluent, il est probable qu'elles changent de manière mineure et significative. Au fur et à mesure que vous optimisez votre page Web, essayez de maintenir des éléments vitaux Web de base sains, et vous serez sûr de garder ceux qui visitent votre site satisfaits.