网页指标

优化用户体验质量是网络上任何网站取得长期成功的关键。无论您是企业主、营销者还是开发者，Web Vitals 都可以帮助您量化网站体验并发现改进机会。

概览

网页指标是 Google 推出的一项计划，旨在针对提供出色网络用户体验至关重要的质量信号提供统一指南。

多年来，Google 提供了许多用于衡量和报告性能的工具。一些开发者是这些工具的专家，而另一些开发者则发现，大量的工具和指标很难跟上。

网站所有者不必是性能专家，就能了解其向用户提供的体验质量。网页指标计划旨在简化网页指标，帮助网站专注于最重要的指标，即核心网页指标。

核心网页指标

核心网页指标是应用于所有网页的部分网页指标，应由所有网站所有者进行衡量，并且会显示在所有 Google 工具中。每个核心网页指标都代表用户体验的一个不同方面，可在实际使用中衡量，并反映以用户为中心的关键结果的实际体验。

构成核心网页指标的指标将随着时间的推移而改进。当前设置的 2020 年侧重于用户体验的三个方面（加载、互动和视觉稳定性），包括以下指标（及其各自的阈值）：

• Largest Contentful Paint (LCP)：衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。
• First Input Delay (FID)：衡量互动。为了提供良好的用户体验，网页的 FID 不应超过 100 毫秒。
• Cumulative Layout Shift (CLS)：衡量的是视觉稳定性。为了提供良好的用户体验，页面应将 CLS 保持在 0.1. 或更低。

对于上述每个指标，为了确保您达到大多数用户建议的目标，比较理想的阈值是网页加载的第 75 个百分位数（按移动设备和桌面设备细分）。

如果网页在上述三个指标的第 75 百分位处满足建议的目标，则用于评估核心网页指标合规性的工具应考虑网页通过测试。

生命周期

“核心网页指标”轨道上的指标会经历一个由 3 个阶段组成的生命周期：实验性阶段、待处理阶段和稳定阶段。

下表显示了所有核心网页指标目前所处的生命周期阶段：

每个阶段旨在向开发者表明应如何看待每项指标：

• 实验性指标是指潜在的核心网页指标，目前可能仍在进行重大更改，具体取决于测试和社区反馈。
• 待处理指标是指已通过测试和反馈阶段且明确确定了稳定时间表的未来核心网页指标。
• 稳定的指标是当前一组核心网页指标，Chrome 认为这些指标对于打造出色的用户体验至关重要。

实验性功能

指标最初制定并进入生态系统时，会被视为实验性指标。

实验阶段的目的是评估指标的适用性，首先会探索要解决的问题，然后尽可能迭代之前可能无法解决的指标。例如，Interaction to Next Paint (INP) 最初是一项实验性指标，旨在更全面地解决 Web 上存在的运行时性能问题，而不是 First Input Delay (FID)。

Core Web Vitals 生命周期的实验阶段还旨在通过发现 bug 甚至探索对初始定义的更改，为指标的开发提供灵活性。这也是社区反馈最重要的阶段。

等待中

当 Chrome 团队确定某个实验性指标已收到充分的反馈并证明其有效性后，该指标就会成为待定指标。待处理指标在此阶段保留至少六个月，以便让生态系统有时间进行调整。如果指标要推进到待处理阶段，唯一的障碍就是等待过渡期。随着越来越多的开发者开始使用该指标，社区反馈仍是此阶段的一个重要方面。

稳定

当某个核心网页指标候选指标最终确定后，它会变为稳定的指标；对于核心网页指标轨道上的指标，这意味着该指标会成为核心网页指标。

稳定指标已获得积极支持，可能会进行 bug 修复和定义更改。稳定核心网页指标每年的变化不超过一次。对核心网页指标所做的任何更改都将在指标的官方文档和指标的 CHANGELOG 中明确传达。核心网页指标也会纳入所有评估中。

衡量和报告核心网页指标的工具

Google 认为核心网页指标对所有 Web 体验都至关重要。因此，该公司致力于在其所有热门工具中显示这些指标。以下部分详细介绍了哪些工具支持核心网页指标。

衡量核心网页指标的实地工具

Chrome 用户体验报告会收集每个核心网页指标的匿名用户衡量数据。这些数据让网站所有者无需手动对网页进行分析，即可快速评估其性能，还可为 PageSpeed Insights 和 Search Console 的“核心网页指标”报告等工具提供支持。

