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

叶杰林
Jecelyn Yeen
索菲亚·埃梅利安诺娃
Sofia Emelianova

使用“效果数据分析”面板,获取有关网站性能的切实可行且基于用例的数据分析。

为什么要使用新面板?

新的性能数据分析面板是一项实验,旨在解决开发者在使用现有性能面板时存在的 3 个痛点:

  • 信息过多。在重新设计的界面后,性能数据分析面板简化了数据并仅显示相关信息。
  • 难以区分用例“性能数据分析”面板支持用例驱动的分析。目前仅支持网页加载用例,我们日后会根据您的反馈(例如互动)推出更多功能。
  • 需要具备深厚的专业知识,了解浏览器如何工作才能有效使用效果数据分析面板突出显示数据分析窗格中的关键数据分析,以及有关如何解决问题的富有实用价值的反馈。

简介

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

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

  1. 打开开发者工具
  2. 依次点击更多选项 > 更多工具 > 效果数据分析

    性能数据分析。

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

    命令菜单中的显示性能数据分析命令。

录制表演

“性能数据分析”面板可以记录常规性能和基于用例(例如网页加载)的性能。

  1. 在新标签页中打开此演示页面,然后在该页面上打开“性能数据分析”面板
  2. 您可以在录制时限制网络和 CPU 占用率。在本教程中,请勾选停用缓存,并在下拉菜单中将 CPU 设置为 4 倍减速

    限制。

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

    启动选项。

重放表演录音

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

重放控件。

下面的示例展示了如何做到这一点。

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

开发者工具会自动缩小以显示完整的记录时间轴。您可以使用缩放功能浏览记录并移动时间轴。

如需缩放及左右移动时间轴,请使用相应的导航按钮:

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

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

使用快捷键时,您可以根据鼠标光标进行缩放。

查看效果数据分析

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

“数据分析”窗格。

将鼠标悬停在各项数据分析上,即可在主要轨道上突出显示它们。

点击某个数据分析(例如渲染阻止请求),以在详细信息窗格中打开该数据分析。如需进一步了解问题,请查看其文件问题如何修复部分等。

数据分析详情。

查看网页指标性能指标

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

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

查看网页指标性能指标。

将鼠标悬停在时间轴上的数据分析上,即可详细了解各个指标。

发现最大的 Contentful Paint 的延迟

Largest Contentful Paint (LCP)核心网页指标指标之一。该报告会报告视口内可见的最大图片或文本块的呈现时间(相对于网页首次开始加载的时间)。

LCP 阈值。

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

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

LCP 徽章。

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

“详细信息”窗格。

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

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

时间细分数据。

LCP 呈现时间包含以下子部分:

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

如果 LCP 元素不需要加载资源即可渲染,系统会省略资源加载延迟时间和时间。例如,在元素是使用系统字体渲染的文本节点的情况下。

查看“Layout shifts”活动

Layout Shifts 轨道中查看布局偏移 activity。

Layout Shift 轨道。

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

会话时段和间隔。

Cumulative Layout Shift (CLS)核心网页指标之一。您可以使用 Layout Shift 轨道来确定潜在问题和布局偏移的原因。

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

CLS。

点击屏幕截图可查看布局偏移的详细信息,找出潜在的根本原因以及受影响的元素。

查看布局偏移的详细信息。

在我们的示例中,潜在的根本原因是“媒体尺寸没有调整”。如需了解如何解决此问题,请参阅优化 Cumulative Layout Shift

找出潜在的根本原因。

了解布局偏移分数

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

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

了解布局偏移分数。

此会话时段的总分为 0.19。根据 CLS 阈值,它需要改进。会话窗口背景颜色也相同。

CLS 阈值。

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

Cession 窗口背景图。

查看网络活动

在“网络”轨道中查看网络活动。您可以展开网络轨道以查看所有网络活动,然后点击每个项目查看详细信息。

查看网络活动。

查看渲染程序 activity

Renderer 轨道中查看渲染 activity。您可以展开每个渲染程序以查看活动,然后点击每个项目查看详细信息。

查看渲染程序 activity。

查看 GPU 活动

GPU 轨道中查看 GPU 活动。默认情况下,GPU 轨道处于隐藏状态。如需启用该模式,请查看设置中的 GPU

查看 GPU 活动。

查看用户计时

要获取自定义性能衡量指标,您可以使用 User Timing 指标,并通过计时轨道直观呈现计时数据。如需了解详情,请参阅 User Timing API

请查看此演示页面,该页面计算文本加载所用的时间。

要查看用户计时,请执行以下操作:

  1. 使用 performance.mark() 标记应用中的地点。
  2. 使用 performance.measure() 测量标记之间的间隔时间。
  3. 记录性能
  4. 计时轨道上查看测量结果。如果您看不到该曲目,请查看设置中的用户计时
  5. 如需查看详细信息,请点击轨道上的显示时间。 “计时”轨道。

自定义界面

要自定义时间轴轨道,请点击该面板的 设置图标,然后选中您想要的选项。

设置。

导出录制内容

如需保存录制内容,请点击 Export(导出)图标

导出录制内容。

导入录音

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

导入录音。

删除录音

如需删除录音,请执行以下操作:

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