效果数据分析：获取有关网站性能的富有实用价值的分析洞见

Jecelyn Yeen

Sofia Emelianova

注意：性能数据分析面板已弃用，并将于 2024 年移除。我们建议您改用性能面板。如需了解详情，请参阅 2024 年及之后的性能工具。

使用“效果数据分析”面板，获取有关网站性能的可作为行动依据和用例的数据分析。

注意：此功能仅适用于 Chrome，并不适用于 Chromium。

注意：这是 Chrome 102 中的一项预览功能。我们的团队正在努力改进此功能，期待收到您的反馈，以便进一步改进。

为什么要使用新面板？

新的“性能数据分析”面板是一项实验性功能，旨在解决开发者在使用现有的“性能”面板时遇到的以下 3 个痛点：

• 信息过多。效果数据分析面板经过重新设计后，可简化数据并仅显示相关信息。
• 难以区分各种使用情形。性能数据分析面板支持基于用例的分析。它目前仅支持网页加载用例，未来将根据您的反馈提供更多支持，例如互动。
• 需要对浏览器的工作原理具备深厚的专业知识，才能有效使用。效果数据分析面板会在数据分析窗格中突出显示关键数据分析，以及有关如何解决问题的实用反馈。

简介

本教程介绍了如何使用性能数据分析面板衡量和了解网页加载性能。继续阅读或观看本教程的上述视频版本。

打开“性能数据分析”面板

1. 打开开发者工具。

2. 依次点击更多选项 > 更多工具 > 效果数据分析。

   

   或者，使用命令菜单打开性能数据分析面板。

   

记录性能

性能数据分析面板可以记录一般性能和用例驱动型（例如网页加载）性能。

1. 在新标签页中打开此演示页面，然后在该页面上打开“性能数据分析”面板。

2. 您可以在录制时限制网络和 CPU 的使用。在本教程中，请在下拉菜单中勾选停用缓存并将 CPU 设置为 4 倍减速：

   

   要点：限制与计算机的能力有关。例如，4 倍减速选项会使 CPU 的运行速度比平时慢 4 倍。开发者工具无法真正模拟移动设备的 CPU，因为移动设备的架构与桌面设备和笔记本电脑的架构截然不同。

3. 点击 衡量网页加载。开发者工具会在页面重新加载时记录性能指标，然后在页面加载完成后几秒钟自动停止记录。

   

   要点：如果您想衡量网页的整体效果，请使用开始录制。与页面互动，然后手动点击 Stop record（停止录制）以停止录制。

重放表演录像

使用底部的控件控制录音的重放。

以下是具体操作方法的示例。

• 点击 Play（播放）即可播放录音。
• 点击 Pause 可暂停重放。
• 使用下拉菜单调整播放速度。
• 点击 Toggle Visual preview（切换视觉预览），以显示或隐藏视觉预览。

浏览性能记录

DevTools 会自动缩小以显示完整的记录时间轴。您可以使用缩放功能浏览录制内容并移动时间轴。

要左右缩放和移动时间轴，请使用相应的导航按钮：

• 点击 Timeline 可移动进度条指针以查看特定帧。
• 点击底部的 Zoom in 和 Zoom out 控件进行缩放。在这种情况下，您可以根据进度条指针进行缩放。
• 拖动底部的水平滚动条，左右移动时间轴。

或者，您也可以使用键盘快捷键。点击 按钮即可查看快捷方式。

使用快捷键时，系统会根据鼠标光标进行缩放。

查看性能数据分析

在数据分析窗格中获取性能数据分析列表。发现并修复潜在的性能问题。

将鼠标悬停在各项数据分析上，以便在主轨道中突出显示它们。

点击某项数据分析（例如，阻止呈现的请求），即可在详细信息窗格中将其打开。如需进一步了解问题，请检查其文件、问题、解决方法部分等。

查看 Web Vitals 性能指标

网页指标是 Google 推出的一项计划，旨在针对对于提供出色的网站用户体验至关重要的质量信号提供统一指南。

您可以在时间轴和数据分析窗格中查看这些指标。

将鼠标悬停在时间轴上的数据分析上，即可详细了解相应指标。

探索最大 Contentful Paint 的延迟

Largest Contentful Paint (LCP) 是 Core Web Vitals 指标之一。它报告视口内可见的最大图片或文本块的呈现时间（相对于网页最初开始加载的时间）。

