Chrome DevTools中的全新性能功能

本文指南涵盖了 Chrome DevTools 中的一些现代 Web 性能功能，重点介绍了全新的性能面板功能，帮助你优化核心 Web Vitals 并改善整体 Web 性能。

我们将介绍的内容

在本指南中，我们将深入探讨 Chrome DevTools 中的全新性能面板功能。我们将探索这些新功能是什么、如何访问它们，以及如何有效使用它们来修复 Web 性能和核心 Web Vitals。

在接下来的章节中，我们将直接进入全新的性能面板功能，之后的部分还会回顾核心 Web Vitals 并提供更多关于如何在工作流中使用性能面板的背景信息。

如果你喜欢视觉化学习，这段视频将是本文中展示功能的有力补充。

介绍 DevTools 中的全新性能面板

截至 2024 年 8 月，Chrome DevTools 中的全新性能面板功能仍处于实验阶段，只有在启用实验性功能后才能使用。用户界面在未来更新中可能会有所变化。

Chrome DevTools 中的全新性能面板功能由两个主要部分组成：

• 性能面板的 DevTools 登陆页面。该页面显示了核心 Web Vitals 的实验室数据和现场数据：
  
• 录制后可以打开的性能面板侧边栏。侧边栏提供了额外的信息，如 LCP 加载阶段（稍后在指南中介绍）：
  

  注意：此功能目前处于实验阶段，用户界面在未来更新中可能会有所变化。

全新性能面板展示了什么？

全新性能面板提供了有助于理解和优化网站性能的重要信息。以下是一个快速概览（你可以将截图中的编号与下面列表中的描述进行匹配）：

• 1.核心 Web Vitals 数据：LCP、CLS 和 INP 的实验室数据和现场数据。
• 2.CrUX 数据设置：来自 Chrome 用户体验报告（CrUX）的现场数据自定义选项。
• 3.INP 交互元素：触发 INP 的交互元素。
• 4.录制设置：用于控制 CPU 和网络条件的调节选项。
• 5.录制控制：用于开始新录制的控制按钮。

核心 Web Vitals 数据：实验室和现场

性能面板的一大亮点是展示核心 Web Vitals 的实验室和现场数据：

• 实验室数据：代表从你的本地浏览会话中收集的性能指标。
• 现场数据：来自 Chrome 用户体验报告（CrUX），代表真实用户的体验。

CrUX 的现场数据可以自定义为显示整个站点的原始数据或仅显示当前 URL 的数据，并且可以选择桌面、移动或所有设备的数据。

除了原始数据，性能面板还提供友好的解释。例如：

“你本地的 LCP 540 毫秒表现良好，与 97% 的真实用户 LCP 体验评级相同。此外，现场数据的第 75 百分位 LCP 为 993 毫秒，也表现良好。”

交互元素

性能面板可以链接到有助于理解性能指标的重要元素。这些元素包括：

• LCP 元素：LCP 指标中被认为最大的元素。
• INP 目标元素：触发 INP 的交互元素。
  
  点击这些元素将带你到元素面板中的相应节点。

LCP 请求发现

在通过性能面板收集页面加载记录后，该部分会显示。它提供了有关 LCP 资源的有用建议，例如：

• 是否懒加载了 LCP（建议不要这样做）。

• 是否为 LCP 资源使用了 fetchpriority=high。

• 该请求是否可以直接从主 HTML 文档中发现。
  

  LCP 阶段

  在通过性能面板收集页面加载记录后，该部分也会显示。它将 LCP 的时间分为不同阶段（也称为 LCP 子部分），包括：

• 首次字节时间：接收 HTML 文档响应的第一个字节所花费的时间。

• 资源加载延迟：发现和请求 LCP 资源所花费的时间。

• 资源加载持续时间：下载 LCP 资源所花费的时间。

• 资源渲染延迟：下载完成后，渲染 LCP 资源所花费的时间。
  
  当你打开该部分时，DevTools 会在性能面板的概要文件上叠加注释，直观地分解不同的 LCP 阶段。
  
  更新后的性能面板还包括以下控制功能：

