Web Vitals

• 简介：开发者工具
• 攻略：下载的 crx 插件如何安装到浏览器上？

衡量健康网站的指标
Web Vitals 是在 Web (https://web.dev/vitals) 上提供出色 UX 的关键质量信号。此扩展测量 Core Web Vitals，提供有关加载、交互性和布局转换指标的即时反馈。它与 Chrome 衡量这些指标并报告给其他 Google 工具（例如 Chrome 用户体验报告、页面速度洞察、搜索控制台）的方式一致。
扩展捕获：
最大的内容绘制
累积布局偏移
首次输入延迟
该扩展提供了三个核心功能：
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 的选项卡。现在应该发送叠加层。