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