使用效果数据分析面板，获取有关网站效果的切实可行且基于用例的数据分析。
为什么要使用新的面板？
新的效果数据分析面板是一项实验性功能，旨在解决使用现有效果面板时开发者的以下 3 个痛点：
- 信息过多。在重新设计的界面后，效果数据分析面板可以简化数据，仅显示相关信息。
- 难以区分使用情形。效果数据分析面板支持根据用例进行分析。它目前仅支持网页加载用例，未来我们会根据您的反馈添加更多用例，例如互动。
- 需要深刻专业知识，了解如何有效使用浏览器。效果数据分析面板突出显示数据分析窗格中的关键数据分析，并提供有关如何解决问题的实用反馈。
简介
本教程将介绍如何使用性能数据分析面板衡量和了解网页加载性能。请继续阅读或观看以上本教程的视频版本。
打开“性能数据分析”面板
录制表现
“效果数据分析”面板可以记录常规性能和用例驱动的性能（例如网页加载）。
- 在新标签页中打开此演示页面，然后在此页面上打开“性能数据分析”面板。
您可以在记录时限制网络和 CPU 流量。在本教程中，请选中停用缓存，并在下拉菜单中将 CPU 设置为 4 倍减速：
点击 衡量网页加载。开发者工具会在页面重新加载时记录性能指标，然后在页面加载完成后几秒钟自动停止记录。
重放表演录音
使用底部的控件来控制录制内容的重放。
下面的示例说明了如何做到这一点。
- 点击 Play 以播放录制内容。
- 点击 Pause 暂停重放。
- 通过下拉菜单调整播放速度。
- 点击 切换视觉预览，以显示或隐藏视觉预览。
浏览性能录音
开发者工具会自动缩小以显示完整的记录时间轴。您可以使用缩放功能浏览录制内容并移动时间轴。
如需缩放和左右移动时间轴，请使用相应的导航按钮：
- 点击时间轴，即可移动进度条指针以查看特定帧。
- 点击底部的 放大和 缩小控件即可放大。在这种情况下，您可以根据进度条指针进行缩放。
- 拖动底部的水平滚动条可左右移动时间轴。
您也可以使用键盘快捷键。点击 按钮即可查看快捷键。
使用快捷键时，您可以根据鼠标光标进行缩放。
查看效果数据分析
在数据分析窗格中获取效果数据分析列表。找出并修正潜在的性能问题。
将鼠标悬停在各项数据分析上，即可在主轨道上突出显示它们。
点击数据分析（例如渲染拦截请求），以在详细信息窗格中打开相应数据分析。如需进一步了解问题，请查看文件、问题、解决方法部分等。
查看网页指标性能指标
网页指标是 Google 推出的一项计划，旨在针对提供出色的网络体验至关重要的质量信号提供统一指南。
您可以在时间轴和数据分析窗格中查看这些指标。
将鼠标悬停在时间轴上的数据分析上，即可详细了解相应指标。
发现最大 Contentful Paint 的延迟
Largest Contentful Paint (LCP) 是核心网页指标指标之一。报告的是视口内可见最大图片或文本块的呈现时间（相对于网页首次开始加载的时间）。
良好的 LCP 得分为 2.5 秒或更短。
如果页面上最大的内容渲染程序需要较长时间才能渲染，您会在时间轴中看到带有黄色方块或红色三角形的 LCP 标记。
如需打开详细信息窗格，请点击时间轴上或右侧的数据分析窗格中的 LCP 标记。在此窗格中，您可以发现导致延迟的可能原因，以及有关如何解决这些问题的建议。
在此示例中，请求会阻止渲染，您可以内嵌关键样式来修复该问题。如需了解详情，请参阅消除阻塞渲染的资源。
如需查看 LCP 呈现时间的细分，请向下滚动到详细信息 > 时间细分部分。
LCP 呈现时间包含以下子部分：
| LCP 子部分 | 说明 |
|---|---|
| 首字节时间 (TTFB) | 从用户开始加载网页到浏览器收到 HTML 文档响应的第一个字节所用的时间。 |
| 资源加载延迟 | TTFB 与浏览器开始加载 LCP 资源之间的增量。 |
| 资源加载时间 | 加载 LCP 资源本身所需的时间。 |
| 元素渲染延迟 | LCP 资源加载完毕到 LCP 元素完全呈现之间的增量。 |
如果 LCP 元素不需要加载资源即可渲染，系统会省略资源加载延迟时间和时间。例如，在元素是使用系统字体渲染的文本节点的情况下。
查看布局偏移活动
在 Layout Shifts 轨道中查看布局偏移 activity。
布局偏移会分组到一个会话窗口中。该示例中有两个会话窗口。会话窗口之间有间隙。
Cumulative Layout Shift (CLS) 是核心网页指标指标之一。您可以使用 Layout Shifts 轨道来确定潜在问题和布局偏移的原因。
提高 CLS 指标时，请始终从最大的会话窗口开始。在我们的示例中，会话窗口 1 是基于背景颜色和级别计算得出的最大窗口。
点击屏幕截图即可查看布局偏移的详细信息，找出潜在的根本原因以及受影响的元素。
在我们的示例中，潜在的根本原因是媒体大小不足。如需了解如何解决此问题，请参阅优化 Cumulative Layout Shift。
了解布局偏移得分
如需了解得分计算方式，请使用 Details 窗格中的 Window 部分。Window 会显示当前布局偏移所属的会话窗口。
如果整个页面发生偏移，则每次布局偏移的最高得分为 1。在我们的示例中，第一次布局偏移的得分为 0.15。第二次布局偏移的得分为 0.041。
此会话窗口的总分是 0.19。根据 CLS 阈值，它需要改进。会话窗口背景颜色也相同。
会话窗口背景图表会随时间而增加。布局偏移的累计得分反映的是该时间点的增加情况。
查看网络活动
查看“网络”轨道中的网络活动。您可以展开网络轨道以查看所有网络活动，然后点击每个项目查看详细信息。
查看渲染程序 activity
在 Renderer 轨道中查看渲染 activity。您可以展开每个渲染程序以查看相应 activity，然后点击每一项查看详细信息。
查看 GPU 活动
查看 GPU 轨道中的 GPU 活动。默认情况下，GPU 轨道处于隐藏状态。如需启用，请在 Settings 中查看 GPU。
查看用户计时
如需获取自定义性能指标，您可以使用 User Timing，并通过计时轨道直观呈现计时。如需了解详情，请参阅 User Timing API。
请参阅此演示页面，其中计算了经过的时间文本加载。
如需查看用户计时，请执行以下操作：
- 使用
performance.mark()标记应用中的地点。 - 使用
performance.measure()测量标记间经过的时间。 - 录制效果。
- 在计时轨道上查看测量结果。如果您看不到该曲目，请查看设置中的用户计时。
- 如需查看详细信息，请点击轨道上的计时。
自定义界面
要自定义时间轴和航迹，请点击该面板的 设置图标，然后选中您需要的选项。
导出录制内容
如需保存录音，请点击 Export 图标 。
导入录音
如需加载录音，请选择 Import 图标 。
删除录音
如需删除录音，请执行以下操作：
- 点击 删除。 系统会打开一个确认对话框。
- 在对话框中，点击删除以确认删除。