为什么同一测试运行的“Lighthouse”选项卡和“性能”选项卡之间的 LCP 值截然不同？

Question

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

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

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

这就是我问这个问题的原因：我们的开发团队付出了巨大的努力，在某些其他活动之前尽快绘制页面，以提高感知的页面性能。所以我认为性能选项卡上的 LCP 890ms是正确的值。但不幸的是，“官方”报告取自 Lighthouse 选项卡中更高的值“ 2200ms ”。我之所以提到“官方”这个词，是因为“ PageSpeed Insight ”网站使用与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 处理器。