收集网站 Web Vitals 数据是改进这些指标的第一步。全面的分析会从真实环境和实验室环境收集性能数据。衡量 Web Vitals 只需进行极少的代码更改，并且可以使用免费的工具来完成。
使用 RUM 数据衡量网页指标
实时用户监控 (RUM) 数据（也称为“实测数据”）用于捕获网站实际用户所体验到的性能。Google 就使用 RUM 数据来确定某个网站是否符合建议的 Core Web Vitals 阈值。
使用入门
如果您尚未设置 RUM，以下工具可快速为您提供有关网站实际性能的数据。这些工具都基于相同的基础数据集（Chrome 用户体验报告），但使用场景略有不同：
- Chrome DevTools 会与“Performance”面板的实时指标视图中的 CrUX 数据集集成。通过将您在本地获得的体验与同一网页上的真实用户体验进行比较，您可以更明智地决定在哪些方面集中调试工作。如果您希望通过单个操作来开始衡量和改进网站的 Web Vitals，我们建议您使用 Chrome 开发者工具的“Performance”（性能）面板。
- PageSpeed Insights (PSI) 会报告过去 28 天内网页级和来源级的汇总效果。此外，本文还提供了有关如何改善效果的建议。PSI 可在网站上使用，也可作为 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 数据。如需将 Core Web Vitals 与这些服务搭配使用，请让您的 RUM 提供商了解如何为您的网站启用 Core Web Vitals 监控。
如果您没有 RUM 提供程序，您或许可以使用 web-vitals JavaScript 库扩充现有分析设置，以收集这些指标并生成相关报告。下文将更详细地介绍此方法。
web-vitals JavaScript 库
如果您要为 Web Vitals 实现自己的 RUM 设置，则收集 Web Vitals 衡量数据的最简单方法是使用 web-vitals JavaScript 库。web-vitals 是一个小型模块化库（大约 2KB），提供一个便捷的 API，用于收集和报告每个可在现场衡量的 Web Vitals 指标。
构成网页指标的指标不会全部由浏览器的内置性能 API 直接公开，而是以这些指标为基础构建而成。例如，Cumulative Layout Shift (CLS) 是使用 Layout Instability API 实现的。使用 web-vitals 后，您无需担心自行实现这些指标；它还可确保您收集的数据符合每个指标的方法和最佳实践。
如需详细了解如何实现 web-vitals，请参阅文档和衡量实际网页指标的最佳实践指南。
数据汇总
请务必报告 web-vitals 收集的测量数据。如果系统衡量了此类数据，但未报告，您将永远不会看到这些数据。web-vitals 文档中包含示例，展示了如何将数据发送到通用 API 端点、Google Analytics 或 Google 跟踪代码管理器。
如果您已经有喜爱的报告工具，不妨考虑使用它。如果没有，您可以使用免费的 Google Analytics 来实现此目的。
在考虑使用哪种工具时，不妨考虑哪些人需要访问数据。通常，当整个公司（而非单个部门）都致力于提升广告效果时，企业才能取得最理想的成效。请参阅跨部门解决网站速度问题，了解如何获得不同部门的支持。
数据解读
分析性能数据时，请务必注意分布的尾部。RUM 数据通常表明，性能差异很大 - 有些用户的体验速度很快，而有些用户体验速度很慢。不过，使用中位数来汇总数据可以掩盖这种行为。
对于 Web Vitals，Google 会根据“良好”体验的百分比（而非中位数或平均值等统计数据）来确定网站或网页是否符合建议的阈值。具体而言，要想被视为符合核心 Web 指标阈值，网站或网页的 75% 网页浏览量应达到每项指标的“良好”阈值。
使用实验室数据衡量网页指标
实验室数据（也称为合成数据）是从受控环境（而非实际用户）中收集的。与 RUM 数据不同，实验室数据可以从预生产环境中收集，因此可以纳入开发者工作流和持续集成流程中。收集合成数据的工具示例包括 Lighthouse 和 WebPageTest。
注意事项
RUM 数据和实验室数据始终存在差异，尤其是当实验室环境的网络条件、设备类型或位置与用户存在显著差异时更是如此。不过，对于收集有关 Web Vitals 指标的实验室数据，有几个具体注意事项需要特别注意：
- 在实验室环境中测量的 Largest Contentful Paint (LCP) 可能与使用 RUM 数据在现场测量的 LCP 不同，原因可能是页面加载延迟（通过重定向、连接到服务器的延迟或未缓存的数据）、向不同用户显示不同的内容（取决于屏幕），或其他原因（包括 Cookie 横幅、个性化）。
- 在实验室环境中测量的累计布局偏移 (CLS) 可能会人为地低于 RUM 数据中观察到的 CLS。许多实验室工具只会加载网页，不会与其互动。因此，它们只能捕获初始网页加载期间发生的布局偏移。相比之下，RUM 工具衡量的 CLS 会捕获网页整个生命周期内发生的意外布局偏移。
- Interaction to Next Paint (INP) 无法在实验室环境中衡量，因为它需要用户与网页互动。因此，建议使用总阻塞时间 (TBT) 作为 INP 的实验室代理。TBT 衡量的是“从首次内容绘制到可交互前的等待时间，在该时间段内页面被阻止响应用户输入的总时长”。虽然 INP 和 TBT 的计算方式不同，但它们都反映了引导过程中被阻塞的主线程。当主线程处于阻塞状态时，浏览器在响应用户互动时会发生延迟。
工具
您可以使用以下工具收集 Web Vitals 的实验室测量结果：
- Chrome 开发者工具会在“性能”面板的实时指标视图中测量并报告指定网页的核心网页指标。此视图可在开发者进行代码更改时向其提供实时性能反馈。
- Lighthouse Lighthouse 会报告 LCP、CLS 和 TBT，还会突出显示可能的性能改进。Lighthouse 在 Chrome 开发者工具中以 npm 软件包的形式提供，还可以使用 Lighthouse CI 集成到持续集成工作流中。
- WebPageTest 的标准报告中包含 Web Vitals。WebPageTest 非常适合在特定设备和网络条件下收集有关 Web Vitals 的信息。