Aller au contenu

Comment afficher les Core Web Vitals d'une page avec les Chrome DevTools ?

Antoine Brisset
Antoine Brisset
Temps de lecture : 1 min
Comment afficher les Core Web Vitals d'une page avec les Chrome DevTools ?

Table des matières

L'outil d'inspection de Google Chrome regorge de fonctionnalités intéressantes.

Pourtant, beaucoup d'entre elles sont cachées.

Par exemple, savais-tu qu'il était possible d'afficher les Core Web Vitals d'une page directement dans la fenêtre du navigateur ?

Personnellement, je me sers de ce raccourci quand je dois auditer rapidement un site, ou pour vérifier que les optimisations que j'ai effectuées ont produit leurs effets.

Voici comment faire :

  1. ouvrir les Chome DevTools ( ⌥ ⌘ I sur Mac / CTRL ⇧ I sur Windows)
  2. ouvrir le menu de commande ( ⌘ ⇧ P sur Mac / CTRL ⇧ P sur Windows)
  3. taper "Show Core Web Vitals overlay"

Un overlay va alors apparaitre en haut à droite. Il se mettra à jour à chaque changement de page.

Affichage des Core Web Vitals

Pour le masquer, il suffit de suivre les mêmes étapes mais en remplaçant "Show" par "Hide" à l'étape 3.

Bien entendu, je te conseille de ne pas te limiter aux données fournies par cet overlay pour tes analyses de webperf, puisqu'elles sont directement liées à ton navigateur / ta vitesse de connexion et ne reflètent donc pas l'expérience des autres utilisateurs.

Allez, une petite démo en guise de récap.

0:00
/
Afficher/masquer l'overlay
Chrome

Antoine Brisset Twitter

Consultant SEO depuis 2010. Je traque les clics inutiles et j'automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.


Articles Similaires

Membres Public

Une astuce pour gagner du temps sur Ereferer

Aujourd'hui, petite astuce rapide. Quand je me connecte sur Ereferer pour acheter un lien, je passe pas mal de temps à filtrer les sites pour afficher uniquement les spots susceptibles de m'intéresser. Une fois que j'ai la liste, j'aime bien prendre les

Une astuce pour gagner du temps sur Ereferer
Membres Public

Un snippet pour récupérer les mots-clés de la Search Console

Il y a quelques mois, je t'avais partagé un tuto sur les snippets Chrome. Tu te souviens ? Et bien cette semaine, justement, j'ai créé un snippet qui permet de récupérer les mots-clés affichés dans le rapport Performances de la Search Console. En fait, je trouvais ça

Un snippet pour récupérer les mots-clés de la Search Console
Membres Public

Trop de bookmarklets ? Utilise les snippets Chrome !

Au quotidien, j'utilise énormément les bookmarklets : vérification de balises meta, affichage du robots.txt, accès à la Google Search Console d'une page, etc. Le hic, c'est que j'en ai tellement, que je dois maintenant cliquer sur les deux petites flèches à droite

Trop de bookmarklets ? Utilise les snippets Chrome !