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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概览

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

使用性能面板可执行以下操作：

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

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

打开“效果”面板

如需打开性能面板，请打开 DevTools，然后从顶部的一系列标签页中选择性能。

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

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

实时观察 Core Web Vitals

当您打开 Performance 面板后，它会立即捕获并显示本地 Largest Contentful Paint (LCP) 指标，而 Cumulative Layout Shift (CLS) 指标会反映其得分（良好、需要改进或不佳）。

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

效果面板的三个指标卡片下列出了捕获到的互动。要清除列表，请点击 清除。

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

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

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

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

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

    “后续步骤”部分中的“设置”按钮。

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

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

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

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

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

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

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

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

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

    设置好现场数据提取后，效果面板现在会显示您的本地指标得分与用户体验的指标得分之间的对比情况。您可以在右侧的字段数据部分中查看收集期。

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

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

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

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

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

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

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

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

  2. 如需与此示例的环境配置保持一致，请执行以下操作：

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

  3. 配置好环境后，请重新加载页面，与其互动以捕获本地 INP，然后再次比较指标得分。

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

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

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

获取和分析效果报告

在接下来的部分中，请按照有关如何记录分析、更改捕获设置和分析报告的指南操作。

记录性能配置文件

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

更改拍摄设置

通过捕获设置，您可以更改开发者工具捕获性能记录的方式，并在报告中为您提供更多信息。点击拍摄设置 ，进入拍摄设置菜单。

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

分析效果报告

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

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

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

如需了解如何专注于工作流程的重要事项，请执行以下操作：

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

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

利用这些面板提升效果

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