核心 Web 指标的测量工具

您最喜欢的开发者工具现在已可以测量核心 Web 指标。

May 28, 2020

Available in: English, Español, Português, Русский, 日本語, and 한국어

Appears in: Core Web Vitals

近期宣布的 Web 指标计划为网络质量信号提供统一指导，这些信号对于所有网站提供出色的网络用户体验至关重要。我们很高兴地宣布，Google 为网络开发者提供的所有热门工具现在都支持核心 Web 指标的测量，从而帮助您更轻松地诊断和修复用户体验问题。这些工具包括灯塔、PageSpeed Insights、Chrome 开发者工具、搜索控制台、web.dev 测量工具、Web 指标 Chrome 扩展程序和一个全新的 (!) Chrome 用户体验报告 API。

由于 Google 搜索现在将核心 Web 指标作为评估页面体验的基础，因此在最大程度上实现这些指标的可用性和可操作性就变得至关重要。

要开启使用核心 Web 指标优化用户体验的旅程，您可以尝试以下工作流程：

使用搜索控制台的全新核心 Web 指标报告来确定需要重点关注的页面组（基于实际数据）。
确定需要进行处理的页面后，使用 PageSpeed Insights（由灯塔和 Chrome 用户体验报告提供支持）来诊断页面上的实验室问题和实际问题。PageSpeed Insights (PSI) 可以通过搜索控制台进行使用，或者您也可以直接在 PSI 中输入网址。
准备好在实验室中对您的网站进行本地优化了吗？使用灯塔和 Chrome 开发者工具来测量核心 Web 指标，并获得关于具体修复内容的可操作指导。 Web 指标 Chrome 扩展程序可以让您在桌面上实时查看各项指标。
需要核心 Web 指标的自定义仪表板？在实际数据上使用更新的 CrUX 仪表板或全新的 Chrome 用户体验报告 API，或者在实验室数据上使用 PageSpeed Insights API。
寻求指导？web.dev/measure 可以对您的页面进行测量，并使用 PSI 数据向您显示一组建议优先考虑的优化指南和代码实验室。
最后，在将变更部署到生产环境前，对拉取请求使用灯塔 CI，确保核心 Web 指标中没有回归。

看完了这些介绍，我们现在就来深入了解各个工具的具体更新！

灯塔 #

灯塔是一款自动化网站审计工具，可以帮助开发者诊断问题并发掘改善网站用户体验的机会。这款工具在实验室环境中测量用户体验质量的多个维度，包括性能和可访问性。灯塔的最新版本（6.0，于 2020 年 5 月中旬发布）中包括额外的审计项、新指标和新的性能分数组成。

灯塔 6.0 在报告中引入了三项新指标。其中，Largest Contentful Paint 最大内容绘制 (LCP) 和 Cumulative Layout Shift 累积布局偏移 (CLS) 这两项新指标是核心 Web 指标的实验室执行指标，为优化用户体验提供了重要的诊断信息。鉴于这些指标对评估用户体验的重要性，我们不仅会对新指标进行测量并将结果包含在报告中，还会在计算性能分数时将其考虑在内。

灯塔中包含的第三项新指标为 Total Blocking Time 总阻塞时间 (TBT)，该项指标与 First Input Delay 首次输入延迟 (FID) 密切相关，后者是核心 Web 指标中的另一项实际指标。遵循灯塔报告中提供的建议并根据您的分数进行优化就可以使您为您的用户提供最佳体验。

灯塔支持的所有产品都依照最新版本进行了更新，其中也包括灯塔 CI。该产品使您能够在合并和部署拉取请求前轻松测量核心 Web 指标。

如需进一步了解灯塔最新更新的相关信息，请查看我们的灯塔 6.0 新增功能博文。

PageSpeed Insights 网页速度测量工具 #

PageSpeed Insights (PSI) 对页面在移动和桌面设备上的实验室性能和实际性能进行报告。该工具提供真实用户的页面体验概览（由 Chrome 用户体验报告提供支持）以及一系列关于网站所有者要如何改善页面体验的可操作建议（由灯塔提供支持）。

