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

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

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

如果您与网页互动，效果面板还会捕获本地 Interaction to Next Paint (INP) 及其得分。除了 LCP 和 CLS 之外，您还可以通过网络连接和设备，全面了解网页的 Core Web Vitals。

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

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

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

您还可以从 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 指标了：

获取和分析效果报告

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

记录性能配置文件

准备好录制后，效果面板会显示以下选项：

更改截取设置

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

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

分析效果报告

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

以下是本指南中主题的分组，以及其他实用文档：

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

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

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

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

利用这些面板提升效果

探索其他有助于提升网站性能的面板：