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

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：Control+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。它还会捕获并报告单页应用中客户端软导航的 Core Web Vitals。

在互动 和布局偏移 标签页中的三个指标卡片下，您可以找到包含捕获的互动和布局偏移相关信息的表格，包括元素、时间、阶段（针对互动）和得分（针对布局偏移）。如需清除这两个列表，请点击 清除。

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

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

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

如需添加现场数据，请执行以下操作：

  1. 在性能 > 后续步骤 > 现场数据中，点击设置。

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

  2. 在配置现场数据提取 对话框中，请注意隐私权声明 ，然后点击确定 。

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

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

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

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

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

      例如，如果您导航到 localhost:8080/page1，则将 http://localhost:8080 映射到 https://example.com 会显示 example.com/page1 的现场数据。

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

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

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

    获取字段数据后的收集周期。

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

配置您的环境，使其与用户的环境更好地匹配

按照上一部分中的说明设置现场数据提取后，性能 面板会为您提供有关如何配置环境的建议，以便更好地匹配用户的体验。

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

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

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

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

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

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

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

    环境配置与真实用户体验一致。

    指标得分现在看起来与用户的体验更相似。因此，考虑本地测试条件 部分已从指标卡片中消失。

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

捕获和分析效果报告

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

记录性能分析文件

准备好进行记录时，性能 面板会为您提供以下选项：

更改捕获设置

借助捕获设置 ，您可以更改开发者工具捕获性能记录的方式，并可以在报告中提供其他信息。点击捕获设置 以访问捕获设置 菜单。

从捕获设置 菜单中选择以下选项：

分析效果报告

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

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

了解如何浏览报告：

使用 Performance Insights 深入了解网站的性能：

了解如何专注于工作流程中的重要事项：

了解自下而上、调用树和事件日志标签页：

了解如何分析报告：

使用这些面板提升性能

了解其他有助于提升网站性能的面板：

其他资源