• 开始新的录制。

• 限制 CPU 和网络条件，允许你模拟真实用户体验。
  

  如何使用新的性能面板功能

  现在你已经了解了更多关于新性能功能的信息，接下来是如何在 Chrome DevTools 中启用和使用这些功能。

启用性能面板功能

要访问这些新功能，你需要在 Chrome Canary DevTools 中启用一些实验性功能：

1. 从这里下载、安装并打开 Chrome Canary。
2. 打开 Chrome DevTools（在 Windows 上使用 Cmd + Alt + I 或 F12）。
3. 进入 DevTools 的设置面板（点击齿轮图标或按 F1）。
4. 导航到 “Experiments” 标签。
5. 启用以下实验：
   • “Performance panel: enable live metrics landing page”
   • “Performance panel: enable annotations”
   • “Performance panel: enable performance insights”
6. 使用 Alt + R 重新加载 DevTools，并重新加载当前网页。

配置 CrUX 访问

在性能面板中查看 CrUX 数据是需要选择加入的，因为你正在查看的 URL 会被发送到 CrUX API。

提示:当你启用 CrUX 数据访问时，DevTools 会提供隐私声明。

要启用此功能并查看来自 Chrome 用户体验报告的现场数据：

1. 在新的性能面板登陆页面上，点击“Field Data”下的“Set up”。
2. 点击“Ok”进行选择加入。

至此，你已设置完成，可以查看来自 CrUX 的现场数据。此时，可以熟悉自定义选项，比如在站点级别和 URL 级别数据之间进行选择，以及选择设备类型。

选择站点级别和 URL 级别数据

选择设备类型

核心 Web Vitals 简介

核心 Web Vitals 是 Google 认为在网页整体用户体验中非常重要的三个指标。它们包括：

• **最大内容绘制（LCP）**：页面主要内容渲染的速度。
• **下一次绘制的交互（INP）**：页面对用户输入的响应速度。
• **累计布局偏移（CLS）**：页面视觉布局的稳定性。

核心 Web Vitals 可以在实验室和现场环境中进行测量。Google 目前将核心 Web Vitals 用作搜索结果中的排名因素，因此它们对 SEO 十分重要。

到此为止，你已经了解了新的性能面板功能是什么、如何启用以及如何根据你的需求配置它们。接下来，你将看到如何将这些性能功能融入你的工作流程中。

在工作流程中使用新性能功能

现在你已经知道如何访问和配置新的性能面板，但如何将其整合到开发和性能调试工作流程中呢？

• 1.持续监控：在浏览你的网站（以及竞争对手的网站）时保持性能面板开启，以快速了解不同页面的核心 Web Vitals 性能。

• 2.开发反馈循环：在性能调试和开发过程中使用它，记录随着更改而产生的实验室数据的小幅改进。

  提示同时要考虑回归问题：例如，你可能通过提前加载 LCP 修复了它的问题，但这可能加剧 CLS 问题，因为其他网络资源现在被延迟加载。

• 3.比较分析：使用站点级别与 URL 级别数据来了解特定页面的性能相对于整个站点的表现。

• 4.设备特定优化：定期在移动设备和桌面视图之间切换，确保各设备的性能表现良好。

• 5/交互测试：点击页面上的元素以触发 INP 测量，并识别响应缓慢的交互。

理解数据：实验室与现场

现在是深入理解性能面板提供的数据的时候了。一个重要的概念是实验室数据和现场数据之间的区别。

为什么实验室数据与现场数据不同

实验室数据和现场数据的性能测量方式不同：

• 实验室数据是在具有特定设备和网络设置的受控环境中收集的。
• 现场数据代表了真实世界中的各种设备、网络和用户行为。

使用新的性能面板时，检查实验室和现场数据都很重要。例如，以下截图显示了 LCP 指标的“良好”实验室评分，因为页面是在快速网络和快速机器上打开的：

---