PageSpeed Insights 和 PageSpeed Insights API 也已升级为在底层使用灯塔 6.0，而且目前支持在报告的实验室和实际部分测量核心 Web 指标！核心 Web 指标由蓝丝带进行了标识，如下图所示。

PageSpeed Insights 中显示的实际环境和实验室环境下的核心 Web 指标数据

虽然搜索控制台为网站所有者提供了需要重点关注的页面组的全面概览，但 PSI 有助于您识别每个页面上能够改善页面体验的机会。在 PSI 中，您可以在报告顶部清楚地看出您的页面是否满足所有核心 Web 指标的良好体验阈值，报告结果将显示为通过核心 Web 指标评估或未通过核心 Web 指标评估。

CrUX #

Chrome 用户体验报告 (CrUX) 是数百万个网站上的真实用户体验数据的公共数据集。该工具测量所有核心 Web 指标的实际版本。与实验室数据不同，CrUX 数据来自实际情况下主动选择加入的用户。通过这些数据，开发者能够了解真实世界用户体验在自己的网站，甚至是竞争对手的网站上的分布。即使您的网站上还没有 RUM，CrUX 也可以提供一种快速简便的方法来评估您的核心 Web 指标。BigQuery 上的 CrUX 数据集包含所有核心 Web 指标的细粒度性能数据，并在域级的每月快照中提供。

要想真正了解您的网站为用户呈现的性能表现，唯一的方法就是在这些用户进行页面加载和页面交互时对页面性能进行实测。这种类型的测量通常被称为真实用户监控，或简称为 RUM。即使您的网站上还没有 RUM，CrUX 也可以提供一种快速简便的方法来评估您的核心 Web 指标。

推出全新的 CrUX API

今天，我们很高兴地向大家推出 CrUX API ，这款 API 能够通过一种快速且免费的方式，轻松将您的开发工作流程与下列实际指标的域级和 URL 级质量测量进行集成：

最大内容绘制
累积布局偏移
首次输入延迟
首次内容绘制

开发者可以查询域或 URL，并按不同的形式因素对结果进行细分。 API 会每日更新并汇总前 28 天的数据（与每月汇总的 BigQuery 数据集不同）。这款 API 也拥有充足的公共 API 配额，与另一个 PageSpeed Insights API 相同（每日 25,000 个请求）。

下方是使用 CrUX API 来将各项核心 Web 指标可视化的演示，其中的数据分布为良好、需要改进和欠佳：

在未来的版本中，我们计划扩展 API 并允许其访问更多的 CrUX 数据集维度和指标。

改进后的 CrUX 仪表板

新近重新设计的 CrUX 仪表板使您能够轻松跟踪域的性能随时间的变化，现在您还可以使用新的仪表板来监控所有核心 Web 指标的分布。要想上手使用仪表板，请查看我们在 web.dev 上的教程。

我们引入了一个新的核心 Web 指标着陆页面，便于您对您的网站表现一目了然。我们欢迎您对所有 CrUX 工具集提出反馈意见。如需分享您的想法和疑问，请通过 @ChromeUXReport Twitter 帐户或 Google 群组联系我们。

Chrome 开发者工具性能面板 #

在体验部分调试布局偏移事件

Chrome 开发者工具的性能面板中有一个全新的**体验部分**，可以帮助您检测意外的布局偏移。这项功能有助于查找和修复页面上导致累积布局偏移的视觉不稳定问题。

选中某次特定的布局偏移，即可在摘要选项卡中查看其详细信息。要想直观地看到偏移本身发生的位置，请将鼠标悬停在位移自和位移至字段上。

使用页脚中的总阻塞时间调试交互准备情况

总阻塞时间 (TBT) 指标可以在实验室工具中进行测量，并且是首次输入延迟的绝佳代理。TBT 测量首次内容绘制 (FCP) 和 Time to Interactive 可交互时间 (TTI) 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。在实验室中改进 TBT 的性能优化应该能够改进实际情况下的 FID。