结合使用 Google 的各种工具，以有效地审核、改进和监控您的网站。
发布日期：2020 年 5 月 28 日
核心 Web 指标是一组指标，可根据加载性能、对用户输入的响应能力和布局稳定性等标准评估用户体验。
本指南将介绍用于改进网站核心网页指标的工作流程，但该工作流程的起点取决于您是否收集自己的现场数据。问题发生在哪里可能取决于您认为哪些 Google 工具有助于诊断和解决用户体验问题。
最好是在现场衡量核心网页指标
核心网页指标专门用于衡量用户对您网站的体验，是一组以用户为中心的指标。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 信息中心中查看 BigQuery 数据，以便网站查看其历史趋势。
何时使用 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 是一款工具，用于报告来自 Lighthouse 和 Lighthouse 实验室为特定网页提供的字段数据。有关详情，请参阅这些部分。
何时使用 PSI
PSI 非常适合针对移动用户和桌面用户，在网页级别或来源级别评估 CrUX 性能。如果您想对网页或网站的核心网页指标进行初步概览，不失为明智之选。您还可以查看竞争对手等其他网站的 Core Web Vitals 数据。
此外，PSI 还会提供 Lighthouse 数据，并在各项指标相一致的情况下，提供改进 Core Web Vitals 的实用建议。当两者不一致时，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
如果项目使用的是按相似性对网页进行分组的其他第三方工具，或者 CrUX 数据集中未包含某个网站，Search Console 可能不适合这些项目。
如果某个网页分组中的示例网页与该分组中的其他网页具有不同的特征，网页分组也可能会有些混乱。例如，如果该分组整体上未通过特定核心网页指标，但示例网页似乎都通过了相同的核心网页指标。如果组包含长尾网页或很少访问的网页，这些网页就可能加载缓慢，因为网页被缓存的可能性较低。如果长尾网页数量足够多，它们可能会影响网页组的整体通过率。
灯塔
Lighthouse 是一款实验室工具，可提供提升网页性能的具体机会。借助 Lighthouse 用户体验流程，开发者还可以编写互动流程脚本，以便在网页加载之外进行性能测试。
Lighthouse-CI 是一种相关工具，可在项目构建和部署期间运行 Lighthouse，以帮助进行性能回归测试。它会显示 Lighthouse 报告以及拉取请求，并跟踪一段时间内的性能指标。
何时使用 Lighthouse
Lighthouse 非常适合在本地和预演环境中发现开发期间的性能改进机会。在构建和部署阶段，Lighthouse CI 同样适用于预演环境和生产环境，因为在这些环境中，需要进行性能回归测试才能保持良好的用户体验。
不应使用 Lighthouse 的情况
Lighthouse（或 Lighthouse CI）不能替代现场数据。Lighthouse 主要是一种诊断工具，会列出预定义网页加载过程中存在的潜在问题和最佳实践。该工具提供的建议并不一定与用户实际获得的效果相符。
虽然 Lighthouse 可用于通过 PageSpeed Insights 等工具诊断生产环境中的网站，但 Lighthouse 还是适合在开发和持续集成环境中使用，以便在应用进入生产环境之前解决性能问题。
Chrome 开发者工具中的“性能”面板
Chrome 开发者工具是一系列浏览器内开发工具，包括“性能”面板。“效果”面板是一款实验室工具，包含以下两种“模式”：
首次打开“效果”面板时，“实时指标”屏幕会显示当前的 Core Web Vitals 指标，并能够从 CrUX 导入实测数据。当您与网页交互以尝试发现性能问题时，它非常有用，它可以帮助您实时了解网页的性能问题，尤其是在使用 CLS 和 INP 指标时可能会遇到的加载后问题。
其次，借助“性能”面板，开发者可以捕获网页加载期间或所记录时间段内所有网页活动的配置文件（或跟踪记录）。此视图可深入了解它在网络、渲染、绘制和脚本活动等维度以及网页的 Core Web Vitals 指标方面观察到的所有内容。
何时使用“效果”面板
开发者应使用“效果”面板深入了解特定网页的效果。
您可以使用实时指标视图快速了解网页的当前性能特征，还可以在用户与网页互动时发现潜在问题。
轨迹视图对于调试影响 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，它们都是该指标的重要里程碑。在此示例中，TTFB 为 1.8 秒，这将很难达到 2.5 秒的建议阈值，从而无法获得良好的 LCP。这表明后端较慢（服务器出现问题或缺少 CDN）、网络速度较慢或重定向导致初始 HTML 字节延迟。如需了解详情，请参阅优化 TTFB 指南。FCP 还需要再花费一秒钟的时间，这可能也表明网络速度较慢。在本例中，LCP 与 FCP 相差不久，这表明网页本身加载后，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 步中，您应该已经确定了需要提升性能的网页，以及需要改进哪些 Core Web Vitals 指标。您可以使用 Google 工具获取更多信息，以了解根本原因以确定问题。
- 运行 Lighthouse 审核以获取页面级指导
- 使用“效果”面板中的实时指标视图实时分析 Core Web Vitals。
- 使用“性能”面板中的轨迹功能调试性能问题并测试代码更改。
如需更详细的指南，请参阅以下指南：
利用 Lighthouse 发现机会
PageSpeed Insights 会为您运行 Lighthouse，但对于本地开发，您也可以通过 Chrome 开发者工具运行 Lighthouse，这对于在本地验证修复非常有用。
关键是要验证 Lighthouse 审核是否复现了您尝试解决的问题（例如 LCP 缓慢或 CLS 问题）。默认情况下，Lighthouse 仅评估网页加载期间的用户体验。由于它是一款实验室工具，因此它还会排除 INP，而改用 TBT。
当 Lighthouse 指标显示与您尝试解决的问题类似的问题时，其审核中的丰富信息可以帮助您发现问题并推荐解决方案。
您可以过滤审核结果，仅查看您感兴趣的核心网页指标，专注于修复与特定指标相关的问题：
对于 INP，请使用 TBT 审核来找出可能会影响这些指标的问题，但请注意，如果没有互动，Lighthouse 的诊断能力会受到限制。
使用 Chrome DevTools 实时指标屏幕实时分析
Chrome DevTools 的“Performance”面板中的“实时指标”界面会在网页加载期间和浏览网页时实时显示核心网页指标。因此，它可以捕获 INP 以及加载后发生的布局偏移。您还可以查看每个指标的更多详细信息：
虽然此视图提供了许多有助于发现性能问题的实用信息，但您也可以通过轨迹展开细目了解更多信息。
通过“性能”面板展开细目
借助 Chrome DevTools 中的“性能”面板，您可以记录指定时间段内所有页面行为的配置文件（或轨迹）。
关键时间（例如 LCP）显示在“时间”轨道中。点击这些链接可了解详情。
Layout Shifts 轨道会突出显示布局偏移，点击这些偏移可详细了解哪些元素发生偏移，以调试 CLS。
长任务（可能会导致 INP 问题）也会用红色三角形突出显示。
这些功能以及“性能”面板的其他部分中的信息有助于您确定修复措施是否对网页的 Core Web Vitals 有任何影响。
在现场调试 Core Web Vitals
实验室工具并不总能找出影响用户的所有 Core Web Vitals 问题的原因。这也是收集您自己的现场数据的重要性的原因之一，因为这需要考虑实验室数据无法做到的因素。
如需了解详情，请参阅在现场调试性能。
第 3 步：监控更改
修复所有问题后，您需要确保这些问题已得到妥善解决，并且不会出现新的核心网页指标问题。为此，您需要在开发者工作流程中监控性能问题，以防止将性能问题发布到生产环境，并定期监控现场数据以确保这一点。
监控持续集成 (CI) 环境中的绩效要求
借助 Lighthouse-CI，您可以针对代码提交自动运行 Lighthouse 审核，以防止输入代码时性能下降。这可以检查性能时间（可能会有差异），也可以仅用于性能审核，作为 lint 工具来防止代码中存在不良做法。
使用现场数据查看网站健康度趋势
虽然您应该力求在所有性能问题进入生产环境之前发现并解决它们，但使用 RUM 监控现场数据对于发现任何漏网之鱼至关重要。有很多商业 RUM 产品可以帮助您解决这一问题。web-vitals JavaScript 库可以自动收集网站的字段数据，并可选择使用这些数据来为自定义信息中心和提醒系统提供支持。
对于未采用 RUM 解决方案的网站，您可以使用 CrUX 信息中心对现场数据进行基本趋势分析。对于 CrUX 中的网站，它会报告以下内容：
- 网站概览，该部分会将 Core Web Vitals 细分为桌面设备和移动设备类型。
- 按指标类型划分的历史趋势：CrUX 报告数据的每个可用月度版本的指标随时间的分布情况。
- 用户特征：显示整个来源中各个受众特征（包括设备和有效连接类型）的用户网页浏览量分布情况。
CrUX 信息中心基于 CrUX BigQuery 数据集，该数据集每月更新一次。这是一个很好的提醒，提醒您定期检查核心 Web 指标。
总结
为了确保提供快速且令人愉悦的用户体验，您需要秉持“以性能为先”的理念，并采用工作流程来确保进度。借助合适的审核、调试和监控工具和流程，您可以轻松打造出色的用户体验，并确保符合良好 Core Web Vitals 指标的阈值要求。