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 automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.

Commentaires


Articles Similaires

Membres Public

Comment afficher des données sous forme de tableau dans la console Google Chrome ?

Aujourd'hui, je vais te montrer une petite astuce pour afficher les éléments HTML d'une page (balises Hx, meta tags, liens, etc.) sous forme de tableau, directement dans la console Chrome. Pour parvenir à ce résultat, je vais utiliser deux "utilitaires" bien pratiques : $$() et table(). Récupérer des données avec $$() Une fois

Comment afficher des données sous forme de tableau dans la console Google Chrome ?
Membres Public

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?

Est-ce que tu savais qu'il était possible, sur Google Chrome, de faire un screenshot d'une page web au complet sans passer par une extension ? Pour ma part, j'ai découvert ça il y a seulement quelques semaines et depuis je ne me sers plus du tout de l'extension que j'avais installée

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?
Membres Public

Comment créer et publier une extension Chrome ?

Ça faisait déjà un petit moment que je voulais créer une extension Chrome. Et bien... c'est désormais chose faite ! La semaine dernière, j'ai lancé Centuple. Centuple, c'est une petite extension gratuite qui permet d'afficher 100 résultats Google en un clic (ça marche sur n'importe quelle version du moteur de recherche)

Comment créer et publier une extension Chrome ?