Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Web Vitals

Philip Walton

发布时间：2020 年 5 月 4 日

提高用户体验质量是网络中所有网站要长期取得理想成效的关键。无论您是企业主、营销者还是开发者，Web Vitals 都可以帮助您量化网站的用户体验，并发现提升的机会。

概览

Web Vitals 是一项由 Google 推出的计划，旨在就哪些质量信号对提供出色的网站用户体验至关重要提供统一指南。

多年来，Google 提供了许多工具来衡量和报告性能。有些开发者是使用这些工具的专家，而另一些开发者则发现，工具和指标的数量都非常多，难以跟上。

网站所有者不应成为性能专家，才能了解他们为用户提供的体验质量。“网页指标”计划旨在简化这一局面，帮助网站专注于最重要的指标，即核心网页指标 。

Core Web Vitals

Core Web Vitals 是 Web Vitals 的子集，适用于所有网页。所有网站所有者都应衡量这些指标，它们会在所有 Google 工具中显示。每一项 Core Web Vitals 都代表用户体验的一个特定维度，可在真实环境中进行衡量，反映以用户为中心的关键成果的实际体验。

构成 Core Web Vitals 的具体指标将随时间推移而演变。目前这组指标侧重于用户体验的三个维度，即加载性能、可交互性和视觉稳定性；包含以下具体指标（及对应的阈值）：

Largest Contentful Paint (LCP)：衡量加载性能。为提供良好的用户体验，LCP 应在网页开始加载后的 2.5 秒 内完成。
Interaction to Next Paint (INP)：衡量可交互性。为提供良好的用户体验，网页的 INP 应为 200 毫秒 或更短。
Cumulative Layout Shift (CLS)：衡量视觉稳定性。为提供良好的用户体验，网页的 CLS 应保持在 0.1 或更低。

为确保大多数用户的体验能够达到这些指标的推荐标准，建议以网页加载量的第 75 百分位 作为衡量阈值，并分别按移动端和桌面端进行细分。

评估 Core Web Vitals 合规性的工具应考虑网页是否通过，如果网页在所有三项 Core Web Vitals 指标的第 75 百分位都达到了推荐目标值，则应视为通过。

生命周期

Core Web Vitals 跟踪中的指标会经历一个生命周期，该生命周期包含三个阶段：实验性、待处理和稳定。

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

实验性指标 是潜在的 Core Web Vitals，可能会根据测试和社区反馈进行重大更改。
待处理指标 是未来的 Core Web Vitals，已通过测试和反馈阶段，并且有明确的时间表，将成为稳定指标。
稳定指标 是 Chrome 认为对提供出色的用户体验至关重要的一组当前 Core Web Vitals。

Core Web Vitals 处于以下生命周期阶段：

LCP：稳定
CLS：稳定
INP：稳定

实验性

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

实验阶段的目的是评估指标的适用性，首先探索要解决的问题，并可能迭代之前的指标可能未能解决的问题。例如，Interaction to Next Paint (INP) 最初是作为实验性指标开发的，旨在比 First Input Delay (FID) 更全面地解决网络上存在的运行时性能问题。

核心网页指标生命周期的实验阶段还旨在通过发现错误甚至探索对其初始定义的更改，在指标的开发中提供灵活性。这也是社区反馈最重要的阶段。

待处理

当 Chrome 团队确定实验性指标已收到足够的反馈并证明其有效性时，该指标将成为待处理指标。例如，INP 在 2023 年从实验性指标升级为待处理指标，目的是最终停用 FID。

待处理指标在此阶段至少保留六个月，以便生态系统有时间适应。随着越来越多的开发者开始使用该指标，社区反馈仍然是此阶段的一个重要方面。

稳定

当核心网页指标候选指标最终确定后，它将成为稳定指标。此时，该指标可以成为核心网页指标。

稳定指标会获得积极支持，并且可能会进行 bug 修复和定义更改。稳定的 Core Web Vitals 指标每年最多更改一次。对核心网页指标的任何更改都将在该指标的官方文档以及该指标的更改日志中明确说明。核心网页指标也会纳入任何评估中。

衡量和报告 Core Web Vitals 的工具

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

衡量 Core Web Vitals 的实际工具

Chrome 用户体验报告会收集每个核心网页指标的匿名实际用户衡量数据。借助这些数据，网站所有者可以快速评估其性能，而无需在网页上手动植入分析代码，并为 Chrome 开发者工具、PageSpeed Insights 和 Search Console 的 Core Web Vitals 报告等工具提供支持。

	LCP	INP	CLS
