Web Vitals-网页速度优化 v1.1.1

阿贝

插件简介:
Web Vitals 是在 Web (https://web.dev/vitals) 上提供出色 UX 的关键质量信号。此扩展测量 Core Web Vitals，提供有关加载、交互性和布局转换指标的即时反馈


插件功能介绍
1) Ambient Badge - 这有助于检查页面是否通过了 Core Web Vitals 阈值。
安装后，扩展程序将显示禁用状态徽章图标，直到您导航到 URL。此时，它将根据 URL 是否通过 Core Web Vitals 指标阈值将标志更新为绿色或红色。
徽章有多种状态:
* 禁用 - 灰色
* 通过 - 绿色
* 一个或多个指标失败 - 红色
如果一个或多个指标失败，徽章将动画显示这些指标的值。
2）弹出窗口中的详细钻取
单击环境标志图标将允许您深入了解各个指标值。在此模式下，扩展程序还将说明指标值是否可能更改或需要用户操作。
例如，First Input Delay 需要与页面进行真正的交互（例如单击/点击），并且在出现这种情况之前将处于等待输入状态。我们建议查阅有关 LCP、CLS 和 FID 的 web.dev 文档，以了解指标值何时确定。
从版本 1.0.0 开始，弹出窗口通过 Chrome UX Report (CrUX) API 将您的本地 Core Web Vitals 体验与来自现场的真实用户数据相结合。这种集成为您提供上下文洞察，帮助您了解您的个人体验与同一页面上的其他桌面用户的相似程度。如果需要，我们还添加了一个新选项“将本地体验与电话现场数据进行比较”。请注意，某些页面可能无法使用 CrUX 数据，在这种情况下，我们会尝试为整个源加载字段数据。
3）HUD叠加
叠加层会显示一个平视显示器 (HUD)，它叠加在您的页面上。如果您需要在开发期间持续查看 Core Web Vitals 指标，这将非常有用。要启用覆盖:
右键单击环境标志并转到选项。
选中显示 HUD 覆盖并单击“保存”
重新加载要测试的 URL 的选项卡。现在应该存在叠加层。


插件使用方法:
1、Google 提供了一个小而美 npm 包:web-vitals，
2、在最近的 create-react-app 脚手架已经包含 web-vitals，主要代码是:


3、如果你要测量任何受支持的指标，只需将函数传递到 index.js 中的 reportWebvitals 函数中:


4、当指标的最终值在页面上完成计算时，将触发此函数。我们就可以通过它将结果记录到控制台或发送到特定端点。


下载地址:

游客，如果您要查看本帖隐藏内容请回复

csa

啥也不说了，感谢楼主分享哇！