“性能”面板：分析网站性能

Dale St. Marthe
Dale St. Marthe
LinkedIn

使用“效果”面板分析网站的效果。

概览

借助性能面板，您可以记录 Web 应用的 CPU 性能配置文件。分析配置文件，找出潜在的性能瓶颈以及优化资源使用方式。

您可以使用效果面板执行以下操作：

  • 记录性能配置文件。
  • 更改拍摄设置。
  • 分析效果报告。

有关如何提高网站性能的全面指南，请参阅分析运行时性能。

打开“效果”面板

如需打开 Performance 面板，请打开开发者工具，然后从顶部的一组标签页中选择 Performance。

或者，也可以按照以下步骤使用命令菜单打开性能面板：

  1. 打开开发者工具。
  2. 按以下任一键打开命令菜单：
  3. macOS：Command + Shift + P
  4. Windows、Linux、ChromeOS：Ctrl + Shift + P 包含
  5. 开始输入 Performance panel，选择显示“效果”面板，然后按 Enter 键。

实时观察 Core Web Vitals

当您打开效果面板时，该面板会立即捕获并显示您的本地 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) 指标，并告知您其得分（良好、需要改进或欠佳）。

如果您与网页互动，Performance 面板还会捕获本地 Interaction to Next Paint (INP) 及其得分，除了 LCP 和 CLS 之外，您还可以利用网络连接和设备全面了解网页的核心网页指标。

效果面板会在三个指标卡片下方提供捕获的互动记录列表。要清除列表，请点击 清除。

如需查看指标得分的细分数据，请将鼠标悬停在指标值上，以查看提示。

将您的体验与用户的体验进行比较

您还可以从 Chrome 用户体验报告中提取现场数据，并将您网站用户的体验与本地指标进行比较。

要添加字段数据，请执行以下操作：

  1. 依次点击效果 > 后续措施 > 现场数据，然后点击设置。

    “设置”按钮。

  2. 在配置字段数据提取对话框中，记下隐私权披露声明，然后点击确定。

    高级：在开发环境和生产环境之间设置映射...

    （可选）如需自动获取最相关的现场数据，您可以在开发环境源和生产环境源之间设置（多个）映射：

    1. 在对话框窗口中，展开高级部分，然后点击 + 新建。

    2. 在映射表格中，输入您的开发和生产网址，然后点击 +。

      “高级”部分中开发源与生产源之间的映射。

      例如，当您导航到 localhost:8080/page1 时，http://localhost:8080 到 https://example.com 的映射将会显示 example.com/page1 的字段数据。

      此外，如果您由于某种原因无法自动获取字段数据，可以选中始终显示以下网址的字段数据，并提供相应网址。无论您导航到哪个网页，效果面板都会先尝试提取此网址的字段数据，然后再向您显示此字段数据。

      如需在设置后更改现场数据提取设置，请依次点击现场数据 > 配置

    设置字段数据提取后，性能面板现在会显示本地指标得分与用户体验得分之间的比较。您可以在右侧的字段数据部分中查看收集时间段。

    集合在提取后与字段数据相关联。

    如需查看指标得分的细分数据，请将鼠标悬停在指标值上，以查看提示。

配置环境以更好地匹配用户

按照上一部分中所述的方式设置字段数据提取后，性能面板会为您提供有关如何配置环境以更好地匹配用户体验的建议。

如需配置您的环境，请执行以下操作：

  1. 在每个指标卡片中，展开考虑本地测试条件部分（如果有），然后阅读建议。

    “考虑本地测试条件”各个指标卡片中展开的部分。

    在本例中，为了更好地匹配用户体验，您可能需要使用常见的桌面屏幕尺寸，并降低 CPU 和网络速度。

  2. 如需匹配此示例的环境配置，请执行以下操作：

    1. 将视口设为其中一种常见屏幕尺寸（例如 720p 或 1080p）。如需模拟特定设备和屏幕尺寸，您可以使用 Elements 面板中的设备模式。
    2. 在该示例中，该网站有 82% 的用户使用桌面设备进行浏览。为确保将本地指标得分与正确的字段数据进行比较，您可以从字段数据 > 中选择桌面设备Device 下拉列表中。
    3. 在环境设置部分，将网络下拉列表设为快速 4G，例如将 CPU 设为 20 倍减速。您也可以确保在同一部分中 停用网络缓存对应的复选框。

  3. 配置环境后，重新加载页面，与之互动以获取本地 INP，并再次比较指标得分。

    环境的配置与实际用户体验相符。

    指标得分现在似乎更接近用户体验的得分。因此，考虑本地测试条件部分已从指标卡片中移除。

现在，您可以开始改进网站的核心 Web 指标了：

获取和分析效果报告

在接下来的部分中，请按照相关指南了解如何记录配置文件、更改捕获设置和分析报告。

录制效果概况

准备好录制后，Performance 面板将为您提供以下选项：

更改拍摄设置

借助捕获设置，您可以更改 DevTools 捕获性能录制内容的方式，并在报告中提供更多信息。点击拍摄设置 ，以访问拍摄设置菜单。

从拍摄设置菜单中选择以下选项：

分析效果报告

如需查看有关如何使用 Performance 面板的完整指南，请参阅分析性能记录。

下面介绍了该指南中的主题分组以及其他实用文档：

如需了解如何浏览报告，请执行以下操作：

要了解如何专注于对工作流程至关重要的方面，请按以下步骤操作：

如需了解“自下而上”“调用树”和“事件日志”标签页，请执行以下操作：

如需了解如何分析报告，请执行以下操作：

利用这些面板提升效果

了解可以帮助您提升网站性能的其他面板：