L'extension Web Vitals affiche désormais davantage d'informations de débogage pour vous aider à identifier les causes des problèmes liés aux Core Web Vitals.
Publié le 4 mai 2023
L'extension Web Vitals permet d'accéder facilement aux informations de diagnostic des Core Web Vitals pour aider les développeurs à mesurer et à résoudre les problèmes liés à ces métriques. Il complète les autres outils fournis par l'équipe Chrome pour aider les développeurs à améliorer l'expérience sur leurs sites Web.
Nous avons mis à jour l'extension pour fournir aux développeurs des informations de débogage supplémentaires afin de leur permettre de comprendre et de résoudre plus facilement leurs problèmes de performances.
Afficher des informations de débogage dans la console
L'extension Web Vitals propose depuis un certain temps une option de débogage "Journalisation de la console". Vous pouvez l'activer dans l'écran "Options" :
Avant cette dernière mise à niveau, les sorties de web-vitals library (qui sous-tend l'extension) étaient journalisées dans un objet JSON :
Vous pouviez ensuite développer cet objet pour obtenir tous les détails, et passer la souris sur des éléments tels que l'image LCP pour les mettre en surbrillance dans le panneau principal:
Cette solution était utile, mais le format de sortie n'était pas particulièrement convivial, et nous avons pensé que nous pouvions améliorer l'expérience des développeurs. Nous avons donc amélioré l'extension pour rendre les informations les plus importantes plus visibles, tout en incluant l'objet complet pour ceux qui souhaitent en savoir plus.
Nouvelles informations de débogage pour chaque métrique
Avec cette nouvelle version, nous avons ajouté de nouvelles informations de débogage dans un format plus lisible pour vous aider à trouver et à résoudre les problèmes. Des informations différentes sont fournies pour chacune des métriques, car elles sont toutes différentes.
Informations de débogage LCP
Pour la métrique Largest Contentful Paint (LCP), nous affichons à la fois l'élément et la répartition des quatre phases détaillées dans notre guide Optimiser le LCP :
La durée du LCP (2 876 millisecondes, soit environ 2,9 secondes) est mise en évidence en jaune, car elle se trouve dans la catégorie "Amélioration nécessaire".
Dans cet exemple, nous constatons que le Resource load time est le temps le plus long. Pour améliorer votre LCP, vous devez donc l'optimiser, par exemple en évitant de l'héberger sur un domaine distinct, ou en utilisant des images plus petites ou des formats plus efficaces. Dans ce cas, la vitesse est ralentie artificiellement pour illustrer le résultat. Web.dev est un site rapide 😀
Vous pouvez également passer la souris sur l'élément pour mettre en surbrillance l'image :
Vous pouvez également afficher l'élément dans le panneau "Éléments" en effectuant un clic droit dessus.
Ici, l'élément LCP est une image. Si vous pointez dessus dans la console à droite, il est également mis en surbrillance sur le site à gauche.
Informations de débogage CLS
Les changements qui contribuent à Cumulative Layout Shift (CLS) sont désormais répertoriés. Vous pouvez pointer dessus pour mettre en surbrillance l'élément concerné:
La capture d'écran ci-dessus montre deux décalages, le premier composé de deux éléments (lorsque l'image de la bannière est chargée et que le contenu en dessous est décalé vers le bas) et le second de quatre éléments (lorsque l'annonce dynamique est chargée et que la majeure partie de la page est décalée vers le bas).
Dans cette capture d'écran de la console de droite, l'élément h2 est survolé. Vous pouvez voir qu'il est mis en surbrillance sur le site de gauche.
Informations de débogage FID
Pour le First Input Delay (FID) (Délai d'entrée initial), nous affichons l'élément concerné (que vous pouvez à nouveau survoler pour le mettre en surbrillance sur la page) et le type d'interaction, ainsi que l'objet JSON complet comme d'habitude :
Informations de débogage INP
Nous avons ajouté deux journaux pour Interaction to Next Paint (INP):
- INP : interaction la plus longue
- Interactions : toutes les interactions
Métrique INP
Tout d'abord, nous mettons en surbrillance la métrique INP lorsqu'elle change :
Comme pour le LCP, l'extension décompose le temps d'INP en trois phases :
- Délai de réponse à l'entrée utilisateur
- Durée du traitement
- Délai de présentation
Cela vous permet de déterminer si l'événement a été lent en raison d'autres événements (input delay), car le gestionnaire d'événements lui-même était lent en raison de votre code (durée du traitement), du délai d'affichage post-traitement (délai de présentation) ou d'une combinaison de plusieurs de ces facteurs.
Interactions
L'entrée peut être lente en raison d'interactions précédentes bloquant le thread principal, ce qui entraîne un temps de latence d'entrée élevé. Pour cette raison, nous listons toutes les interactions dans un format semblable à celui de la journalisation INP:
Vous pouvez ainsi "tracer en direct" un site Web en interagissant avec lui et en voyant dans la console quelles interactions, dans quelles combinaisons, sont susceptibles de provoquer un problème d'INP.
Cela vous permet également d'identifier plusieurs interactions lentes, plutôt que la plus grande interaction INP, ce qui vous évite de vous sentir en boucle lorsque vous améliorez votre réactivité.
Filtrer les journaux de la console
Toutes ces informations supplémentaires, bien que utiles, peuvent être gênantes si vous effectuez d'autres développements sans rapport avec les Core Web Vitals ou si vous ne vous intéressez qu'à un seul Core Web Vital à ce moment-là.
Vous pouvez utiliser les options de filtrage de la console dans les outils de développement pour filtrer une partie ou la totalité des messages:
- Pour supprimer tous les messages d'extension, vous pouvez les désactiver dans les options ou utiliser le filtre
-Extension. - Pour n'examiner que le LCP, vous pouvez utiliser le filtre
Web Vitals Extension LCP. - Pour n'afficher que les entrées utilisateur et les interactions, vous pouvez utiliser le filtre
Web Vitals Extension -LCP -CLS -FID.
Nous essayons de limiter le nombre d'options de cette extension, mais n'hésitez pas à nous en faire part en enregistrant un problème GitHub si le filtrage des outils de développement ne vous suffit pas et que vous préférez des options ici.
Conclusion
Nous espérons que les nouvelles options de débogage de la dernière version de l'extension vous seront utiles et qu'elles vous permettront d'identifier et de résoudre plus facilement les problèmes liés aux métriques Core Web Vitals, et ainsi d'améliorer l'expérience utilisateur sur votre site Web.
N'oubliez pas que votre expérience sur votre ordinateur de développement peut ne pas être représentative de celle de vos utilisateurs réels. Consultez notre article de blog précédent expliquant comment afficher les données de champ CrUX de votre site dans l'extension pour évaluer l'adéquation de vos expériences avec vos utilisateurs.
Nous serions ravis de recevoir vos commentaires sur ces améliorations ou toute autre suggestion sur notre outil de suivi des problèmes GitHub.