如何使用 Chrome DevTools 的性能选项卡

要访问“性能”选项卡：

打开 Chrome DevTools：
- 右键单击网页的任何部分，然后从菜单中选择“检查”。
- 或者，使用键盘快捷键：
  - Windows/Linux：Ctrl + Shift + I
  - Mac：Cmd + Option + I
导航到“性能”选项卡：
- 在 DevTools 的顶部菜单中，点击“性能”选项卡。如果看不到，请点击“>>”图标以在其他选项卡下找到它。

进入内部后，您需要采取以下步骤进行全面审核：

步骤 1：实时监控您的核心网络指标

Chrome 129中引入了Chrome DevTools，它现在显示您的本地核心 Web 生命力指标。最好的工程师数据库部分是，无需开始记录；这些指标会在后台收集，并随时可用。

换句话说，每当您感觉您的网站速度很慢时，您可以简单地访问性能面板并了解原因。

本地核心网络生命力结果代表从您的本地浏览会话收集的性能指标，同时考虑到您的机器和网络状简化社交媒体工作：规划战略的集群方案况。

此外，当您加载页面并与之交互时，指标（最大内容绘制、累计布局偏移和下次绘制交互）将实时更新。此外，所指标都根据其性能阈值进行颜色编码，因此可以轻松 AU 手机号码识别发生的任何问题。

说到 INP，当您与不同的页面元素交互时，您会看到不同的结果。好消息是，在指标下方，您将看到触发 INP 的元素，这样您就可以找出罪魁祸首。

将您当地的体验与游客的体验进行比较

您可能知道，完全关注PageSpeed Insights 的性能得分的最大问题是它基于实验室数据。嗯，从某种意义上说，您的本地结果也是基于在完美条件下运行的测试。

实验室与现场数据

实验室数据是在受控环境中收集的，其中模拟了网络速度和设备类型等条件以确保结果一致。这有助于开发人员在理想条件下对网站进行基准测试和调试。相比之下，现场数据反映了真实用户体验，捕捉了您的网站在不同设备、网络速度和地理位置上的表现。这使得它能够更准确地衡量用户在现实世界中对您网站的体验。

虽然这些测试对于调试非常有用，但它们并没有显示真正重要的东西——现实世界的访问者如何体验您的网站。

通过“性能”面板，您可以将本地结果与真实用户（现场）数据进行比较。

值得注意的是，

该字段数据来源于公共CrUX API，它是对给定网页和来源的真实用户体验的 28 天汇总。

要开始查看现场数据，请单击现场数据小部件中的“设置”，然后单击配置窗口中的“确定” 。

如果您的网站/页面符合资格标准，您的字段数据将立即出现。

但是为什么启用这种比较很重要？

从上面的示例中可以看出，我们所有的核心 Web 指标都处于“良好”水平，这意味着该网站提供了出色的用户体验。如果我们就此止步，完全依赖本地指标提供的信息，那么一切似乎都很好，我们不需要进行任何优化。

然而，一旦我们启用现场数据，我们就会发现实际情况有些不同。例如，虽然我们的 LCP 元素在本地环境中的加载时间为 678 毫秒，但对于 75% 的实际访问，它需要 2.69 秒。这属于“需要改进”的阈值。INP 也是如此。

那么，如何设置本地环境以便识别潜在问题？

如何设置环境来重现问题

网页上的体验受许多因素影响。不过，性能面板可让您在一定程度上配置环境，使其与真实用户对您网站的感受相似。