收集您网站的 Web Vitals 指标数据是改进这些指标的第一步。全面的分析将收集来自真实环境和实验室环境的性能数据。测量 Web Vitals 指标只需要最少的代码更改，并且可以使用免费工具完成。
使用 RUM 数据测量 Web Vitals 指标
真实用户监控 (RUM) 数据，也称为现场数据，捕获网站实际用户体验到的性能。RUM 数据是 Google 用来确定网站是否达到建议的核心 Web Vitals 指标阈值的数据。
入门
如果您没有 RUM 设置，以下工具将快速为您提供有关您网站真实性能的数据。这些工具都基于相同的底层数据集（Chrome 用户体验报告），但使用场景略有不同
- Chrome DevTools 在“性能”面板的实时指标视图中与 CrUX 数据集集成。通过将您的本地体验与同一页面上的真实用户体验进行比较，您可以就将调试工作重点放在哪里做出更明智的决定。如果您正在寻找一个可以采取的行动，以便开始测量和改进您网站的 Web Vitals 指标，我们建议您使用 Chrome DevTools “性能”面板。
- PageSpeed Insights (PSI) 报告过去 28 天的汇总页面级和来源级性能。此外，它还提供有关如何提高性能的建议。PSI 在 Web 上可用，也可作为 API 提供。
- Search Console 报告每个页面的性能数据。这使其非常适合识别需要改进的特定页面。与 PageSpeed Insights 不同，Search Console 报告包括历史性能数据。Search Console 只能用于您拥有并已验证所有权的网站。
- CrUX 仪表盘 是一个预构建的仪表盘，用于显示您选择的来源的 CrUX 数据。它构建于 Data Studio 之上，设置过程大约需要一分钟。与 PageSpeed Insights 和 Search Console 相比，CrUX 仪表盘报告包含更多维度，例如，数据可以按设备和连接类型进行细分。
值得注意的是，虽然前面列出的工具非常适合“入门”测量 Web Vitals 指标，但它们在其他情况下也可能很有用。特别是，CrUX 和 PSI 都作为 API 提供，可用于构建仪表盘和其他报告。
收集 RUM 数据
虽然基于 CrUX 的工具是调查 Web Vitals 指标性能的良好起点，但我们强烈建议您使用自己的 RUM 对其进行补充。您自己收集的 RUM 数据可以提供有关您网站性能的更详细和即时反馈。这使得识别问题和测试可能的解决方案变得更容易。
您可以使用专门的 RUM 提供商或设置自己的工具来收集自己的 RUM 数据。
专门的 RUM 提供商专门从事收集和报告 RUM 数据。要将核心 Web Vitals 指标与这些服务一起使用，请咨询您的 RUM 提供商，了解如何为您网站启用核心 Web Vitals 指标监控。
如果您没有 RUM 提供商，您或许可以增强现有的分析设置，以使用 web-vitals JavaScript 库收集和报告这些指标。下文将更详细地解释此方法。
web-vitals JavaScript 库
如果您正在为 Web Vitals 指标实施自己的 RUM 设置，收集 Web Vitals 指标测量值的最简单方法是使用 web-vitals JavaScript 库。web-vitals 是一个小型模块化库（约 2KB），它提供了一个方便的 API，用于收集和报告每个可现场测量的 Web Vitals 指标。
构成 Web Vitals 指标的指标并非都由浏览器的内置性能 API 直接公开，而是构建在其之上。例如，累积布局偏移 (CLS) 是使用 布局不稳定性 API 实现的。通过使用 web-vitals，您无需担心自己实现这些指标；它还可以确保您收集的数据与每个指标的方法和最佳实践相匹配。
有关实施 web-vitals 的更多信息，请参阅文档和现场测量 Web Vitals 指标的最佳实践指南。
数据聚合
至关重要的是，您要报告由 web-vitals 收集的测量值。如果测量了这些数据但未报告，您将永远看不到它。web-vitals 文档包含一些示例，说明如何将数据发送到通用 API 端点、Google Analytics 或 Google Tag Manager。
如果您已经有喜欢的报告工具，请考虑使用该工具。如果没有，Google Analytics 是免费的，可以用于此目的。
在考虑使用哪个工具时，考虑谁需要访问数据会很有帮助。当整个公司（而不是单个部门）都有兴趣提高绩效时，企业通常会取得最大的绩效提升。请参阅跨职能部门解决网站速度问题，了解如何获得不同部门的支持。
数据解读
在分析性能数据时，务必注意分布的尾部。RUM 数据通常表明性能差异很大——有些用户体验速度很快，有些用户体验速度很慢。但是，使用中位数来汇总数据可能会掩盖这种行为。
关于 Web Vitals 指标，Google 使用“良好”体验的百分比，而不是中位数或平均值等统计数据，来确定网站或页面是否达到建议的阈值。具体而言，要使网站或页面被视为达到核心 Web Vitals 指标阈值，75% 的页面访问应达到每个指标的“良好”阈值。
使用实验室数据测量 Web Vitals 指标
实验室数据，也称为合成数据，是从受控环境而非实际用户收集的。与 RUM 数据不同，实验室数据可以从预生产环境中收集，因此可以纳入开发人员工作流程和持续集成流程。收集合成数据的工具示例包括 Lighthouse 和 WebPageTest。
注意事项
RUM 数据和实验室数据之间始终会存在差异，特别是当实验室环境的网络条件、设备类型或位置与用户的网络条件、设备类型或位置显着不同时。但是，在收集特定 Web Vitals 指标的实验室数据时，有几个需要注意的具体事项
- 最大内容渲染时间 (LCP) 在实验室环境中测量的结果可能与使用 RUM 数据在现场测量的结果不同，这归因于页面加载延迟（通过重定向、连接到服务器的延迟或未缓存数据）、根据屏幕向不同用户显示的不同内容或由于其他原因（包括 Cookie 横幅、个性化）。
- 累积布局偏移 (CLS) 在实验室环境中测量的结果可能人为地低于 RUM 数据中观察到的 CLS。许多实验室工具仅加载页面，而不与其交互。因此，它们仅捕获初始页面加载期间发生的布局偏移。相比之下，RUM 工具测量的 CLS 捕获了在整个页面生命周期中发生的意外布局偏移。
- 交互到下次绘制 (INP) 无法在实验室环境中测量，因为它需要用户与页面进行交互。因此，总阻塞时间 (TBT) 是建议的 INP 实验室代理。TBT 测量“首次内容渲染时间和可交互时间之间页面的总阻塞时间，在此期间页面被阻止响应用户输入”。虽然 INP 和 TBT 的计算方式不同，但它们都反映了引导过程中的主线程阻塞。当主线程被阻塞时，浏览器响应用户交互会延迟。
工具
这些工具可用于收集 Web Vitals 指标的实验室测量值
- Chrome DevTools 测量和报告“性能”面板的实时指标视图中给定页面的核心 Web Vitals 指标。此视图为开发人员在进行代码更改时提供实时性能反馈。
- Lighthouse Lighthouse 报告 LCP、CLS 和 TBT，并突出显示可能的性能改进。Lighthouse 在 Chrome DevTools 中可用，作为 npm 包 提供，也可以使用 Lighthouse CI 纳入持续集成工作流程。
- WebPageTest 将 Web Vitals 指标作为其标准报告的一部分。WebPageTest 对于在特定设备和网络条件下收集有关 Web Vitals 指标的信息非常有用。