然而，同一个页面的 LCP 指标在现场评分中为“差”。这些分数的差异是完全正常的，但这突显了在核心 Web Vitals 中同时检查这两种数据的重要性。

站点级别与 URL 级别数据

提示:如果网站或 URL 不够流行，可能根本不在 CrUX 数据集中。

性能面板允许你在现场数据中在站点级别和 URL 级别数据之间切换。
何时使用哪种数据：

• 当你希望了解整个网站的整体性能或处理低流量页面时，使用站点级别数据。
• 当你优化特定的高流量页面或调查页面特定问题时，使用 URL 级别数据。

真实世界的性能见解

此部分应用之前讨论的概念来分析一个热门旅游网站的性能。

LCP（最大内容绘制）分析

• 实验室数据：4.15秒
• 现场数据：4.47秒（第 75 百分位）

这个网站的 LCP 在实验室和现场数据中都得分较差，这表明页面的主要内容渲染速度太慢，可能是由于大图片或服务器响应时间较慢。

CLS（累计布局偏移）分析

• 实验室数据：0.30
• 现场数据：0.19（第 75 百分位）

这个网站在实验室数据中的 CLS 得分较差，在现场数据中得分“需要改进”。这表明页面上发生了大量意外的布局偏移，可能让用户感到沮丧。

分析 Opodo 网站的 INP（交互到下一次绘制）

• 实验室数据：320 毫秒
• 现场数据：394 毫秒（第 75 百分位）

该网站的 INP 得分在实验室和现场数据中均显示“需要改进”。这表明用户交互响应速度不如预期，可能是由于繁重的 JavaScript 执行或主线程任务过长。

理解性能面板中的 LCP

新的性能面板侧栏提供了一个“洞察”窗格，能提供关于 LCP 指标的更多信息。要访问此侧栏，你需要首先捕获页面加载的录制。点击性能面板中的“录制并重新加载页面”按钮，或使用 macOS 上的快捷键 Cmd + Shift + E 或 Windows 上的 Ctrl + Shift + E。

打开侧栏中的“洞察”窗格后，可以从 LCP 请求发现部分看到以下信息：

• LCP 资源是图片
  通常，LCP 元素是图片、视频或文本块。在这种情况下，LCP 元素是一张图片。

• 未使用 fetchpriority=high 属性
  尽管该图片可以从主 HTML 文档中发现，且未使用延迟加载（这是好事），但 LCP 元素资源上没有设置 fetchpriority=high 属性（通常不太好）。

从性能面板的网络摘要视图中可以清楚地看到，LCP 图片被视为低优先级请求。

• 元素渲染延迟时间过长
  LCP 阶段部分显示了大量时间花费在元素渲染延迟上。这意味着即使图片下载完成，渲染图片到页面上仍然需要较长时间。
  
  有趣的是，Opodo 网站上的 LCP 图片似乎是一个自动播放轮播的一部分。这表明 JavaScript 控制的轮播可能导致了图片渲染延迟。上一个截图也确认了在各个 LCP 阶段中发生了很多活动。

考虑到轮播自动播放，后续轮播中的图片可能会成为更新的 LCP 元素。

• 资源加载时间较长
  LCP 阶段部分还显示资源加载时间较长，达到了半秒钟。

虽然使用了 WebP 图片格式，但通过使用 Squoosh 将图片转换为 AVIF 格式，性能可能会更好。在一次快速测试中，WebP 图片从 100 多 KB 压缩到 30 KB 转换为 AVIF 格式时。

LCP 图片的大小为 1920 x 880 像素，但在测试中，该图片的实际显示尺寸不匹配。使用 srcset 或为背景图片设置 image-set 可以帮助为较小屏幕减少图片大小，从而减少资源加载时间。

提示
很容易假设主要的 LCP 图片因 LCP 相关的 JavaScript 执行而部分延迟，例如 JavaScript 轮播代码。然而，你应该从 DevTools 性能分析中确认这一假设。主线程可能忙于其他任务，导致 LCP 图片渲染延迟。

如何有效使用新的性能面板

