衡量核心网页指标的工具

您喜爱的开发者工具现在可以衡量 Core Web Vitals。

Addy Osmani
Addy Osmani
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

近期宣布的网页指标计划提供了有关质量信号的统一指南，这些信号对于所有网站提供出色的网络用户体验都至关重要。我们非常高兴地宣布，Google 面向 Web 开发者的所有热门工具现在支持衡量 Core Web Vitals，有助于您更轻松地诊断和修复用户体验问题。其中包括 Lighthouse、PageSpeed Insights、Chrome 开发者工具、Search Console、web.dev 的测量工具、Web Vitals Chrome 扩展程序和全新的 (!) Chrome 用户体验报告 API。

随着 Google 搜索现在将核心网页指标作为评估网页体验的基础，请务必确保这些指标尽可能可用且可作为行动依据。

支持 Core Web Vitals 指标的 Chrome 工具和搜索工具摘要

若要开始利用 Core Web Vitals 优化用户体验，请尝试以下工作流程：

  • 使用 Search Console 新推出的“核心网页指标”报告（根据实测数据）找出需要注意的网页组。
  • 确定需要改进的网页后，您可以使用 PageSpeed Insights（由 Lighthouse 和 Chrome 用户体验报告提供支持）诊断网页上的实验室和实地问题。您可以通过 Search Console 获取 PageSpeed Insights (PSI)，也可以直接在 PSI 上输入网址。
  • 准备好在实验室中在本地优化您的网站了吗？使用 Lighthouse 和 Chrome 开发者工具衡量核心网页指标，并获取富有实用价值的指南，确切了解如何解决相应问题。Web Vitals Chrome 扩展程序可让您在桌面设备上实时查看各项指标。
  • 需要 Core Web Vitals 的自定义信息中心？对于字段数据，请使用新版 CrUX 信息中心或新版 Chrome UX Report API；对于实验室数据，请使用 PageSpeed Insights API。
  • 在寻找指南？ web.dev/measure 可以使用 PSI 数据衡量您的网页，并向您显示一组优先优化指南和 Codelab。
  • 最后，在将更改部署到生产环境之前，对拉取请求使用 Lighthouse CI，以确保 Core Web Vitals 中不会出现回归问题。

下面我们一起来深入了解一下每种工具的具体更新！

灯塔

Lighthouse 是一款自动化的网站审核工具，可帮助开发者诊断问题以及发掘改进网站用户体验的机会。它可以衡量实验室环境中的用户体验质量的多个维度，包括性能和无障碍功能。最新版本的 Lighthouse（6.0，于 2020 年 5 月中旬发布）包含额外的审核功能、新的指标和全新的性能得分。

Lighthouse 6.0，其中显示了最新的 Core Web Vitals 指标

Lighthouse 6.0 在报告中引入了三个新指标。在这些新指标中，Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) 是核心网页指标的实验室实现，是优化用户体验的重要诊断信息。鉴于新指标在评估用户体验的重要性，我们不仅会衡量新指标并将其纳入报告，还会在计算性能得分时将其考虑在内。

Lighthouse 中包含的第三个新指标 Total Blocking Time (TBT) 与字段指标 First Input Delay (FID)（另一个核心网页指标指标）密切相关。您可以按照 Lighthouse 报告中提供的建议并根据得分进行优化，以便为用户提供最佳体验。

Lighthouse 支持的所有产品都会进行更新以反映最新版本，包括 Lighthouse CI，后者可让您在合并和部署之前轻松基于拉取请求衡量核心网页指标。

Lighthouse CI 使用 Largest Contentful Paint 显示 diff 视图

如需详细了解 Lighthouse 的最新动态，请参阅我们的 Lighthouse 6.0 新功能这篇博文。

PageSpeed Insights

PageSpeed Insights (PSI) 报告的是网页在移动设备和桌面设备上的实验室性能和现场性能。该工具概述了真实用户的网页的使用体验（由 Chrome 用户体验报告提供支持），并提供了一系列有关网站所有者如何改善网页体验的切实可行的建议（由 Lighthouse 提供）。

PageSpeed Insights 和 PageSpeed Insights API 也已升级为在后台使用 Lighthouse 6.0，并且现在支持在报告的实验室和实地部分衡量核心网页指标！核心网页指标带有蓝色丝带注释，如下所示。

显示用于现场和实验室的核心网页指标数据的 PageSpeed Insights

虽然 Search Console 能够为网站所有者提供关于需要注意的网页组的概览，而 PSI 可帮助识别每个网页存在的机会，从而提升网页体验。在 PSI 中，您可以在报告顶部清楚地看到您的网页是否达到了所有核心网页指标中关于良好体验的阈值，例如通过核心网页指标评估或未通过核心网页指标评估。

CrUX

Chrome 用户体验报告 (CrUX) 是一个公开数据集，包含数百万个网站上的真实用户体验数据。它会衡量所有核心网页指标的字段版本。与实验室数据不同，CrUX 数据来自现场选择观看的用户。利用这些数据，开发者可以了解自己甚至是竞争对手的网站上真实用户体验的分布情况。即使您的网站没有 RUM，CrUX 也可以帮助您快速轻松地评估 Core Web Vitals。BigQuery 上的 CrUX 数据集包含所有核心网页指标的精细性能数据，并且可在源站级别的每月快照中找到。

要想真正了解网站给用户带来的效果，唯一的方法就是实际衡量网站在用户加载网页并与其互动时的实际效果。此类衡量通常称为“实时用户监控”（简称 RUM）。即使您的网站没有 RUM，CrUX 也可以帮助您快速轻松地评估 Core Web Vitals。

