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

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

使用性能面板分析网站的性能。

概览

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

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

  • 记录性能分析数据。
  • 更改拍摄设置。
  • 分析效果报告。

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

打开“性能”面板

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

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

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

实时观测核心 Web 指标

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

如果您与网页互动，性能面板还会捕获本地 Interaction to Next Paint (INP) 及其得分。除了 LCP 和 CLS 之外，INP 还能让您使用自己的网络连接和设备全面了解网页的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）。如需模拟特定设备和屏幕尺寸，您可以使用元素面板中的设备模式。
    2. 在此示例中，82% 的网站用户使用桌面设备进行浏览。为确保您将本地指标得分与正确的 Field 数据进行比较，您可以从 Field 数据 > 设备下拉列表中选择桌面设备。
    3. 在环境设置部分中，将网络下拉列表设置为快速 4G 等，并将 CPU 设置为减速 20 倍等。您还可以确保在同一部分中选中停用网络缓存。

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

    环境配置与真实世界中的用户体验相符。

    现在，指标得分似乎与用户的实际体验更加接近。因此，指标卡中不再显示考虑本地测试条件部分。

现在，您可以开始改进网站的 Core Web Vitals 了：

捕获并分析性能报告

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

记录性能分析数据

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

更改拍摄设置

借助捕获设置，您可以更改开发者工具捕获性能记录的方式，并在报告中获取更多信息。依次点击拍摄设置 ，进入拍摄设置菜单。

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

分析效果报告

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

下面列出了本指南中的主题分组以及其他实用文档：

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

使用效果分析功能获取有关网站效果的实用分析洞见：

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

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

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

利用这些面板提升效果

了解其他有助于提升网站效果的面板：

其他资源