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

Jecelyn Yeen

Sofia Emelianova

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

使用效果分析面板，根据应用场景获取有关网站性能的富有实用价值的分析洞见。

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

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

概览

通过性能数据分析面板，您可以执行以下操作：

• 记录和衡量网页加载性能。
• 查看 Web Vitals 性能指标。
• 查看网络活动。
• 模拟较慢的 CPU 和网络速度。
• 导入和导出录音。

为什么要使用新面板？

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

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

简介

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

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

1. 打开开发者工具。

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

   

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

   

记录性能

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

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

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

   

   要点：节流取决于计算机的性能。例如，“减慢 4 倍”选项会使 CPU 的运行速度比平常慢 4 倍。开发者工具无法真正模拟移动设备的 CPU，因为移动设备的架构与桌面设备和笔记本电脑的架构截然不同。

3. 点击 衡量网页加载。在页面重新加载期间，DevTools 会记录性能指标，然后在页面加载完成几秒钟后自动停止记录。

   

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

重放表演录像

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

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

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

浏览性能记录

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

如需缩放时间轴并向左或向右移动，请使用相应的导航按钮：

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

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

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

查看性能数据分析

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

将鼠标悬停在每个数据洞见上，即可在主轨道上突出显示它们。

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

查看 Web Vitals 性能指标

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

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

将鼠标悬停在时间轴上的数据洞见上，即可详细了解相关指标。

探索最大 Contentful Paint 的延迟

Largest Contentful Paint (LCP) 是 Core Web Vitals 指标之一。该指标会报告视口内可见的最大图片或文本块的渲染时间（相对于网页的首次加载时间）。

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

如果网页上的最大内容渲染所需的渲染时间较长，您会在时间轴中看到带有黄色方块或红色三角形的 LCP 标记。

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

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

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

LCP 呈现时间由以下子部分组成：

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

如果 LCP 元素不需要资源加载即可渲染，则会省略资源加载延迟时间。例如，如果元素是以系统字体渲染的文本节点，

查看布局偏移 activity

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

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

要点：考虑像烟花一样的布局偏移。有时，系统会同时发生多次转换，然后暂停一段时间，然后再次发生多次转换。每组多个班次都是一个会话窗口。如需了解详情，请参阅会话时段。

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

在改进 CLS 指标时，请始终从最长的会话时间范围开始。在我们的示例中，根据背景颜色和级别，会话窗口 1 是最大的窗口。

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

在我们的示例中，可能的根本原因是未调整大小的媒体。如需了解如何解决此问题，请参阅优化累积布局偏移。

了解布局偏移分数

如需了解得分计算方式，请使用详细信息窗格中的时间范围部分。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. 在时间轨道上查看测量结果。如果您看不到轨道，请在设置中查看用户时间。
5. 如需查看详细信息，请点击轨道上的时间。

自定义界面

如需自定义时间轴和轨道，请点击该面板的 设置图标，然后选中您偏好的选项。

导出录制内容

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

导入录音

如需加载录音，请选择导入图标 。

删除录音

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

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