CrUX API 简介

今天，我们非常高兴地宣布推出 CrUX API，通过它，您可以快速且免费地将开发工作流与针对以下字段指标的原始和网址级质量衡量相集成：

  • 最大内容渲染时间
  • 累积布局偏移
  • First Input Delay
  • First Contentful Paint

开发者可以查询某个来源或网址，并按不同类型的设备细分结果。该 API 每天更新，并汇总过去 28 天的数据（与 BigQuery 数据集不同，后者每月汇总）。该 API 还拥有与 PageSpeed Insights API 同样的宽松的公共 API 配额，它属于我们的另一个 API，即 PageSpeed Insights API（每天 25,000 个请求）。

下方演示了使用 CrUX API 直观呈现核心网页指标，其中包含“良好”“需要改进”和“欠佳”的分布情况：

显示 Core Web Vitals 指标的 Chrome User Experience Report API 演示

在未来的版本中，我们计划扩展该 API，以便能够访问更多 CrUX 数据集维度和指标。

全新改版的 CrUX 信息中心

借助经过重新设计的 CrUX 信息中心，您可以轻松跟踪一段时间内某个来源的性能，现在，您还可以使用它来监控所有 Core Web Vitals 指标的分布情况。要开始使用信息中心，请参阅 web.dev 上的教程。

Chrome 用户体验报告信息中心，会在新的着陆页中显示核心网页指标

我们推出了全新的“核心网页指标”着陆页，以便您更轻松地一眼就能看到网站的表现。我们欢迎您就所有 CrUX 工具提供反馈；如需分享您的想法和问题，请通过 @ChromeUXReport Twitter 账号或 Google 网上论坛与我们联系。

Chrome 开发者工具的“Performance”面板

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

Chrome 开发者工具 Performance 面板新增了“体验”部分，可以帮助您检测意外的布局偏移。这有助于找到并解决网页上导致 Cumulative Layout Shift 的视觉不稳定性问题。

“Performance”面板中显示了 Cumulative Layout Shift 并带有红色记录

选择“Layout Shift”后，即可在摘要标签页中查看其详细信息。如要直观呈现偏移位置，请将鼠标悬停在已移动自和已移到字段上。

在页脚中使用 Total Blocking Time 调试交互准备情况

总阻塞时间 (TBT) 指标可以使用实验室工具进行测量，是 First Input Delay 的理想替代指标。TBT 测量的是从首次内容绘制 (FCP) 到可交互时间 (TTI) 之间所用的总时长，在此期间，主线程处于阻塞状态的时间足够长，足以阻止输入响应。在实验室中优化 TBT 的性能优化应该会改善现场 FID。

在开发者工具性能面板页脚中显示的总阻塞时间

现在，当您衡量页面性能时，TBT 会显示在 Chrome 开发者工具 Performance 面板的页脚中：

  1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
  2. 点击效果标签页。
  3. 点击录制。
  4. 手动重新加载页面。
  5. 等待页面加载，然后停止录制。

如需了解详情，请参阅 开发者工具的新变化 (Chrome 84)。

Search Console

Search Console 中新推出的“核心网页指标”报告可帮助您根据 CrUX 中的真实（实测）数据，识别网站中需要注意的网页组。系统会按状态、指标类型和网址群组（一组组类似的网页）对网址效果进行分组。

Search Console 新推出的“核心网页指标”报告

该报告基于以下三个 Core Web Vitals 指标：LCP、FID 和 CLS。如果某网址的这些指标的报告数据量低于下限，则报告将忽略该网址。试用新版报告，全面了解源站的效果。

当您确定了存在核心网页指标相关问题的某类网页后，可以使用 PageSpeed Insights 了解针对代表性网页的具体优化建议。

web.dev

https://pagespeed.web.dev/ 提供关于如何改进的指南和 Codelab 的优先列表列表，帮助您衡量网页在一段时间内的性能。其衡量技术由 PageSpeed Insights 提供支持。测量工具现在也支持 Core Web Vitals 指标，如下所示：

借助 web.dev 衡量工具，长期衡量核心网页指标，并获取优先指导

Web Vitals 扩展程序

Web Vitals 扩展程序可实时衡量（桌面版）Google Chrome 的三个核心网页指标。这有助于在开发工作流的早期发现问题，并用作在您浏览网页时评估 Core Web Vitals 性能的诊断工具。

该扩展程序现在可以从 Chrome 应用商店安装了！希望这对您有所帮助。我们欢迎大家贡献自己的力量来改进此功能，并针对项目的 GitHub 代码库提供反馈。

通过 Chrome 扩展程序 Web Vitals 实时显示核心网页指标

精彩集锦

大功告成！您可采取的后续措施：

  • 使用开发者工具中的 Lighthouse 可优化用户体验，并确保您能为使用实际应用的 Core Web Vitals 做好准备，为取得成功做足准备。
  • 使用 PageSpeed Insights 比较您的实验和实际测试的核心网页指标的性能。
  • 试用新的 Chrome User Experience Report API，轻松了解您的来源和网址在过去 28 天内在核心网页指标方面的表现。
  • 您可以使用开发者工具性能面板中的体验部分和页脚，深入了解特定核心网页指标并进行调试。
  • 使用 Search Console 的“核心网页指标”报告，简要了解来源在现场的表现。
  • 您可以使用 Web Vitals 扩展程序，根据 Core Web Vitals 实时跟踪网页的性能。

我们将在 6 月的 web.dev Live 上详细介绍核心网页指标工具。报名即可接收活动最新动态！

~ 由 WebPerf Janitors 制作，Elizabeth 和 Addy