Chrome 用户体验报告
Chrome 开发者工具
PageSpeed Insights
Search Console（Core Web Vitals 报告）

Chrome 用户体验报告提供的数据可让您快速评估网站的性能，但它不会提供详细的按网页浏览量划分的遥测数据，而这些数据通常是准确诊断、监控和快速应对回归所必需的。因此，我们强烈建议网站设置自己的实际用户监控。

在 JavaScript 中衡量 Core Web Vitals

可以使用标准 Web API 在 JavaScript 中衡量每个 Core Web Vitals。

衡量所有 Core Web Vitals 的最简单方法是使用 web-vitals JavaScript 库，这是一个围绕底层 Web API 的小型可用于生产用途封装容器，它以准确匹配所有 Google 工具（如上文所列）报告每个指标的方式来衡量每个指标。

借助 web-vitals 库，只需调用一个函数即可衡量每个指标。如需了解完整的使用情况和 API 详细信息，请参阅文档。

import {onCLS, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

将网站配置为使用 web-vitals 库来衡量 Core Web Vitals 数据并将其发送到分析端点后，下一步就是汇总和报告这些数据，以查看您的网页是否至少在 75% 的网页访问中达到推荐阈值。

虽然一些分析提供商内置了对 Core Web Vitals 的支持，但即使没有内置支持，也应包含基本自定义指标功能，以便您在其工具中衡量 Core Web Vitals。

如果开发者希望使用底层 Web API 直接衡量这些指标，则可以改用以下指标指南来了解实现详细信息：

如需获得有关使用热门分析服务或您自己的内部分析工具衡量这些指标的其他指南，请参阅衡量实际 Web Vitals 的最佳做法。

衡量 Core Web Vitals 的实验室工具

虽然所有 Core Web Vitals 首先都是实际指标，但其中许多指标也可以在实验室中衡量。

实验室衡量是在开发期间（在向用户发布之前）测试功能性能的最佳方式。这也是在性能回归发生之前发现它们的最佳方式。

以下工具可用于在实验室环境中衡量 Core Web Vitals：

	LCP	INP	CLS
Chrome 开发者工具
灯塔		（改用 TBT）

虽然实验室衡量是提供出色体验的重要组成部分，但它不能替代实际衡量。

网站的性能可能会因用户的设备功能、网络状况、设备上可能运行的其他进程以及用户与网页的互动方式而有很大差异。实际上，每个 Core Web Vitals 指标的分数都可能受到用户互动的影响。只有实际衡量才能准确地反映完整情况。

提高分数的建议

以下指南针对如何针对每个 Core Web Vitals 优化网页提供了具体建议：

有很多方法可以改进 Core Web Vitals，每种方法在每种情况下都具有不同程度的影响、相关性和易用性。如需查看 Chrome 团队的热门建议的简短列表，请参阅提升 Core Web Vitals 的最有效方式。

其他 Web Vitals

虽然 Core Web Vitals 是了解和提供出色用户体验的关键指标，但还有其他支持指标。

这些其他指标可以作为代理指标或三个 Core Web Vitals 的补充指标，帮助捕获更多体验或帮助诊断特定问题。

例如，Time to First Byte (TTFB) 和 First Contentful Paint (FCP) 指标都是加载体验的重要方面，并且都可用于诊断 LCP 问题（分别是服务器响应时间缓慢或渲染阻塞资源）。

同样，Total Blocking Time (TBT) 等指标是实验室指标，对于发现和诊断可能影响 INP 的潜在 可交互性 问题至关重要。不过，它不属于 Core Web Vitals 集，因为它们无法在实际环境中衡量，也不反映以用户为中心的结果。

Web Vitals 的更改

Web Vitals 和 Core Web Vitals 代表了开发者目前可用于衡量网络体验质量的最佳信号，但这些信号并不完美，未来可能会进行改进或添加。

Core Web Vitals 与所有网页相关，并在相关的 Google 工具中显示。对这些指标的更改将产生广泛的影响；因此，开发者应预计 Core Web Vitals 的定义和阈值将保持稳定，并且更新将有事先通知，并具有可预测的年度节奏。

其他 Web Vitals 通常特定于上下文或工具，并且可能比 Core Web Vitals 更具实验性。因此，它们的定义和阈值可能会更频繁地更改。

对于所有 Web Vitals，更改都将在此公开的 CHANGELOG 中明确记录。