优化用户体验质量是网络上任何网站长期成功的关键。无论您是企业主、营销者还是开发者，Web Vitals 都可以帮助您量化网站体验，并发现改进机会。
概览
“网页指标”是 Google 推出的一项计划，旨在针对对于提供出色的 Web 体验至关重要的质量信号提供统一指南。
多年来，Google 提供了许多用于衡量和报告效果的工具。一些开发者是这些工具的专家，而另一些开发者则发现，丰富的工具和指标很难跟上。
网站所有者不必是效果专家，就能了解其为用户提供的体验质量。“网页指标”计划旨在简化问题，并帮助网站专注于最重要的指标，即核心网页指标。
核心网页指标
核心网页指标是适用于所有网页的部分网页指标，应由所有网站所有者进行衡量，并且会显示在所有 Google 工具中。每个核心网页指标都代表用户体验的一个不同方面，在实际应用中是可衡量的，并且反映了以用户为中心的关键结果的实际体验。
构成核心网页指标的指标会随着时间的推移而演变。目前设定的 2020 年目标侧重于用户体验的三个方面（加载、互动和视觉稳定性），具体包括以下指标（以及各自的阈值）：
- Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。
- Interaction to Next Paint (INP)：衡量互动。为了提供良好的用户体验，网页的 INP 应不超过 200 毫秒。
- Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，网页应将 CLS 保持在 0.1 或更低。
为确保大多数用户都能达到这些指标的推荐目标值，建议您衡量网页加载的第 75 个百分位（按移动设备和桌面设备细分）。
如果网页在 3 个核心网页指标的第 75 个百分位处达到建议的目标，则用于评估 Core Web Vitals 合规性的工具应考虑该网页通过测试。
生命周期
Core Web Vitals 轨道上的指标������了一������三个阶段组成的生命周期：实验性、待处理和稳定版。
每个阶段旨在向开发者表明应如何看待各项指标：
- 实验性指标是前瞻性的核心网页指标，目前可能仍在进行重大更改，具体取决于测试和社区反馈。
- 待处理指标是指已通过测试和反馈阶段且明确确定了稳定日期的未来核心网页指标。
- 稳定的指标是目前 Chrome 认为对提供出色用户体验至关重要的一组核心网页指标。
核心网页指标处于以下生命周期阶段：
实验性
指标最初制定并进入生态系统时，会被视为实验性指标。
实验阶段的目的是评估指标的适合度，首先探索要解决的问题，然后可能对之前指标未能解决的问题进行迭代。例如，Interaction to Next Paint (INP) 最初只是作为一项实验性指标开发的，旨在比 First Input Delay (FID) 更全面地解决 Web 应用中存在的运行时性能问题。
Core Web Vitals 生命周期的实验阶段还旨在通过发现 bug 甚至探索对初始定义的更改，赋予指标开发灵活性。同时，社区反馈也是最重要的阶段。
等待中
当 Chrome 团队确定某个实验性指标已收到足够的反馈并证明其有效性后，该指标就会成为待处理指标。例如，INP 在 2023 年从实验性状态提升为待处理状态，目的是最终停用 FID。
待处理指标在此阶段保留至少 6 个月，让生态系统有时间适应。随着越来越多的开发者开始使用该指标，社区反馈依然是本阶段的一个重要方面。
稳定
当核心 Web 指标候选指标最终确定后，便会成为稳定的指标。这时，该指标就可以成为 Core Web Vitals 指标。
稳定指标受到积极支持，可能会进行 bug 修复和定义更改。稳定版 Core Web Vitals 指标每年���变化不超过一次。如果对 Core Web Vitals 做出任何更改，指标的官方文档以及变更日志中都会明确传达。核心网页指标也会纳入所有评估中。
衡量和报告核心网页指标的工具
Google 认为，核心网页指标对所有 Web 体验都至关重要。因此，该公司致力于在其所有热门工具中显示这些指标。以下部分详细介绍了哪些工具支持 Core Web Vitals。
衡量 Core Web Vitals 的实际工具
Chrome 用户体验报告会针对每个 Core Web Vitals 收集真实的用户衡量数据，这些数据已经过匿名化处理。借助这些数据，网站所有者无需手动在其网页上进行分析即可快速评估网站性能，并为 PageSpeed Insights 等工具以及 Search Console 的“核心网页指标”报告提供支持。
Chrome 用户体验报告提供的数据可让您快速评估网站的性能，但所提供的详细、每页浏览的遥测数据往往无法准确诊断、监控和快速应对性能下降问题。因此，我们强烈建议网站设置自己的真实用户监控功能。
使用 JavaScript 衡量核心网页指标
每个核心网页指标都可以使用标准 Web API 在 JavaScript 中进行衡量。
若要衡量所有核心网页指标，最简单的方法是使用 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 库衡量核心网页指标数据并将其发送到分析端点后，下一步是汇总这些数据并生成报告，查看您的网页是否至少有 75% 的网页访问达到了建议的阈值。
虽然有些分析服务提供商已经内置对 Core Web Vitals 指标的支持，但即使那些分析服务提供商不应该包含基本的自定义指标功能，您也应该能够在他们的工具中衡量核心网页指标。
例如网页指标报告，该网站的所有者可以使用 Google Analytics（分析）衡量其核心网页指标。如需了解如何使用其他分析工具衡量 Core Web Vitals，请参阅衡量实际网页指标的最佳实践。
您还可以使用 Web Vitals Chrome 扩展程序，针对每个核心网页指标生成报告，而无需编写任何代码。此扩展程序使用 web-vitals 库来衡量上述各项指标，并在用户浏览网页时向其显示这些指标。
此扩展程序有助于您了解自己的网站、竞争对手的网站，以及整个网络的效果。
| LCP | INP | CLS | |
|---|---|---|---|
| 网页指标 | |||
| Web Vitals 扩展程序 |
如果开发者更喜欢使用底层 Web API 直接衡量这些指标，可以改为使用这些指标指南来了解实现详情：
如需详细了解如何使用热门分析服务或您自己的内部分析工具来衡量这些指标，请参阅衡量实际使用网页指标的最佳实践。
用于衡量核心网页指标的实验室工具
虽然所有核心网页指标最重要的都是实测指标，但其中许多指标也可在实验室中���量。
实验室衡量是在开发期间（在向用户发布功能之前）测试其性能的最佳方式。它也是在性能下降问题发生之前就发现的最佳方法。
以下工具可用于在实验室环境中衡量核心网页指标：
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome 开发者工具 | （改用 TBT） | ||
| Lighthouse | （改用 TBT） |
虽然实验室测量是提供出色体验的重要一环，但它不能替代现场测量。
网站的性能可能会因用户的设备功能、网络状况、设备上运行的其他进程以及用户与网页互动的方式而存在很大差异。事实上，每个 Core Web Vitals 指标的得分都会受到用户互动的影响。只有实地测量才能准确捕捉全面情况。
提高分数的建议
以下指南针对如何针对每个核心网页指标优化网页提供了具体建议：
其他网页指标
虽然核心网页指标是了解并提供出色用户体验的关键指标，但还有其他一些支持指标。
这些其他指标可以作为替代指标，也可以作为三个核心网页指标的补充指标，帮助捕获更广泛的体验或诊断特定问题。
例如，首字节时间 (TTFB) 和首次内容绘制 (FCP) 指标都是关于加载体验的重要方面，且都有助于诊断 LCP 问题（服务器响应时间过长或阻塞渲染的资源）。
同样，Total Blocking Time (TBT) 等指标也是实验室指标，对于发现和诊断可能影响 INP 的潜在互动问题至关重要。不过，它们不在核心网页指标设置范围内，因为它们无法现场衡量，也无法反映以用户为中心的结果。
网页指标的变化
“网页指标”和“核心网页指标”是目前开发者衡量网络体验质量时可用的最有效信号，但这些信号还不够完善，预计未来将有改进或增补功能。
核心网页指标与所有网页相关，并在相关 Google 工具中展示。对这些指标所做的更改将会产生广泛的影响；因此，开发者应该预料到核心网页指标的定义和阈值保持稳定，并及时做出更新，提前通知并采用可预测的年度更新频率。
其他网页指标通常因上下文或工具而异，并且可能比核心网页指标更具实验性。因此，它们的定义和阈值可能会随着频率的变化而变化。
对于所有网页指标，更改都会明确记录在此公开的 CHANGELOG 中。