浏览器开发者工具中的实时核心网络指标（本地指标）

本地指标是 Chrome DevTools 中性能面板的新增功能。它们提供有关您网站性能的实时数据，使您能够在与网站交互时监控和分析网站的性能指标。对于想要了解其网站在实际场景中的表现并快速识别性能瓶颈的开发人员来说，此功能非常有用。

本地指标也称为实时指标，包括以下关键绩效指标：

使用本地指标有什么优势？

本地指标提供有关网站性能的实时数据，让您在与网站互动时监控性能指标。这样就无需将网站部署到暂存环境或使用第三方工具来分析性能指标。这也有助于在开发过程的早期发现性能问题。

让我们了解本地指标面板中的每个部分

LCP（最大容量涂料）

最大内容绘制 (LCP) 指标衡量的是最大内容元素在屏幕上呈现所需的时间。这是一个重要的指标，因为它表明页面的主要内容何时对用户可见。良好的 LCP 分数通常小于 2.5 秒。

LCP 面板显示以下数据：

CLS（累积布局偏移）

累积布局偏移 (CLS) 指标衡量页面的视觉稳定性。它量化了页面元素在加载过程中的偏移量。良好的 CLS 分数通常小于 0.1。

CLS 面板显示以下数据：

您可以点击“Shifts”链接来查看该页面上布局班次的详细信息。

这些值是“实时的”，将在您与页面交互时更新。

INP（与下一绘制交互）

INP 是 Chrome DevTools 中引入的一项新指标，用于测量从第一次交互到下一次绘制所花费的时间。它可以帮助您了解页面对用户交互的响应速度。良好的 INP 分数通常小于 100 毫秒。这有助于识别缓慢的交互并对其进行优化以获得更好的性能。

您可以在前面的图片中看到 INP 值为空白。这是因为只有当页面上有交互时才会计算 INP 值。您可以与页面交互并实时查看 INP 值更新。

在上面的截图中，我点击搜索字段后，INP 值立即更新。INP 指标以毫秒为单位显示值以及与之交互的元素。此处的交互是点击事件，因此事件类型为“指针”。

绿色表示迄今为止的 INP 分数良好。如果分数较差，则会以红色突出显示。还有橙色表示分数中等。

INP 值也是实时的，会随着您与页面交互而更新。在这里您可以看到 INP 标签指向最大值。

现场数据

现场数据是本地指标面板中的另一个重要部分。它提供有关您网站性能的真实数据。现场数据是从访问您网站的真实用户那里收集的。这些数据可帮助您了解您的网站在现实世界中的表现，并确定需要解决的性能瓶颈。

启用此功能后，您可以查看 LCP、CLS 和 INP 等性能指标的现场数据。这可以帮助您将实验室数据与现场数据进行比较并识别任何差异。

您可以在此处看到，字段数据报告了性能指标的第 75 个百分位值。在此示例中，这些值是针对“桌面”用户收集的。但是，您可以将设备类型更改为“移动”以查看移动用户的字段数据。

环境设置

环境设置允许您模拟不同的网络条件和 CPU 限制。这有助于您了解网站在不同网络条件和设备功能下的表现。您可以选择不同的网络配置文件，例如“离线”、“3G”、“慢速 4G”和“快速 4G”。您还可以限制 CPU 以模拟不同的设备功能。

**为什么这很重要？**

大多数情况下，我们会在网络连接稳定、设备高端的受控环境中测试网站。但在现实世界中，用户的网络条件和设备可能有所不同。通过模拟不同的网络条件和 CPU 节流，您可以了解网站在现实世界中的表现，并对其进行优化以获得更好的性能。

寻找缓慢的交互

首先使用 INP 标记缓慢的交互。这将以红色或橙色突出显示。一旦您确定了缓慢的交互，请使用性能面板中的记录功能记录交互并分析性能瓶颈。

在录制过程中，您可以重复 INP 报告的那些运行缓慢的相同交互。现在，您可以精确地找出导致运行缓慢的交互的性能瓶颈。您可以使用火焰图、网络面板和 Chrome DevTools 中的其他性能工具来分析性能瓶颈。

我们来看看录音的内容：

您还可以点击“按阶段划分的 INP”链接查看 INP 指标的细分。这将帮助您了解交互的哪个阶段比较慢且需要优化。通过此链接，您可以发现交互是否由于 JavaScript 执行、渲染或任何其他性能瓶颈而导致缓慢。

最后看一下火焰图

在这里，展开火焰图，您可以看到性能瓶颈的详细细分。您可以看到每个任务所花费的时间，并确定导致交互缓慢的瓶颈。这将帮助您优化性能瓶颈并提高网站的整体性能。

概括

本地指标是一种功能强大的工具，可提供有关网站性能的实时数据。它可以帮助您在与网站交互时监控性能指标并快速识别性能瓶颈。通过使用本地指标，您可以优化网站的性能并为访问者提供更好的用户体验。