结合使用 Google 工具，有效地审核、改进和监控您的网站。
发布日期：2020 年 5 月 28 日
核心 Web 指标是一组指标，可根据加载性能、对用户输入的响应能力和布局稳定性等标准评估用户体验。
本指南将介绍用于改进网站 Core Web Vitals 的工作流，但该工作流的起点取决于您是否要收集自己的现场数据。具体到哪里结束，可能取决于您在诊断和解决用户体验问题时发现哪些 Google 工具有用。
最好在实际环境中衡量 Core Web Vitals
核心网页指标专门用于衡量用户对您网站的体验，是一组以用户为中心的指标。Lighthouse 等实验室工具是诊断工具，可突出显示潜在的性能问题和最佳实践。实验室工具是在特定的预定义条件下运行的，可能无法反映您的用户实际获得的 Core Web Vitals 衡量结果。
例如，Lighthouse 是一款实验室工具，可在模拟的桌面或移动环境中通过模拟节流运行测试。虽然在尝试诊断性能问题时，模拟网络和设备运行状况较慢的情况很有帮助，但这只是网络状况和设备功能多样性的一小部分，因此可能无法反映您网站上的用户所体验的情况。
Lighthouse 等实验室工具通常也会以全新访问者的身份对网页进行“冷加载”。这通常是加载速度最慢的部分，但在现实生活中，如果访问者之前访问过该网站，或者在浏览该网站时，可能会缓存一些资源。新访问者和工具在看到 Cookie 横幅或其他内容时，对网站的体验也可能会有所不同。
简而言之，虽然基于实验室的工具可以指明潜在的性能问题，并帮助您调试和迭代，但它们可能无法反映有多少访问者实际体验了您的网站。使用现场数据衡量实际效果，并使用 Lighthouse 等实验室工具诊断如何提升效果。另请参阅何时使用 Lighthouse 部分。
Google 通过 Chrome 用户体验报告 (CrUX) 衡量核心网页指标。这是从真实的 Chrome 用户收集的公开数据集。它是许多 Google 和第三方工具报告网站 Core Web Vitals 的支柱。
不过，CRUX 也有其局限性。它通常可以告诉您何时出现问题，但数据通常不足以告诉您原因。
尽可能收集自己的现场数据
若要提升网站在该领域的表现，最有效的数据集是您构建的数据集。首先，您需要从网站访问者那里收集现场数据。具体方法取决于贵组织的规模，以及您是想付费购买第三方解决方案，还是自行创建解决方案。
付费解决方案几乎肯定会衡量 Core Web Vitals（以及其他性能指标），并且通常会提供各种工具来深入研究生成的数据。对于拥有大量资源的大型组织，这可能是首选方法。
不过，您可能不属于大型组织，甚至可能没有能力购买第三方解决方案。在这些情况下，Google 的 web-vitals 库可帮助您收集所有 Web Vitals 指标。不过，您需要负责报告、存储和分析这些数据的方式。
如果您已经在使用 Google Analytics，但尚未开始收集自己的现场数据，不妨考虑使用 web-vitals 库将在现场收集的 Web Vitals 数据发送到 Google Analytics ，并使用 GA4 的 BigQuery Export 生成数据报告。
了解 Google 的工具
无论您是收集自己的现场数据，还是使用 Google 工具收集数据，在分析 Core Web Vitals 时，都可以使用以下几种 Google 工具。在建立工作流之前，简要了解每种工具有助于您了解哪些工具可能适合您，哪些工具可能不适合。
Chrome 用户体验报告 (CrUX)
如前所述，CrUX 是一套公开的实测数据集，收集自数百万个网站上的一部分真实 Google Chrome 用户。它包含 Core Web Vitals 指标以及适用于流量充足的网站的其他指标。
CrUX 可作为来源级别的每月 BigQuery 数据集或网址级别或来源级别的每日 API 提供，前提是网址或来源在 CrUX 数据集中有足够的样本。您可以通过各种 CrUX 工具获取 CrUX 数据，以便以编程方式访问数据，也可以使用可视化工具供用户使用。
何时使用 CrUX
即使您收集自己的实测数据，CrUX 仍有用。虽然 CrUX 仅代表部分 Chrome 用户，但比较网站的实测数据有助于了解其与 CrUX 数据的一致性。每种方法各有优缺点，可能会导致差异。如果您未为网站收集任何现场数据，那么 CrUX 在提供概览方面尤为有用，前提是您的网站在其数据集中有所体现。
您可以直接使用 CrUX，也可以使用其他工具（包括下文中提及的工具）。直接使用 CrUX 数据集（使用 BigQuery 或 API）有助于显示其他工具中未显示的数据，例如其他工具通常无法提供国家/地区级数据，或者查看其他工具中通常不会显示的 CrUX 中的其他指标。
不应使用 CrUX 的情形
CrUX 仅代表 Chrome 用户，而且仅代表部分 Chrome 用户。完整的 RUM 解决方案可以在支持 Web Vitals 指标的 Chrome 和其他浏览器中涵盖更多体验。
流量不足的网站不会在 CrUX 数据集中显示。如果您遇到这种情况，则需要收集自己的现场数据，以了解您的网站在现场的表现，因为 CrUX 不适用。或者，您需要依赖实验室数据，但如前所述，这些数据可能不具代表性。
由于 CrUX 提供的数据是过去 28 天的滚动平均值，因此在开发过程中，它并不是理想的工具，因为改进需要相当长的时间才能反映在 CrUX 数据集中。
最后，作为一个公共数据集，CrUX 可提供的信息量以及可对这些数据执行的查询方式受到限制。通过捕获您自己的 RUM 数据，您可以收集更多详细信息（例如 LCP 元素），并对数据进行更细的分段，以便找出问题。与未登录的用户相比，登录的用户获得的核心 Web 指标体验更好还是更差？是否存在 LCP 缓慢的用户具有特定的 LCP 元素？哪些互动导致 FID 和 INP 值较高？
PageSpeed Insights (PSI)
PSI 是一款工具，可针对给定网页报告 CrUX 和 Lighthouse 实验室的实测数据。如需了解详情，请参阅这些各个部分。
何时使用 PSI
PSI 非常适合针对移动用户和桌面用户评估网页级或来源级 CrUX 性能。若要初步了解网页或网站的 Core Web Vitals，此工具非常适用。您还可以查看其他网站（例如竞争对手网站）的 Core Web Vitals 数据。
PSI 还会提供 Lighthouse 数据，其中包含有助于您改进核心网页指标的实用建议（前提是指标符合条件）。如果这些不一致，Lighthouse 建议的相关性可能会降低。
由于 Lighthouse 是从服务器运行的，因此与从开发者工具运行 Lighthouse 相比，它可以形成更一致的基准。
哪些情况下不应使用 PSI
PSI 仅适用于公开网址，无法在无法公开访问的开发网站上使用。
只有当网站满足特定资格条件（包括网站热门度阈值）时，才会提供 CrUX 数据。如果网页或来源没有 CrUX 数据，PSI 的用处会降低，因为在这种情况下，它只能显示 Lighthouse 实验室数据。
同样，如果您只有来源级 CrUX 数据，而不是要测试的特定网址的数据，那么这也会限制将来源级实测数据与网页级实验室诊断数据相关联的效用。获取来源级字段数据仍然非常有用，可以作为网站性能摘要，Lighthouse 审核可能有所帮助，但在这种情况下，应格外谨慎。
最后，如果 CrUX 中提供了网页级数据，但与 Lighthouse 实验室数据不同，Lighthouse 提供的建议可能没有多大价值。这尤其适用于加载后 CLS 问题，以及实验室审核效果不佳的互动性核心网页指标 (FID 和 INP)。
Search Console
Search Console 可衡量您网站的搜索流量和效果，包括核心网页指标。只有已确认对网站的所有权的网站所有者才能使用此功能。
Search Console 的一项实用功能是，它会将类似网页（例如使用相同模板的网页）归为一组进行评估。Search Console 还提供了一份基于 CrUX 中实测数据的 Core Web Vitals 报告。
何时使用 Search Console
Search Console 非常适合开发者和非开发者角色，可通过其他 Google 工具无法实现的方式评估搜索和网页效果。该工具以直观的方式呈现 CrUX 数据，并按相似性对网页进行分组，从而让您能够深入了解性能改进对整个网页类别的影响。
哪些情况下不应使用 Search Console
如果项目使用的是按相似性对网页进行分组的其他第三方工具，或者 CrUX 数据集中未包含某个网站，Search Console 可能不适合这些项目。
如果某个网页分组中的示例网页与该分组中的其他网页具有不同的特征，网页分组也会有些混乱。例如，如果该分组整体上未通过特定核心网页指标，但示例网页似乎都通过了相同的核心网页指标。如果某个网页分组包含长尾网页或很少被访问的网页，这些网页的加载速度可能会较慢，因为它们不太可能被缓存。如果长尾网页数量足够多，则可能会影响网页组的整体通过率。
灯塔
Lighthouse 是一款实验室工具，可提供具体的优化建议来提升网页性能。借助 Lighthouse 用户体验流程，开发者还可以编写互动流程脚本，以便在网页加载之外进行性能测试。
Lighthouse-CI 是一款相关工具，可在项目构建和部署期间运行 Lighthouse，以协助进行性能回归测试。它会显示 Lighthouse 报告以及拉取请求，并跟踪一段时间内的性能指标。
何时使用 Lighthouse
Lighthouse 非常适合在本地和预演环境中发现开发期间的性能改进机会。在构建和部署阶段，Lighthouse CI 在预演环境和生产环境中同样有用，因为在这些环境中，需要进行性能回归测试才能保持良好的用户体验。
不应使用 Lighthouse 的情形
Lighthouse（或 Lighthouse CI）不能替代现场数据。Lighthouse 主要是一种诊断工具，会列出预定义网页加载过程中存在的潜在问题和最佳实践。该工具提供的建议并不一定与用户实际获得的效果相符。
虽然 Lighthouse 可用于通过 PageSpeed Insights 等工具诊断生产网站，但最好是在开发和持续集成环境中使用 Lighthouse，以便在性能问题影响生产环境之前加以解决。
您还可以通过 Chrome 开发者工具“Performance”面板中的“Insights”（数据分析）查看 Lighthouse 提供的审核结果，以便更深入地分析网页的性能。
Chrome 开发者工具中的“性能”面板
Chrome 开发者工具是一组浏览器内开发工具，包括“性能”面板。“效果”面板是一款实验室工具，包含两种“模式”：
首次打开“效果”面板时，“实时指标”屏幕会显示当前的 Core Web Vitals 指标，并能够从 CrUX 导入实测数据。在您与网页互动时，该功能可作为性能的“实时”视图，帮助您发现性能问题，尤其是 CLS 和 INP 指标可能显示的加载后问题。
其次，借助“性能”面板，开发者可以捕获网页加载期间或记录时间段内所有网页活动的配置文件（或轨迹）。此视图可深入了解它在网络、渲染、绘制和脚本活动等维度以及网页的 Core Web Vitals 指标方面观察到的所有内容。它还包含与 Lighthouse 提供的数据分析类似的数据分析。
何时使用“效果”面板
开发者应使用“效果”面板深入了解特定网页的效果。
您可以使用实时指标视图快速了解网页的当前性能特性，还可以在用户与网页互动时发现潜在问题。
轨迹视图对于调试影响 INP 的响应能力问题特别有用。确定并重现响应缓慢的互动后，性能面板可以提供大量数据来帮助您了解浏览器中发生的情况，从主线程阻塞到 JavaScript 调用堆栈，再到渲染工作。
何时不应使用“效果”面板
“效果”面板是一款开发者工具，主要提供实验室数据，但也包含来自 CrUX 的一些实测环境背景信息。它不能替代现场数据。
轨迹视图包含大量调试信息，但正因如此，对于新手开发者或非开发者角色的用户来说，可能难以理解。不过，该面板打开时显示的实时指标视图为不需要完整详细信息的用户提供了更易于使用的界面，从而解决了这个问题。
三步工作流程，确保网站的 Core Web Vitals 保持良好状态
在努力改善用户体验时，最好将该过程视为一个连续的周期。若要改进 Core Web Vitals 和其他性能指标，一种方法是：
- 评估网站运行状况并找出痛点。
- 调试和优化。
- 使用持续集成工具进行监控，以发现和防止回归问题。
第 1 步：评估网站健康状况并找出改进机会
最好先从现场数据入手，评估网站健康状况。
- 使用 PageSpeed Insights 可查看来源的整体 Core Web Vitals 体验指标，以及单个网址的具体信息。
- Search Console 的网页分组功能非常适合用于找出需要改进的网页。
- 如果您有 RUM 数据，通常最好使用这些数据来确定存在问题的特定网页或流量细分。
无论您是分析自己收集的现场数据，还是 CrUX 数据，这一步都至关重要。如果您不收集现场数据，CrUX 数据可能就足以为您提供指导（前提是您的网站在数据集中有所体现）。
使用 PageSpeed Insights 分析网站性能
PageSpeed Insights 会显示过去 28 天内位于第 75 百分位数的用户体验数据的 CrUX 数据。这意味着，如果 75% 的用户体验达到为给定指标设置的阈值，则该体验被视为“良好”。
如果您要查看特定网页的效果，请使用该网页。刚开始优化时，您可能需要先从首页入手，因为首页通常是许多网站上最受欢迎的网页之一，可让您全面了解网站。
首先，请专注于 PSI 的了解您的真实用户的体验部分。您最多可以看到四种数据视图：输入的网址的移动设备和桌面设备数据，以及整个来源的数据。比较一下这两种方法，看看它们之间的区别。移动设备通常比桌面设备的性能较差，因为移动设备的资源更为紧缺，并且在运行时网络状况可能更不稳定。如果网址和来源数据明显不同，请尝试了解原因：首页通常是用户访问的第一个网页（即着陆页），因此速度可能会比来源网页慢，因为用户会承受未预热的浏览器缓存带来的全部影响。由于所有共享资源都会缓存，从而降低来源级汇总数据，因此后续网页的加载速度可能会更快。
PSI 还会显示所有三个 Core Web Vitals（LCP、CLS 和 INP）以及诊断性 TTFB 和 FCP 指标。是否有任何核心 Web 指标未达到要求，未达到要求的程度如何？这将指明您需要重点改进哪些方面。
了解这些数字之间的关系，尤其是 LCP。如果 LCP 较慢（如本例所示），请查看 TTFB 和 FCP，这两个指标都是 LCP 的重要里程碑。在此示例中，TTFB 为 1.8 秒，这将很难达到良好 LCP 所建议的 2.5 秒阈值。这表明后端速度缓慢（服务器问题或缺少 CDN）、网络速度较慢，或者重定向延迟了第一个 HTML 字节。如需了解详情，请参阅优化 TTFB 指南。FCP 还需要再花费一秒钟的时间，这可能也表明网络速度较慢。在本例中，LCP 与 FCP 相差不久，这表明网页本身加载后，LCP 资源已得到充分优化。CrUX 现在还会在资源类型和子部分中显示更多诊断信息，这也有助于您诊断 LCP 问题。
对于 CLS，请查看 CrUX CLS 和 Lighthouse CLS 得分，看看这是加载 CLS 问题（Lighthouse 会捕获并提供建议）还是加载后 CLS 问题（Lighthouse 无法捕获）。如需了解详情，请参阅“优化 CLS”指南。
如需了解自适应性，请查看 INP 得分。查看 Lighthouse 中的 TBT 审核，了解初始网页加载期间是否有大量 JavaScript 处理操作正在进行，这可能会影响 INP。INP 是一个很难提升的指标，因此请参阅 INP 优化指南了解详情。
在 Search Console 中找出效果不佳的网页
虽然 PSI 适用于您要测试的特定网址或整个网站，但 Search Console 可以帮助您将工作重点放在特定类型的网页上。如果许多网页具有共同的主题或技术，并且 Search Console 可以成功识别这些主题或技术，这种方法就特别有用。
Search Console 中的“Core Web Vitals”报告会显示网站的整体表现，但您仍然可以深入了解需要注意的具体网页。借助 Search Console，您还可以：
- 找出需要改进的各个网页组，以及提供良好用户体验的网页组。
- 按状态、指标和一组组类似网页（例如电子商务网站上的商品详情页面）获取按网址划分的效果精细数据。
- 获取详细报告，了解移动版和桌面版网址在各个用户体验质量类别中的分桶情况。
确定要查看的具体网页后，您可以使用 PSI（如前所述），进一步了解这些网页存在的问题。
第 2 步：调试和优化
在第 1 步中，您应该已经确定了需要改进性能的网页，以及要改进哪些核心网页指标。您可以使用 Google 工具获取更多信息，以了解问题的根本原因。
- 查看 Lighthouse 审核结果，获取针对网页的概要指南
- 使用“效果”面板中的实时指标视图实时分析 Core Web Vitals。
- 使用“性能”面板中的轨迹功能调试性能问题并测试代码更改。
如需更详细的指南，请参阅以下指南：
利用 Lighthouse 发掘优化机会
PageSpeed Insights 会为您运行 Lighthouse。您还可以在 Chrome 开发者工具中运行 Lighthouse，这对于在本地验证修复程序非常有用，不过性能面板（下文将介绍）是一款更全面的工具，可用于在本地发现和解决性能问题。
关键是要验证 Lighthouse 审核是否复现了您尝试解决的问题（例如 LCP 缓慢或 CLS 问题）。默认情况下，Lighthouse 仅评估网页加载期间的用户体验。由于它是一款实验室工具，因此它还会排除 INP，而改用 TBT。
如果 Lighthouse 指标显示与您尝试解决的问题类似的问题，其审核中丰富的信息可以帮助您发现问题并提出解决方案。
您可以过滤审核，仅查看您感兴趣的核心网页指标，以便专注于解决与特定指标相关的问题：
对于 INP，请使用 TBT 审核来找出可能会影响这些指标的问题，但请注意，如果没有互动，Lighthouse 的诊断能力会受到限制。
使用 Chrome 开发者工具的实时指标屏幕实时分析
在“性能”面板中，Chrome DevTools 的实时指标屏幕会在网页加载期间和浏览网页时实时显示核心网页指标。因此，它可以捕获 INP 以及加载后发生的布局偏移。您还可以查看每个指标的更多详细信息：
此视图提供了许多有用信息，有助于识别性能问题，甚至可以从 CrUX 中提取字段信息。如需了解更多信息，您可以使用轨迹进行深入分析。
使用“效果”面板展开细目
借助 Chrome 开发者工具中的“性能”面板，您可以记录所记录时间段内所有网页行为的配置文件（或轨迹）。
您可以在数据分析侧边栏中查看性能数据分析。此页面还会显示 Core Web Vitals 指标以及相应字段值（如果有）。
布局偏移轨道会突出显示布局偏移，点击这些轨道可详细了解发生偏移的元素，以便调试 CLS。
主要时间（例如 LCP）显示在轨迹底部的时间中。点击这些链接可了解详情。
长任务（可能会导致 INP 问题）也会在火焰图中用红色三角形突出显示。
这些功能以及“性能”面板的其他部分中的信息有助于您确定修复措施是否对网页的 Core Web Vitals 有任何影响。
在现场调试 Core Web Vitals
实验室工具并不总能找出影响用户的所有 Core Web Vitals 问题的原因。这也是为何收集自己的现场数据非常重要的原因之一，因为现场数据会考虑实验室数据无法考虑的因素。
如需了解详情，请参阅在现场调试性能。
第 3 步：监控更改
修复所有问题后，您需要确保这些问题已得到妥善解决，并且不会出现新的核心网页指标问题。为此，您需要在开发者工作流程中监控性能问题，以防止将性能问题发布到生产环境，并定期监控现场数据以确保这一点。
在持续集成 (CI) 环境中监控性能请求
借助 Lighthouse-CI，您可以自动对代码提交内容运行 Lighthouse 审核，以防止性能回归问题进入代码。这可以检查性能时间（可能会有差异），也可以仅用于性能审核，作为 lint 工具来防止代码中存在不良做法。
使用现场数据查看网站健康度趋势
虽然您应该力求在所有性能问题进入生产环境之前发现并解决它们，但使用 RUM 监控现场数据对于发现漏网之鱼至关重要。市场上有许多商用 RUM 产品可帮助您实现这一点。web-vitals JavaScript 库可以自动收集网站的字段数据，并可选择使用这些数据来为自定义信息中心和提醒系统提供支持。
对于未采用 RUM 解决方案的网站，您可以使用各种 CrUX 工具对现场数据进行基本趋势分析。
总结
为了确保提供快速且令人愉悦的用户体验，您需要秉持“注重性能”的理念，并采用工作流程来确保进度。借助合适的审核、调试和监控工具和流程，您可以轻松打造出色的用户体验，并确保 Core Web Vitals 指标符合良好的阈值要求。