应用截图
详细介绍
使用 Core Web Vitals 为网站添加标注。
此扩展程序会在您的网站上叠加标注，突出显示影响 Core Web Vitals 性能指标的页面属性，包括首次输入延迟（FID）、最大内容绘制（LCP）和累积布局偏移（CLS）。它还会使用 Google 推荐的颜色分级阈值报告页面的 Core Web Vitals 指标。
网页元素上会叠加两种标注：
1. 发生布局偏移并影响累积布局偏移分数的元素。根据偏移的严重程度，标注颜色从影响最低到最高依次为：黄色 -> 橙色 -> 深橙色 -> 红色。每个标注的左上角会显示偏移分数。
2. 最大内容绘制对应的元素会以紫色虚线标注突出显示。标注左上角会显示绘制时间。
打开扩展程序弹出窗口后，应显示包含 FID、LCP 和 CLS 指标时间的表格。弹出窗口底部有一个按钮，可移除网站上的标注。
除最大内容绘制外，Core Web Vitals 指标由用户操作触发。使用插件调试网站时，请注意以下事项：
- 首次输入延迟在用户点击网页或按键后记录。如果在这些操作之前打开扩展程序，您会发现表格中缺少该指标。要获取首次输入延迟，请关闭扩展程序，在页面上执行一次用户操作，然后重新打开。
- 累积布局偏移是页面上各次偏移的累积值。滚动页面时，您可能会看到额外的偏移，扩展程序会动态添加新标注。随着偏移不断累积，弹出窗口表格中报告的总分也会增加。
- 累积布局偏移标注突出显示的是发生移动的元素，**而不是导致偏移的元素**。例如，如果页面上的广告加载较晚，可能会将其下方的一些元素向下推，导致偏移。广告下方的元素很可能会被突出显示，广告本身也可能被突出显示。
- 在上述广告示例中，广告加载后页面上的多个元素可能发生偏移。在这种情况下，只会记录一个偏移分数，但所有受影响的元素都会被标注突出显示。此时，您应能看到标注的偏移分数旁有一个箭头（↳），表示这些元素作为一组一起发生了偏移。