Visualiseur Core Web Vitals

Nous sommes fiers de présenter  le visualiseur Core Web Vitals.

Aujourd'hui, nous avons lancé le visualiseur Core Web Vitals gratuit sur le Chrome Web Store. 

Le visualiseur Core Web Vitals est une extension Chrome qui aide les utilisateurs à suivre et visualiser les Core Web Vitals d'une page. Ces métriques incluent le Largest Contentful Paint, le First Input Delay, le Cumulative Layout Shift, le First Contentful Paint, l 'Interaction to Next Paint et le Time to First Byte. L'extension crée une superposition qui montre à l'utilisateur quels éléments sont responsables de l'instabilité visuelle et quels événements causent un retard dans l'entrée. De plus, l'extension décompose les Core Web Vitals en leurs composants de base, permettant aux utilisateurs d'obtenir une compréhension plus détaillée de la performance d'une page. L'extension est disponible gratuitement sur le Chrome Web Store.

En tant que spécialiste Core Web Vitals, je passe beaucoup de temps à vérifier comment une page réagit et répond lorsque j'interagis avec elle.  Quel effet cela a-t-il sur les Core Web Vitals et comment les Core Web Vitals changent-ils 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 spécifique de la page quelles métriques réussissent ou échouent aux Core Web Vitals.  Mais pourquoi échouent-elles ?  C'est quelque chose que vous ne pouvez vraiment comprendre que lorsque vous interagissez avec la page.

Pour gagner un  temps considérable, j'ai décidé d'automatiser cette petite partie d'un long processus et de créer une extension Chrome qui fera une partie du travail fastidieux pour moi.  Le résultat est le visualiseur Core Web Vitals.  J'ai décidé de rendre cette extension disponible pour tout le monde.  Alors allez-y et découvrez-la sur le Chrome Web Store.

Que fait le visualiseur  Core Web Vitals ?

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

Ensuite, il créera une superposition qui visualisera toutes ces métriques. Cela vous dira quel élément est le Largest Contentful Paint,  quels éléments  causent une instabilité visuelle  et, si vous avez interagi avec la page, quel événement a causé le First Input Delay.

Enfin, lorsque vous cliquez sur l'une des métriques, le visualiseur Core Web Vitals  décomposera ces métriques en leurs composants les plus basiques.

Pourquoi ne pas utiliser Lighthouse ?

Essayez le visualiseur Core Web Vitals !

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