使用性能洞见面板，获取有关网站性能的实用且以使用情形为导向的洞见。
概览
借助性能数据分析面板，您可以执行以下操作：
- 记录和衡量网页加载性能。
- 查看网页指标效果指标。
- 查看网络活动。
- 模拟较慢的 CPU 和网络速度。
- 导入和导出录制内容。
为什么要推出新面板？
新的性能数据分析面板是一项实验，旨在解决开发者在使用现有性能面板时遇到的以下 3 个痛点：
- 信息量太大。在重新设计的界面中，效果分析面板会简化数据，仅显示相关信息。
- 难以区分使用情形。性能数据分析面板支持以用例为导向的分析。目前，它仅支持网页加载用例，未来会根据您的反馈添加更多功能，例如互动性。
- 需要深入了解浏览器的工作方式才能有效使用。效果数据分析面板会在数据分析窗格中突出显示关键数据分析，并提供有关如何解决问题的实用反馈。
简介
本教程将介绍如何使用性能洞见面板来衡量和了解网页加载性能。您可以继续阅读，也可以观看上方本教程的视频版本。
打开“性能数据分析”面板
记录表现
性能数据分析面板可以记录常规性能和用例驱动的性能（例如网页加载）。
- 在新标签页中打开此演示页面，然后在该页面上打开“效果分析”面板。
您可以在录制时限制网络和 CPU。在本教程中，选中停用缓存，然后在下拉菜单中将 CPU 设置为 4 倍减速：
点击 衡量网页加载情况。在网页重新加载期间，开发者工具会记录性能指标，然后在网页加载完毕后自动停止记录。
重放表演录制内容
使用底部的控件控制录制的视频的重放。
以下示例展示了如何做到这一点。
- 点击 Play 即可播放录制内容。
- 点击 暂停以暂停重放。
- 使用下拉菜单调整播放速度。
- 点击 切换视觉预览以显示或隐藏视觉预览。
浏览性能记录
开发者工具会自动缩小，以显示完整的录制时间轴。您可以通过缩放和移动时间轴来浏览录制内容。
如需缩放时间轴并向左和向右移动时间轴，请使用相应的导航按钮：
- 点击时间轴可移动播放头，以查看特定帧。
- 点击底部的 放大和 缩小控件可进行缩放。在这种情况下，您将根据播放头进行缩放。
- 拖动底部的水平滚动条，即可左右移动时间轴。
或者，您也可以使用键盘快捷键。点击 按钮即可查看快捷方式。
使用快捷键时，系统会根据鼠标光标的位置进行缩放。
查看效果分析
在数据分析窗格中获取效果分析列表。识别并修复潜在的性能问题。
将鼠标悬停在每条洞见上，即可在主轨道上突出显示相应内容。
点击某项数据洞见（例如，阻塞渲染的请求），即可在详细信息窗格中打开该洞见。如需进一步了解问题，请查看其文件、问题、如何修复部分等。
查看 Web 指标性能指标
网页指标是 Google 推出的一项计划，旨在就哪些质量信号对提供出色的网站用户体验至关重要提供统一指南。
您可以在时间轴和数据分析窗格中查看这些指标。
将鼠标悬停在时间轴上的数据洞见上，即可详细了解相关指标。
发现 Largest 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 元素不需要加载资源即可渲染，则会省略资源加载延迟和时间。例如，如果元素是使用系统字体呈现的文本节点。
查看布局偏移活动
在 Layout Shifts 轨道中查看布局偏移活动。
布局偏移会分组到会话窗口中。在此示例中，有两个会话窗口。会话窗口之间存在间隔。
累积布局偏移 (CLS) 是 Core Web Vitals 指标之一。使用布局偏移轨道来确定潜在问题和布局偏移的原因。
在改进 CLS 指标时，请始终从最大的会话窗口开始。在我们的示例中，会话窗口 1 是最大的窗口，这取决于背景颜色和级别。
点击屏幕截图可查看布局偏移的详细信息，找出潜在的根本原因和受影响的元素。
在我们的示例中，潜在的根本原因是未调整大小的媒体。如需了解如何解决此问题，请参阅优化累积布局偏移。
了解布局偏移分数
如需了解得分的计算方式，请使用详细信息窗格中的窗口部分。窗口显示当前布局偏移所属的会话窗口。
如果整个网页发生偏移，则每次布局偏移的最高分数为 1。在我们的示例中，第一个布局偏移的得分为 0.15。第二次布局偏移的得分为 0.041。
相应会话时段的总得分为 0.19。根据 CLS 阈值，该值需要改进。会话窗口背景颜色也反映了这一点。
会话窗口背景图随时间增加。布局偏移的累计得分反映了该时间点的增幅。
查看网络活动
在网络轨道中查看网络活动。您可以展开网络轨道以查看所有网络活动，并点击每个项目以查看详细信息。
查看渲染器活动
在 Renderer 轨道中查看渲染活动。您可以展开每个渲染器以查看活动，然后点击每个项目以查看详细信息。
查看 GPU 活动
在 GPU 轨道中查看 GPU activity。GPU 轨道默认处于隐藏状态。如需启用它，请在设置中选中 GPU。
查看用户计时
如需获取自定义性能衡量指标，您可以使用 User Timing，并通过 Timing 轨道直观呈现时间数据。如需了解详情，请参阅 User Timing API。
您可以查看此演示页面，该页面会计算文本加载的耗时。
如需查看用户计时，请执行以下操作：
- 使用
performance.mark()标记应用中的位置。 - 使用
performance.measure()测量标记之间所用的时间。 - 记录表现。
- 在 Timings 轨道上查看测量结果。如果您看不到轨道，请在设置中查看用户时间。
- 如需查看详细信息，请点击轨道上的时间。
自定义界面
如需自定义时间轴和轨道，请点击面板的 设置图标，然后选中您偏好的选项。
导出录制内容
如需保存录音，请点击导出图标 。
导入录制内容
如需加载录制内容，请选择导入图标 。
删除录制内容
如需删除录音，请执行以下操作：
- 点击 删除。 系统会打开一个确认对话框。
- 在对话框中，点击删除以确认删除。