web vitals extension
v1.5.3
Une extension chromée pour mesurer les mesures pour une installation de site sain maintenant
Cette extension mesure les trois métriques de base du web vital d'une manière qui correspond à la façon dont ils sont mesurés par Chrome et signalés à d'autres outils Google (par exemple, rapport d'expérience utilisateur Chrome, Page Speed Insights, Search Console).
Il prend en charge tous les articles de base du Web et exploite la bibliothèque de vitesses Web sous le capot pour capturer:
Il soutient également les mesures de diagnostic:
Le Web Vitals Chrome Extenstion peut être installé à partir du Chrome Web Store.
Si vous recherchez une version plus de saignement, vous pouvez également installer la version de l'extension de Master.
Google Chrome
web-vitals-extension-master .chrome://extensions ).web-vitals-extension-master n'importe où sur la page pour l'importer (ne supprimez pas le dossier par la suite). 
L'insigne ambiant aide à vérifier si une page passant les seuils de base du Web vitaux.
Une fois installé, l'extension affichera une icône d'insigne d'état désactivé jusqu'à ce que vous naviguiez vers une URL. À ce stade, il mettra à jour le badge vers le vert, l'ambre ou le rouge selon que l'URL passe les seuils de métriques de base de Web Vitals.
Le badge a un certain nombre d'États:
Si une ou plusieurs mesures échouent, le badge animera les valeurs de ces mesures (cette animation peut être désactivée dans l'écran des options).
En cliquant sur l'icône du badge ambiant, vous permettra de percer dans les valeurs métriques individuelles. Dans ce mode, l'extension dira également si une métrique nécessite une action utilisateur.
Par exemple, l'interaction à la peinture suivante nécessite une véritable interaction (par exemple, cliquez / cliquez) avec la page et sera dans une Waiting for input... État jusqu'à ce que ce soit le cas. Nous vous recommandons de consulter la documentation Web.DEV pour LCP, CLS et INP pour comprendre le moment où les valeurs métriques se sont réglées.
La fenêtre contextuelle combine vos expériences locales de base Web Vitals avec les données des utilisateurs réels du terrain via l'API Chrome UX Report (CRUX). Cette intégration vous donne des informations contextuelles pour vous aider à comprendre à quel point vos expériences individuelles sont similaires aux autres utilisateurs de bureau sur la même page. Nous avons également ajouté une nouvelle option pour «comparer les expériences locales aux données du champ de téléphone» à la place, si nécessaire. Notez que les données Crux peuvent ne pas être disponibles pour certaines pages, auquel cas nous essayons de charger des données de champ pour l'origine dans son ensemble.
La superposition affiche un affichage de tête vers le haut (HUD) qui superpose votre page. Il est utile si vous avez besoin d'une vision persistante de vos principales métriques Web Vitals pendant le développement. Pour permettre la superposition:
Display HUD overlay et cliquez sur «Enregistrer»
La fonction de journalisation de la console de l'extension Web Vitals fournit une vue de diagnostic de toutes les mesures prises en charge. Pour activer les journaux de console:
Console logging et cliquez sur «Enregistrer»Web Vitals Pour filtrer les mesures inutiles, appliquez un signe moins au nom métrique. Par exemple, définissez le filtre sur Web Vitals Extension -CLS -LCP pour filtrer les informations de diagnostic CLS et LCP.
Les informations de diagnostic pour chaque métrique sont enregistrées en tant que groupe de console apparenté par le nom de l'extension, [Web Vitals Extension] , ce qui signifie que vous devrez cliquer sur cette ligne afin d'ouvrir le groupe et de fermer.
Les types d'informations diagnostiques varient par mesure. Par exemple, les informations LCP comprennent:
Pour certaines mesures (LCP et INP), les pannes peuvent être enregistrées sur les marques de synchronisation des utilisateurs, en utilisant performance.measure qui sont ensuite visibles dans les traces de performance Devtools.
Pour les autres mesures, Chrome Devtools fournit normalement des informations suffisantes afin que des pannes supplémentaires ne soient pas nécessaires.
Les contributions à ce projet sont les bienvenues sous forme de demandes ou de problèmes de traction. Voir contribution.md pour plus de détails.
Si vos commentaires sont liés à la façon dont nous mesurons les métriques, veuillez déposer directement un problème par rapport aux visites Web.
src/browser_action/vitals.js : Script qui exploite webvitals.js pour collecter des métriques et diffuser des changements métriques pour le badge et le HUD. Fournit un score global des mesures qui peuvent être utilisées pour les badges.src/bg/background.js : effectue des mises à jour de l'icône de badge à l'aide des données fournies par vitals.js. Transmet les données à popup.js afin d'afficher le résumé des métriques locales plus détaillées.src/browser_action/popup.js : Script de contenu qui gère Rendu les rapports de métriques détaillés dans la fenêtre contextuelle affichée lors de la cliquetis sur l'icône du badge.src/options/options.js : UI d'options (configuration enregistrée) pour les fonctionnalités avancées comme la superposition HUD Qui est le public principal de cette extension?
Le public principal de cette extension est les développeurs qui souhaitent une rétroaction instantanée sur la façon dont leurs pages se déroulent sur les métriques de base du Web Vitals pendant le développement sur une machine de bureau.
Comment dois-je interpréter les numéros de métriques rapportés par cet outil?
Cette extension rapporte des mesures pour votre ordinateur de bureau ou votre machine à ordinateur portable. Dans de nombreux cas, ce matériel sera considérablement plus rapide que celui du téléphone mobile médian que vos utilisateurs peuvent avoir. Pour cette raison, il est fortement recommandé de tester à l'aide d'outils comme Lighthouse et sur le matériel mobile réel (par exemple via WebPageTest) pour s'assurer que tous vos utilisateurs y ont une expérience positive.
Quelles actions puis-je prendre pour améliorer mes principaux vitaux Web?
Nous mettons à disposition un ensemble de guides pour optimiser chacune des métriques de base du Web si vous trouvez que votre page ne passe pas un seuil particulier:
Le phare comprend également des audits d'actionnabilité supplémentaires pour ces mesures.
Nous envisageons que les utilisateurs utiliseront l'extension pour des commentaires instantanés sur les mesures (pour leur machine de bureau), mais iront ensuite faire un audit de phare pour (1) une vue de diagnostic de l'apparence de ces mesures sur un appareil mobile médian et (2) spécifiquement quoi Vous pouvez faire pour vous améliorer.
Apache 2.0
