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