你已经了解了新的性能面板功能，但如何有效使用这些功能？

从哪里开始使用 DevTools 性能？

考虑到性能面板只是 DevTools 的一部分，有很多东西可以探索！我们建议你从红色标记的差劲现场指标开始查看核心 Web Vitals。这些指标通常是优化的首要目标。

以下截图显示了三项核心 Web Vitals 指标，其中 LCP 指标被标记为红色。在这种情况下，你应该首先调查 LCP 指标。

修复 LCP 后，你可能还会发现 CLS 和 INP 显示为“需要改进”，接下来你应该重点关注哪个？

在这种情况下，专注于 CLS 可能会有一些容易实现的目标：

• 本地 CLS 指标为 0.33（较差）。
• 本地 INP 指标为 40 毫秒（良好）。

能够在本地重现较差的核心 Web Vitals 指标是一个难得的机会！因此，当你在本地找到较差的指标时，这是一个深入研究并修复它的好机会。

何时更改 CrUX 的设备下拉菜单

定期切换 CrUX 数据中的移动设备和桌面视图可以提供有价值的见解。通常，核心 Web Vitals 指标在移动设备上表现更差：

• INP：由于设备硬件较低，导致主线程更忙。
• CLS：较慢的网络速度加剧了内容到达时发生的布局偏移。
• LCP：较慢的网络速度导致图片下载缓慢。

移动设备和桌面指标之间的显著差异可能暗示着不同的代码路径或代码优化未按预期工作。

理解性能面板中的 INP

LCP 和 CLS 有时可能更直观：你重新加载页面并可以在 DevTools 中看到 LCP 和 CLS 指标。但 INP 是如何测量的呢？

INP 需要通过用户交互来测量。这可以是鼠标点击、触摸屏点击或键盘交互。

节流对性能的影响

性能面板允许你限制 CPU 和网络条件。以下是其价值所在：

• CPU 节流：有助于模拟较慢设备的性能，提供更真实的现实世界性能视图。
• 网络节流：允许你在各种网络条件下测试网站性能，帮助优化针对网络较慢或不稳定的用户的体验。
  
  通过使用这些限制选项，您可以更好地了解网站在各种真实场景中的性能表现。

使用性能面板修复 Web Vitals 问题

前面部分已经开始探讨修复核心 Web Vitals 问题的途径。虽然本文并不是关于修复网页性能问题的完整指南，但接下来的部分将提供一些关于解决常见核心 Web Vitals 问题的技巧和策略，利用 Chrome DevTools 中的新性能面板功能。

本节使用了具有性能问题的演示页面 cwv-guide.vercel.app，并使用应用了所有核心 Web Vitals 修复的版本 cwv-guide.vercel.app/solution。

• 优化前：
  
• 优化后
  

  用新的性能面板修复LCP

  首先，打开性能面板，加载演示页面，并观察页面加载期间本地 LCP 指标的变化。
  
  LCP 发展是理解 LCP 指标计算方式的绝佳途径。

尽管了解 LCP 指标的变化是有帮助的，但具体哪些元素导致了 LCP 变化以及为什么会变化可能并不清楚。

提示
这个截图来自 DebugBear。你可以在此处查看包含 LCP 发展部分的免费网站速度测试。
LCP 发展表显示了页面渲染时 LCP 元素如何发生变化。
每次页面上出现比之前的 LCP 元素更大的元素时，LCP 值都会更新。

通过查看 LCP 请求发现部分，清楚地表明 LCP 图片缺少一些优化：

• LCP 阶段部分显示，资源加载时间占据了 LCP 时间的 90% 以上（750 毫秒），这表明 LCP 图片过大且未经过性能优化。
• 将 LCP 阶段与性能面板上的网络轨道结合可以发现，LCP 图片并未被优先加载：
  
  从之前的截图可以得出几个关键点：

