Web Vitals

Philip Walton

优化用户体验是所有网络网站要长期取得理想成效的关键。无论您是企业主、营销者还是开发者，网页指标都可以帮助您量化网站的体验并发现改进机会。

概览

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

多年来，Google 提供了许多工具来衡量和报告广告效果。有些开发者是这些工具的使用专家，也有些开发者发现难以跟上这些工具和指标的丰富程度。

网站所有者不必是效果专家，即可了解自己为用户提供的体验质量。“网页指标”计划旨在简化这一现状，帮助网站专注于最重要的指标，即核心网页指标。

核心网页指标

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

构成 Core Web Vitals 的指标会随着时间的推移而演变。当前这组指标侧重于用户体验的三个方面（加载、互动和视觉稳定性），并包含以下指标（及其各自的阈值）：

Largest Contentful Paint 阈值建议 Interaction to Next Paint 阈值建议 Cumulative Layout Shift 阈值建议

为确保大多数用户都能达到这些指标的建议目标，建议将网页加载的第 75 个百分位作为阈值（按移动设备和桌面设备细分）。

如果一个网页在 3 个核心网页指标的 75 百分位下都达到了建议目标，那么评估核心网页指标合规性的工具就应该将该网页视为通过。

<ph type="x-smartling-placeholder">

Lifecycle

Core Web Vitals 轨道的指标会经历一个由三个阶段组成的生命周期：实验性、待处理和稳定。

<ph type="x-smartling-placeholder">
</ph> Core Web Vitals 指标的三个生命周期阶段，以一系列三个 V 形表示。阶段从左到右依次为“实验性”“待处理”和“稳定”。 <ph type="x-smartling-placeholder">
</ph> Core Web Vitals 生命周期的阶段。

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

  • 实验性指标是潜在的核心网页指标，它们可能仍会进行重大更改，具体取决于测试和社区反馈。
  • 待定指标是指已通过测试和反馈阶段的未来 Core Web Vitals 指标，并且具有明确定义的稳定时间表。
  • 稳定的指标是 Chrome 认为是提供出色用户体验所必需的当前核心网页指标。

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

实验性

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

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

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

待处理

当 Chrome 团队确定某个实验性指标已收到足够的反馈并证明其有效性后，就会成为待处理指标。例如，INP 已于 2023 年从实验性阶段提升为待处理状态，旨在最终弃用 FID。

待定指标会在此阶段保留至少 6 个月，以便让生态系统有时间进行调整。随着越来越多的开发者开始使用该指标，社区反馈仍然是此阶段的重要一环。

稳定

核心 Web 指标候选指标最终确定后，就会成为稳定指标。届时，该指标就可以成为 Core Web Vitals 指标。

稳定指标获得了积极支持，可能会发生问题修复和定义更改。稳定的 Core Web Vitals 指标每年最多更改一次。对 Core Web Vitals 的任何更改都会在指标的官方文档以及指标的更新日志中明确传达。任何评估中都会纳入核心网页指标。

<ph type="x-smartling-placeholder">

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

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

用于衡量 Core Web Vitals 的现场工具

Chrome 用户体验报告会针对每个 Core Web Vitals 收集经过匿名化处理的真实用户衡量数据。借助此类数据，网站所有者无需手动对网页进行分析，即可快速评估其性能；此外，这些数据还为 PageSpeed Insights 和 Search Console 的“核心网页指标”报告等工具提供支持。

  LCP INP CLS
<ph type="x-smartling-placeholder"></ph> Chrome 用户体验报告
<ph type="x-smartling-placeholder"></ph> PageSpeed Insights
<ph type="x-smartling-placeholder"></ph> Search Console（“核心网页指标”报告）
<ph type="x-smartling-placeholder">

Chrome 用户体验报告提供的数据可帮助您快速评估网站性能，但它无法提供每次网页浏览的详细遥测数据，而这通常是准确诊断、监控性能下降问题以及快速应对性能下降所必不可少的。因此，我们强烈建议网站自行设置实际用户监控。

使用 JavaScript 衡量核心网页指标

所有核心网页指标都可以使用标准网页 API 以 JavaScript 形式进行衡量。

<ph type="x-smartling-placeholder">

衡量所有核心网页指标的最简单方法是使用 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 指标），也是如此。

“网页指标”报告就是这样一个例子，让网站所有者使用 Google Analytics 来衡量核心网页指标。如需有关使用其他分析工具衡量核心网页指标的指南，请参阅实际衡量网页指标的最佳做法。

您还可以使用 Web Vitals Chrome 扩展程序生成有关每个 Core Web Vitals 的报告，而无需编写任何代码。此扩展程序使用 web-vitals 库来衡量所有这些指标，并在用户浏览网页时向其展示。

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

  LCP INP CLS
web-vitals
<ph type="x-smartling-placeholder"></ph> 网页指标扩展程序

如果开发者喜欢使用底层 Web API 直接衡量这些指标，可以改用这些指标指南来了解实现详情：

如需获取使用热门分析服务或您自己的内部分析工具来衡量这些指标的更多指南，请参阅实际衡量网页指标的最佳做法。

衡量 Core Web Vitals 的实验室工具

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

在开发功能尚未向用户发布之前，实验室衡量是测试其性能的最佳方式。这也是尽早发现性能下降问题的最佳方式。

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

  LCP INP CLS
<ph type="x-smartling-placeholder"></ph> Chrome 开发者工具 （改用 TBT）
<ph type="x-smartling-placeholder"></ph> 灯塔 （改用 TBT）
<ph type="x-smartling-placeholder">

虽然实验室衡量是提供出色体验的重要一环，但并不能替代现场衡量。

网站的性能可能会因用户的设备功能、网络条件、设备上运行的其他进程以及他们与网页的交互方式而产生很大差异。事实上，每个 Core Web Vitals 指标的得分都会受到用户互动的影响。只有实地测量才能准确捕捉整体情况。

提高得分的建议

以下指南针对如何针对每项核心网页指标优化网页提供了具体建议：

其他网页指标

虽然 Core Web Vitals 是了解和提供出色用户体验的关键指标，但除此之外，还有其他一些辅助指标。

这些其他指标可作为替代指标，或作为三大核心网页指标的补充指标，以帮助捕获更广泛的体验，或帮助诊断特定问题。

例如，首字节时间 (TTFB) 和首次内容绘制 (FCP) 指标都是加载体验的重要方面，都可用于诊断 LCP 问题（分别为服务器响应速度慢或阻碍呈现的资源）。

同样，总阻塞时间 (TBT) 等指标也是一项实验室指标，在发现和诊断可能影响 INP 的潜在互动问题方面也至关重要。不过，它不属于 Core Web Vitals 集，因为它们无法进行现场衡量，也不反映以用户为中心的结果。

网页指标方面的变更

“网页指标”和“核心网页指标”代表了开发者目前在衡量网络体验质量时可以使用的最佳信号，但这些信号并不完美，我们应该在未来做出改进或新增功能。

核心网页指标与所有网页均相关，并且会在相关 Google 工具中提供。更改这些指标将产生广泛影响；因此，开发者应该预计 Core Web Vitals 的定义和阈值会保持稳定，并且会提前通知，并且每年会发布一次可预测的发布频率。

其他网页指标通常与具体情境或工具相关，并且可能比核心网页指标更具实验性。因此，它们的定义和阈值可能会随着频率增加而改变。

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