如何启用 Chrome 的基准 HUD 来跟踪性能指标

谷歌浏览器的开发团队最近添加了一个平视显示器(HUD)来帮助开发者和用户跟踪不同网站的性能指标。 HUD 跟踪作为 Google 核心 Web Vitals 平台一部分的指标,例如最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。 今天,我们将仔细研究如何在 Chrome 上启用此 HUD,这些指标的实际含义以及它如何影响您的网站。

启用 Chrome 的基准 HUD

有两种方法可以将 Chrome 的基准视为平视显示器。 您可以借助 Chrome 中的新功能标志启用 HUD,也可以使用官方 Chrome 扩展程序。

使用功能标志启用 Chrome 的基准 HUD

Google 的实验性基准 HUD 目前存在于最新 Chrome Canary 中的功能标志后面。 在本文中,我使用了 Chrome Canary 89.0.4349.3 进行演示。 您可以按照以下步骤在 Mac、Windows、Linux、Chrome OS 和 Android 上的 Chrome 上启用 HUD。

1. 打开 谷歌浏览器金丝雀 并访问 chrome://flags。 在此页面上可用的搜索框中, 搜索“在 HUD 中显示性能指标”,然后选择“启用”。 或者,您可以将下面给出的 URL 粘贴到浏览器的地址栏中。

chrome://flags/#show-performance-metrics-hud

2.启用标志后,重新启动浏览器。 你现在会 请注意右上角的 Chrome 新基准 HUD 的浏览器。 不幸的是,HUD 目前不支持拖放来重新定位,因此您只能在同一个地方查看它。

chrome hud 功能标志版本

使用 Chrome 扩展启用 Chrome 的基准 HUD

如果您不愿意在 Chrome Canary 的前沿生活,您可以安装谷歌发布的 Chrome 扩展以获得类似的 HUD。 这是你如何做到的:

1.打开谷歌浏览器并访问 Chrome 网上应用店。 在搜索框中,输入“Web Vitals”并安装 addyosmani 提供的那个。 或者,您可以 使用这个链接 直接打开扩展的页面。

网络生命体征 chrome 扩展

2. 安装扩展后,您将看到与功能标志提供的相同指标。 您可以根据自己的方便和偏好使用其中任何一种。 由于现在没有快速禁用功能标志版本的选项,我建议使用 Chrome 扩展程序。

安装后的 web Vitals chrome 扩展

Chrome 基准 HUD 的特点

Chrome 的基准 HUD 目前提供以下功能:

  • 最大含量涂料 (LCP)
  • 首次输入延迟 (FID)
  • 累积版式偏移 (CLS)
  • 平均丢帧 (ADF)

最大含量涂料 (LCP)

最大内容涂料 (LCP) 测量 在网页的可视部分呈现最大的图像或文本块所花费的时间. 谷歌推荐网站 在前 2.5 秒内有 LCP 以获得理想的用户体验。 大约 2.5 秒到 4 秒的 LCP 被认为是平均时间,超过该时间的持续时间被认为很差,并可能导致用户体验不佳。

lcp 指标
图片:谷歌

为了将 LCP 保持在 2.5 秒内,该公司敦促开发人员 测量移动版和桌面版页面加载的 75%. 简而言之,您所要做的就是确保至少 75% 的页面浏览量满足所需的良好阈值,在本例中为 2.5 秒。

首次输入延迟 (FID)

虽然 LCP 与加载速度有关,但首次输入延迟 (FID) 代表网页的响应能力。 它测量从用户与页面交互到页面设法开始处理以响应操作的时间。 值得一提的是 FID 不包括总处理时间.

指标
图片:谷歌

在理想情况下,一个 网站的 FID 值应小于 100 毫秒. 100 毫秒到 300 毫秒之间的范围需要改进。 如果时间超过 300 毫秒,则认为该网页的 FID 较差。 您可以按照上面讨论的相同的 75% 页面加载方法来保持良好的 FID 分数。

累积版式偏移 (CLS)

当网站内容突然上下移动而没有任何警告时,累积布局偏移 (CLS) 会跟踪所有那些烦人的时间。 换句话说,CLS 衡量网站的视觉稳定性。

分类指标

根据 Google 的说法,布局转换主要发生在页面资源异步加载或 DOM 元素动态添加到网页时。 良好的 CLS 分数小于 0.1。 高于 0.25 的分数被视为差。 您可以了解有关如何计算 CLS 分数的更多信息 就在这儿.

平均丢帧 (ADF)

顾名思义,平均丢帧 (ADF) 显示了用户与网页交互时丢帧的百分比。 较低的 ADF 百分比将带来更好的性能,而高丢帧率可能会导致延迟和其他性能问题。 在撰写本文时,ADF 仅在 HUD 的功能标志版本上可用。

使用 Chrome 的基准 HUD 跟踪网站性能

在上个月的一篇博文中,谷歌宣布了其计划 将 Core Web Vitals – LCP、FID 和 CLS 视为排名信号 从 2021 年 5 月起. 如果您是网站所有者或开发人员,现在是使用 Chrome 的 Benchmark HUD 优化网站用户体验的好时机,以避免受到即将到来的更新的负面影响。 有关更多此类提示,请不要忘记查看我们的 Google Chrome 提示和技巧文章。

In relation :  提高 Windows 上 Google Chrome 下载速度的 11 种最佳方法