Chrome 用户体验报告提供的数据可让您快速评估网站的性能，但它无法提供详细、按网页浏览情况的遥测数据，而这些数据通常对于准确诊断、监控回归问题并快速做出响应必不可少。因此，我们强烈建议网站自行设置真实用户监控功能。

在 JavaScript 中衡量核心网页指标

每个核心网页指标都可以使用标准 Web API 在 JavaScript 中衡量。

若要衡量所有核心网页指标，最简单的方法是使用 web-vitals JavaScript 库，这是一个可直接用于生产环境的小型底层 Web API 封装容器，用于衡量每个指标，方式与上述所有 Google 工具的报告方式完全一致。

借助 web-vitals 库，只需调用单个函数即可轻松测量每个指标（请参阅相关文档，了解完整的用法和 API 详细信息）：

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

将网站配置为使用 web-vitals 库来衡量核心网页指标数据并将其发送到分析端点后，下一步就是汇总并报告这些数据，查看您的网页至少有 75% 的网页访问是否达到建议的阈值。

虽然有些分析服务提供商内置了对核心网页指标指标的支持，但有些分析服务提供商可能并不会包含基本的自定义指标功能，以便您在其工具中衡量核心网页指标。

例如，网页指标报告，可让网站所有者使用 Google Analytics（分析）衡量其核心网页指标。如需了解如何使用其他分析工具衡量核心网页指标，请参阅衡量实际网页指标的最佳实践。

您还可以使用 Web Vitals Chrome 扩展程序，针对每个核心网页指标生成报告，而无需编写任何代码。此扩展程序使用 web-vitals 库来测量上述各项指标，并在用户浏览网页时向其显示这些指标。

此扩展程序可帮助您了解自己的网站、竞争对手的网站以及整个网络的效果。

或者，如果开发者更喜欢通过底层 Web API 直接衡量这些指标，则可以参阅这些指标指南，了解实现详情：

• 在 JavaScript 中测量 LCP
• 在 JavaScript 中衡量 FID
• 在 JavaScript 中衡量 CLS

用于衡量核心网页指标的实验室工具

虽然所有核心网页指标最重要的都是字段指标，但其中许多指标在实验室中也是可以测量的。

实验室测量是在开发期间（在向用户发布功能之前）测试功能性能的最佳方式。这也是尽早发现性能下降问题的最佳方式。

以下工具可用于在实验室环境中衡量核心网页指标：

虽然实验室测量是提供出色体验的重要部分，但它不能替代现场测量。

用户的设备功能、网络条件、设备上运行的其他进程以及用户与网页互动的方式，网站的性能可能会有很大差异。实际上，用户互动情况会影响每个核心网页指标的得分。只有字段测量才能准确捕获完整信息。

提高得分的建议

衡量核心网页指标并确定需要改进的方面后，下一步就是进行优化。以下指南提供了有关如何针对各个核心网页指标优化网页的具体建议：

• 优化 LCP
• 优化 FID
• 优化 CLS

其他网页指标

虽然核心网页指标是了解并提供出色用户体验的关键指标，但也有其他重要指标。

这些其他网页指标通常用作 Core Web Vitals 的代理或补充指标，有助于捕获更多体验或帮助诊断特定问题。

例如，首字节时间 (TTFB) 和首次内容绘制 (FCP) 指标都是加载体验的重要方面，并且都有助于诊断 LCP 问题（服务器响应时间过长或阻塞渲染的资源）。

同样，总阻塞时间 (TBT) 和可交互时间 (TTI) 等指标也是实验室指标，对于捕获和诊断将影响 FID 的潜在互动问题至关重要。但是，它们不是核心网页指标集的一部分，因为它们无法现场衡量，也不反映以用户为中心的结果。

不断发展变化的网页指标

“网页指标”和“核心网页指标”只是目前开发者衡量网络体验质量时可用的最佳信号，但这些信号还不够完美，预计未来会做出改进或增加。

核心网页指标与所有网页相关，会在相关 Google 工具中显示。对这些指标的更改将会产生广泛的影响；因此，开发者应该预料到核心 Web Vitals 的定义和阈值保持稳定，并且应提前通知开发者，并采用可预测的年度更新频率。

其他网页指标通常特定于上下文或工具，并且可能比核心网页指标更具实验性。因此，其定义和阈值可能会随着频率的变化而变化。

对于所有网页指标，更改都将明确记录在此公开变更日志中。