良好的 LCP 得分为 2.5 秒或更短。

如果网页上最大的 Contentful Paint 需要更长时间才能呈现，您会在时间轴中看到带有黄色正方形或红色三角形的 LCP 标记。

如需打开详细信息窗格，请点击时间轴上或右侧的数据分析窗格中的 LCP 标记。在此窗格中，您可以了解延迟的潜在原因，以及有关如何解决这些问题的建议。

在此示例中，请求会阻止呈现，您可以内嵌应用关键样式来解决此问题。如需了解详情，请参阅移除阻塞渲染的资源。

如需查看 LCP 呈现时间的细分部分，请向下滚动到详细信息 > 时间细分维度部分。

LCP 渲染时间由以下几部分组成：

LCP 子部分	说明
首字节时间 (TTFB)	从用户开始加载网页到浏览器收到 HTML 文档响应的第一个字节的时间。
资源加载延迟	TTFB 与浏览器开始加载 LCP 资源之间的增量。
资源加载时间	加载 LCP 资源本身所需的时间。
元素渲染延迟	LCP 资源完成加载与 LCP 元素完全呈现之间的增量。

如果 LCP 元素不需要加载资源即可渲染，则资源加载延迟时间和时间会被省略。例如，如果元素是使用系统字体渲染的文本节点，就会发生此错误。

查看布局偏移 activity

在 Layout Shifts 轨道中查看布局偏移活动。

布局偏移会被分组到一个会话窗口中。在该示例中，有两个会话窗口。会话窗口之间有间隙。

要点：考虑像烟花一样的布局偏移。有时候，系统会一次进行多次调整，然后停顿一段时间，然后再次进行多次调整。每组多个班次称为一个会话窗口。如需了解详情，请参阅会话窗口。

Cumulative Layout Shifts (CLS) 是 Web Vitals 核心指标之一。使用 Layout Shifts 轨道可找出潜在问题和导致布局偏移的原因。

在提高 CLS 指标时，应始终从最大的会话窗口开始。在我们的示例中，根据背景颜色和级别，会话窗口 1 是最大的窗口。

点击屏幕截图即可查看布局偏移的详细信息，确定潜在的根本原因和受影响的元素。

在本例中，潜在的根本原因是媒体尺寸不合适。如需了解如何解决此问题，请参阅优化 Cumulative Layout Shift。

了解布局偏移分数

如需了解得分的计算方式，请使用 Details 窗格中的 Window 部分。Window 会显示当前布局偏移所属的会话窗口。

如果整个页面偏移，则每次布局偏移的最高得分为 1。在我们的示例中，第一次布局偏移的得分为 0.15。第二次布局偏移的得分为 0.041。

此会话窗口的总分为 0.19。根据 CLS 阈值，需要改进。会话窗口的背景颜色也与之相同。

会话窗口背景图会随时间推移而增大。布局偏移的累计得分反映了该时间点的增加情况。

查看网络活动

在 Network 轨道中查看网络活动。您可以展开网络轨道以查看所有网络活动，然后点击每个条目查看详情。

查看渲染程序活动

在渲染程序轨道中查看渲染活动。您可以展开每个渲染程序查看活动，然后点击各项查看详情。

查看 GPU 活动

在 GPU 轨道中查看 GPU 活动。GPU 轨道默认处于隐藏状态。如需启用，请在设置中勾选 GPU。

查看用户计时

要获得自定义的效果衡量指标，您可以使用用户计时，通过计时轨道直观呈现计时。如需了解详情，请参阅 User Timing API。

请查看此演示页面，其中会计算文本加载用时。

要查看用户计时，请执行以下操作：

1. 使用 performance.mark() 标记应用中的地点。
2. 使用 performance.measure() 测量两次标记之间经过的时间。
3. 录制性能。
4. 在 Timings 轨道上查看测量结果。如果您看不到曲目，请查看设置中的用户计时。
5. 如需查看详细信息，请点击轨道上的时间。

自定义界面

要自定义 Timeline 和 Tracks，请点击该面板的 Settings 图标，然后选中您想要的选项。

导出录制内容

如需保存录制内容，请点击 Export 图标 。

导入录制内容

如需加载录制内容，请选择 Import 图标 。

删除录音

如需删除录音，请执行以下操作：

1. 点击 删除。 系统会打开确认对话框。
2. 在对话框中，点击删除以确认删除。