1. 截图左上角的小矩形代表主 HTML 文档，然而，主 HTML 文档与 LCP 图片请求之间存在较大的延迟。
2. 资源加载延迟似乎是由需要先下载的 JSON 文件造成的，该文件必须在 LCP 图片请求之前下载。
3. 当最终请求 LCP 图片时，下载过程耗时较长。

LCP 图片修复总结
|已应用修复措施 | 原因|
|–|–|
|图像格式: 使用 Squoosh 等工具将 LCP 图像转换并调整为 AVIF 格式。 | 资源加载时间过长，表明图像太大。|
|预加载: 为 LCP 图像及其请求链添加了 。 | LCP 请求发现部分表明 LCP 图像无法直接从主 HTML 文档中发现。|
|避免懒加载: 移除了 LCP 图像的懒加载。 | LCP 请求发现部分表明 LCP 图像正在被懒加载。|

应用这些修复后，LCP 指标显著改善。

你可以在此处试用仅应用 LCP 修复的演示页面。

使用新性能面板修复 CLS

截至 2024 年 8 月，Chrome DevTools 中的新性能面板功能对诊断和修复 CLS 问题的支持有限。然而，您仍然可以使用性能面板中的现有工具来识别和解决 CLS 问题。
此外，还有一个新的 CLS 元凶部分帮助你识别并修复意外的布局偏移问题。然而，目前这似乎还在开发中。

在新性能面板功能演进的过程中，预计会有更多详细的 CLS 洞察和建议。目前，你可以使用现有工具诊断并修复 CLS 问题。

CLS 修复总结

• 图片宽高比：为图片添加宽高比以防止布局偏移。
• 服务器端渲染：通过服务器渲染关键内容，减少水合作用期间的布局偏移。
• 字体匹配：使用与网页字体接近的备用字体，减少备用字体过渡到网页字体时的布局偏移。

应用 CLS 修复后，CLS 指标显著改善。

你可以在此处试用同时应用 LCP 和 CLS 修复的演示页面。

使用新性能面板修复 INP

由于这是一个没有真实 CrUX 数据的演示页面，因此不清楚是否存在交互缓慢的问题。DebugBear 的真实用户监控（RUM）可以帮助跟踪这些信息，无论您的网站是否具有 CrUX 数据。

在本地测试时，通常的方法是：保持性能面板打开，与页面交互，观察 INP 指标是否恶化。

在真实网站中，通常会有许多可交互的元素。首先选择一些关键组件，比如代表行动号召的元素。在演示页面中，有一个行动号召按钮。

点击此按钮后，运行了一个颜色调色板提取算法：

打开性能面板后，INP 指标更新并显示“较差”得分，以及被交互的元素。

提示 :引用 a.cta-button 指定该元素是带有 cta-button 类的 <a> 标签。

如果你知道哪个元素被交互，如何发现导致交互缓慢的代码？
点击性能面板中的 INP 元素，查看对应的节点，然后导航到“事件监听器”窗格，查看与该元素交互时运行的具体 JavaScript 函数。

修复可能因情况而异，有时甚至与 JavaScript 无关。修复该问题的方案是将颜色调色板提取算法移至 Web Worker，这样可以释放主线程以响应用户交互，从而改善 INP 指标。

应用 INP 修复后，INP 指标显著改善。

你可以在此处试用应用了所有修复（LCP + CLS + INP）的演示页面。

深入了解 DebugBear

虽然新的 Chrome DevTools 性能功能提供了有价值的信息，但有时你需要更详细的分析，尤其是针对真实用户数据。此时 DebugBear 便派上了用场。

DebugBear 提供了 LCP 加载阶段（也称为 LCP 子部分）的多种视图。你可以查看真实用户的单个页面视图

还可以：

• 跟踪 LCP 阶段随时间的变化：查看站点更改如何影响 LCP 加载的各个阶段。
• 跨页面比较：轻松比较站点不同页面的 LCP 阶段。
• 按用户条件进行分段：分析不同设备类型、连接速度和地理位置下的 LCP 阶段。

DebugBear 还提供类似的 INP 元素视图，包括 INP 组件细分，并有多个 CLS 调试工具。