为什么同一测试运行的 Lighthouse 选项卡和性能选项卡之间的 LCP 值存在巨大差异？

Question

以下是我用来生成报告的步骤，我的问题是根据这些步骤得出的：

1. 在 chrome 浏览器上启动此网址： “https://www.americanexpress.com/us/credit-cards/business/” 打开 开发工具并单击“灯塔”选项卡。确保设备复选框 是“桌面”。然后单击“生成报告”按钮。那个报告 看起来像这样的图像：lighthouse view。请注意 LCP 值为 2.2 秒（2200 毫秒）
2. 现在点击下方的“查看原始跟踪”按钮 屏幕。结果视图将如下图所示：Performance view。请注意，LCP 值约为 890 毫秒（大约是 2200 毫秒的 1/3。

所以这是我的问题：为什么 Lighthouse 视图上的 LCP 是“2200 ms”（2.2 秒），而性能选项卡上的 LCP（来自相同的测试运行）显示为低得多的“890 ms”？

这就是我提出这个问题的原因：我们的开发团队已尽最大努力在某些其他活动之前尽快绘制页面，以提高感知到的页面性能。所以我认为性能选项卡上的 LCP 890ms 是正确的值。但不幸的是，“官方”报告取自 Lighthouse 选项卡中更高的“2200ms”值。我提到“官方”这个词的原因是，“PageSpeed Insight”网站使用与 Lighthouse 报告相同的算法。您认为这是 Lighthouse 报告的错误还是临时状态？您认为性能选项卡上的实际 LCP 最终会在未来被采用吗？

提前感谢您提供的任何帮助。 威廉

Answer 1

当您在审核期间查看“原样”的原始跟踪时。

现在，如果您有一个特别好的连接和低延迟，您会得到细微的差异。

这是因为 lighthouse（至少在浏览器中）应用了网络限制，即使在桌面上也是如此。

它将延迟设置为 40 毫秒，将吞吐量设置为每秒 10,240 千位（即每秒大约 1.25 兆字节）。

这就是您看到不同数字的原因，您链接的页面为 1.8 兆字节，因此在这些模拟网络条件下下载大约需要 1.5 秒。我猜你的连接速度比每秒 10 兆比特快很多倍，如果你的连接良好，你的延迟可能低于 40 毫秒。

如何得到匹配的数字？

在开发人员工具的 Lighthouse 选项卡上，您可以关闭此限制。

只需取消选中“模拟限制”并重新运行测试，您会发现您的结果完全匹配，因为没有应用网络限制。

如果您在移动设备上取消选中“模拟限制”，您将获得已应用的限制，因此您实际上会看到页面加载速度较慢。再次，您的跟踪将完全匹配。

您可以在报告最底部的“运行时设置”下查看所有限制信息。

如您所见，我有0 ms HTTP RTT, 0 Kbps down, 0 Kbps up (DevTools) 用于网络限制，因为没有应用限制。您可能会看到我前面提到的 40 ms TCP RTT, 10,240 Kbps throughput (Simulated)。

页面速度洞察

我不确定他们是否在 Page Speed Insights 上使用完全相同的数字，但他们可能会应用一些限制，因为像他们拥有的多千兆专用连接并不表示现实世界的家庭宽带连接。

它们也可能有轻微的 CPU 节流，因为服务器处理器并不代表笔记本电脑/PC 处理器。

Answer 2

我刚遇到一个案例，其中 Performance 选项卡和 Lighthouse 报告发现并测量了不同的 LCP 元素。性能标签说 LCP 元素是一个段落，而 Lighthouse 认为它是隐藏在网站 cookie 横幅下的图像。不用说，它们的加载时间大不相同。

您显然不能信任开发人员工具。即使它们是同一家公司开发的相同东西......