Core Web Vitals Visualizer : Extension Chrome gratuite pour déboguer les CWV

Une extension Chrome gratuite pour déboguer les Core Web Vitals

Le Core Web Vitals Visualizer est une extension Chrome gratuite que j'ai conçue pour déboguer les Core Web Vitals sans ouvrir DevTools. Elle crée une superposition en temps réel sur n'importe quelle page, vous montrant exactement quels éléments affectent vos LCP, CLS et INP. Plus de 14 000 développeurs l'utilisent.

Dernière révision par Arjen Karel en mars 2026

En tant que spécialiste des Core Web Vitals, je passe beaucoup de temps à vérifier comment une page réagit et répond lorsque j'interagis avec elle. Qu'est-ce que cela fait aux Core Web Vitals et comment les métriques changent-elles lorsque je passe à l'émulation mobile ou que je désactive la mise en cache du navigateur ?

Bien sûr, j'utilise le suivi RUM. Cela me dit au niveau de la page quelles métriques réussissent et échouent. Mais pourquoi échouent-elles ? C'est quelque chose que vous ne pouvez vraiment découvrir qu'en interagissant avec la page.

Pour m'épargner beaucoup de temps, j'ai décidé d'automatiser une petite partie d'un long processus et de créer une extension Chrome qui fait une partie du travail fastidieux pour moi. Le résultat est le Core Web Vitals Visualizer. J'ai décidé de le rendre disponible pour tout le monde, alors allez-y et découvrez-le sur le Chrome Web Store.

Que fait le Core Web Vitals Visualizer ?

Tout d'abord, il enregistre les Core Web Vitals en fonction de votre interaction avec la page. Il suit le Largest Contentful Paint, l'Interaction to Next Paint, le Cumulative Layout Shift, le First Contentful Paint et le Time to First Byte.

Ensuite, il crée une superposition qui visualise toutes ces métriques. Cela vous indique quel élément est le Largest Contentful Paint, quels éléments causent l'instabilité visuelle et, si vous avez interagi avec la page, quel événement a causé le pire délai d'entrée.

Lorsque vous cliquez sur l'une des métriques, le Core Web Vitals Visualizer les décompose en leurs composants de base. Pour le LCP, cela signifie que vous voyez le délai de chargement de la ressource, la durée de chargement et le délai de rendu de l'élément. Pour l'INP, vous obtenez le délai d'entrée, le temps de traitement et le délai de présentation.

Pourquoi ne pas utiliser Lighthouse ?

On me pose souvent cette question. Ma réponse est toujours : "Je n'ai jamais dit que je n'utilisais pas Lighthouse" (bien que je n'utilise pas Lighthouse si souvent). Lighthouse est un excellent outil et vous devriez vous familiariser avec lui.

Mais il existe des différences importantes. Lighthouse est un test en laboratoire et les données peuvent ne pas être représentatives de la vie réelle. C'est pourquoi mon extension utilise les données réelles de votre navigateur. Lighthouse ne vous donne pas non plus de véritables résultats d'interaction. Il ne peut pas mesurer l'INP car il n'y a pas d'utilisateur réel interagissant avec la page. Il utilise plutôt le Total Blocking Time comme indicateur. Mon extension visualise le CLS réel au fur et à mesure qu'il se produit, et décompose le LCP et l'INP en leurs sous-parties afin que vous puissiez voir exactement où passe le temps.

Qu'en est-il de l'extension Web Vitals de Google ?

Google a déprécié son extension Chrome Web Vitals en janvier 2025. Ils recommandent désormais d'utiliser le panneau Performances de DevTools à la place. DevTools est puissant, mais parfois vous voulez juste une superposition rapide sans ouvrir une session de profilage complète. C'est exactement ce que fait le Core Web Vitals Visualizer. Il fournit également les décompositions des sous-parties de métriques que DevTools ne montre pas dans une vue unique.

Installez le Core Web Vitals Visualizer

Rendez-vous sur le Chrome Web Store et installez le Core Web Vitals Visualizer. Et peut-être, si vous l'aimez, laissez un avis. J'apprécierais cela.