收集网站网页指标的相关数据是改进网页指标的第一步。全面的分析将会同时收集现实环境和实验室环境的性能数据。衡量网页指标只需极少的代码更改，并且可以使用免费工具来实现。
使用 RUM 数据衡量网页指标
真实用户监控 (RUM) 数据（也称为实测数据）会捕获网站实际用户的体验。Google 使用 RUM 数据来确定网站是否符合建议的核心网页指标阈值。
使用入门
如果您未设置 RUM，以下工具将快速为您提供网站实际效果的相关数据。这些工具均基于相同的基础数据集（Chrome 用户体验报告），但用例略有不同：
- PageSpeed Insights (PSI)：PageSpeed Insights 会报告过去 28 天内网页级和源级的汇总效果。此外，它还会提供有关如何提升效果的建议。如果您希望通过一项操作来着手衡量和改进网站的网页指标，我们建议您使用 PSI 来审核您的网站。PSI 可在网站中使用，也可作为 API 使用。
- Search Console：Search Console 会按网页报告效果数据。因此非常适合用于找出需要改进的特定网页。与 PageSpeed Insights 不同，Search Console 报告包含历史效果数据。Search Console 只能用于归您所有且已验证所有权的网站。
- CrUX 信息中心：CrUX 信息中心是一个预构建的信息中心，会显示所选来源的 CrUX 数据。它是在数据洞察的基础上构建的，设置过程大约需要一分钟时间。与 PageSpeed Insights 和 Search Console 相比，CrUX 信息中心报告包含的维度更多，例如，数据可以按设备和连接类型细分。
值得注意的是，虽然上面列出的工具非常适合用来衡量网页指标的“入门”工具，但它们在其他情况下同样有用。具体来说，CrUX 和 PSI 都作为 API 提供，可用于构建信息中心和其他报告。
收集 RUM 数据
虽然基于 CrUX 的工具是调查网页指标性能的绝佳起点，但我们强烈建议您使用自己的 RUM 作为补充。通过您自行收集的 RUM 数据，您可以更详细、更即时地获得有关您网站性能的反馈。这样，您就可以更轻松地发现问题并测试可能的解决方案。
您可以通过专门的 RUM 提供商或设置自己的工具来收集自己的 RUM 数据。
专门的 RUM 提供商专门收集和报告 RUM 数据。如需将 Core Web Vitals 与这些服务搭配使用，请让您的 RUM 提供商为您的网站启用 Core Web Vitals 监控功能。
如果您没有 RUM 提供商，可以使用 web-vitals JavaScript 库对现有的分析设置进行补充，以便收集这些指标并生成报告。下文更详细地介绍了此方法。
web-vitals JavaScript 库
如果您要自行实现网页指标的 RUM 设置，那么收集网页指标衡量结果的最简单方法是使用 web-vitals JavaScript 库。web-vitals 是一个小型模块化库 (~1KB)，它提供了一个便捷的 API，用于收集和报告每个字段可衡量的网页指标指标。
构成网页指标的指标并非全部由浏览器的内置性能 API 直接公开，而是基于这些指标构建而成。例如，Cumulative Layout Shift (CLS) 是使用 Layout Instability API 实现的。通过使用 web-vitals，您无需费心自行实现这些指标；它还可确保您收集的数据符合每个指标的方法和最佳实践。
如需详细了解如何实现 web-vitals，请参阅此文档以及实际衡量网页指标的最佳实践指南。
数据汇总
请务必报告 web-vitals 收集的测量结果。如果系统衡量这些数据但没有报告，那么您永远不会看到它。web-vitals 文档中提供了相关示例，展示了如何将数据发送到通用 API 端点、Google Analytics（分析）或 Google 跟踪代码管理器。
如果您已经有喜爱的报告工具，可以考虑使用该工具。如果没有，Google Analytics（分析）完全免费，可用于此目的。
在考虑使用哪种工具时，考虑谁需要有权访问数据会很有帮助。一般来说，如果整个公司（而不是一个部门）都希望提高业绩，企业能够取得最大的绩效。请参阅跨职能修正网站速度，了解如何获得不同部门的认可。
数据解读
分析效果数据时，请务必注意分布的尾部。RUM 数据通常表明性能有很大差异 - 有些用户的体验速度很快，而有些用户的体验速度很慢。不过，使用中位数来汇总数据可以很容易地掩盖这种行为。
对于网页指标，Google 使用“良好”体验的百分比（而不是中间值或平均值等统计信息）来确定网站或网页是否符合建议的阈值。具体而言，如果网站或网页达到核心网页指标阈值，75% 的网页访问应达到每个指标的“良好”阈值。
使用实验室数据衡量网页指标
实验室数据（也称为合成数据）是在受控环境（而不是实际用户）收集的。与 RUM 数据不同，实验室数据可以从预生产环境收集，因此可以被整合到开发者工作流和持续集成流程中。收集合成数据的工具示例包括 Lighthouse 和 WebPageTest。
注意事项
RUM 数据和实验室数据总会存在差异，特别是在网络条件、设备类型或实验室环境的位置与用户存在明显差异时。不过，在收集网页指标方面的实验室数据时，需要注意以下几点：
- Cumulative Layout Shift (CLS)：在实验室环境中测得的 Cumulative Layout Shift 可能会人为低于 RUM 数据中观察到的 CLS。CLS 定义为“在网页的整个生命周期内发生的所有意外布局偏移的得分总和”。不过，根据加载网页的是真实用户还是合成性能测量工具，网页的生命周期通常会有很大差异。许多实验工具只能加载页面，不会与页面交互。因此，它们只会捕获初始网页加载期间发生的布局偏移。相比之下，RUM 工具测量的 CLS 可捕获在网页的整个生命周期内发生的意外布局偏移。
- First Input Delay (FID)：First Input Delay 无法在实验室环境中衡量，因为它需要用户与网页进行互动。因此，Total Blocking Time (TBT) 是推荐用于 FID 的实验室代理。TBT 衡量的是“从 First Contentful Paint 到可交互时间之间的总时长，在这段时间内页面无法响应用户输入”。虽然 FID 和 TBT 的计算方式不同，但它们都反映了引导过程中被阻塞的主线程。当主线程处于阻塞状态时，浏览器在响应用户互动时会出现延迟。FID 衡量的是用户首次尝试与网页互动时发生的延迟（如果有）。
工具
这些工具可用于收集网页指标的实验室测量结果：
- Web Vitals Chrome 扩展程序：Web Vitals Chrome 扩展程序用于衡量和报告指定网页的核心网页指标（LCP、FID 和 CLS）。此工具旨在为开发者提供实时性能反馈，让他们在更改代码时获得反馈。
- Lighthouse：Lighthouse 会提供有关 LCP、CLS 和 TBT 的报告，还会突出显示可能的性能改进情况。Lighthouse 在 Chrome 开发者工具中可用，既可作为 Chrome 扩展程序使用，也可作为 npm 软件包提供。您还可以通过 Lighthouse CI 将 Lighthouse 纳入持续集成工作流中。
- WebPageTest：WebPageTest 的标准报告中包含网页指标。WebPageTest 可用于在特定设备和网络条件下收集网页指标的相关信息。