Web Vitals

Web Vitals插件简介

Web Vitals插件描述

Web Vitals are quality signals key to delivering great UX on the web (https://web.dev/vitals). This extension measures the Ce Web Vitals, providing instant feedback on loading, interactivity  layout shift metrics. It is consistent with how these metrics are measured by Chrome  repted to other Google tools (e.g. Chrome User Experience Rept, Page Speed Insights, Search Console).

The extension captures:
Largest Contentful Paint
Cumulative Layout Shift
First Input Delay

The extension provides three ce features:

1) Ambient Badge  This helps check if a page passing the Ce Web Vitals thresholds.

Once installed, the extension will display a disabled state badge icon until you navigate to a URL. At this point it will update the badge to green  red depending on whether the URL passes the Ce Web Vitals metrics thresholds.

The badge has a number of states:

* Disabled  gray
* Passing  green
* One  me metrics failing  red

If one  me metrics are failing, the badge will animate the values of these metrics.

2) Detailed drilldown in the popup

Clicking the Ambient badge icon will allow you to drill in to the individual metric values. In this mode, the extension will also say if a metric value might change  requires a user action.

F example, First Input Delay requires a real interaction (e.g click/tap) with the page  will be in a waiting f input state until this is the . We recommend consulting the web.dev documentation f LCP, CLS  FID to get an understing of when metric values settle.

3) HUD Overlay

The overlay displays a Heads up display (HUD) which overlays your page. It is useful if you need a persistent view of your Ce Web Vitals metrics during development. To enable the overlay:

Rightclick on the Ambient badge  go to Options.
Check Display HUD overlay  click Save
Reload the tab f the URL you wish to test. The overlay should now be present.
                                

Web Vitals插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Web VitalsChrome插件v1.1.1版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决