为什么同一测试的 Lighthouse 选项卡和 Performance 选项卡的 LCP 值大不相同 运行？
Why LCP values are drastically different between the Lighthouse tab and Performance tab for a same test run?
以下是我用来生成报告的步骤，我的以下问题来源于此：
- 在 chrome 浏览器上启动此 url：
“https://www.americanexpress.com/us/credit-cards/business/”打开
开发工具并单击“灯塔”选项卡。确保设备复选框
是“桌面”。然后点击“生成报告”按钮。那个报告
将如下图所示： lighthouse view 。请注意
LCP 值为 2.2 秒（2200 毫秒）
- 现在点击页面下方的“View Original Trace”按钮
屏幕。结果视图将如下图所示：性能
查看。请注意，LCP 值约为 890
毫秒（大约是 2200 毫秒的 1/3。
所以这是我的问题：为什么 Lighthouse 视图上的 LCP 是“2200 ms”（2.2 秒）而 LCP在“性能”选项卡上（来自同一个测试-运行）显示为低得多的“890 ms”?
这就是我问这个问题的原因：我们的开发团队已尽最大努力在某些其他活动之前尽快绘制页面，以提高感知页面性能。所以我认为性能选项卡上的 LCP 890ms 是正确的值。但不幸的是，“官方”报告取自 Lighthouse 选项卡中更高的值“2200ms”。我提到“官方”这个词的原因是，“PageSpeed Insight”站点使用与 Lighthouse 报告相同的算法。您认为这是 Lighthouse 报告的一些错误或临时状态吗？并且您认为Performance选项卡上的实际LCP最终会被采用吗？
提前感谢您提供的任何帮助。
威廉
当您在审核期间查看“如实发生”的原始跟踪时。
现在，如果您的连接特别好且延迟很低，您将获得细微差别。
这是因为 lighthouse（至少在浏览器中）应用网络节流，即使在桌面上也是如此。
它将延迟设置为 40 毫秒，将吞吐量设置为每秒 10,240 Kilobits（因此大约每秒 1.25 megabytes）。
这就是您看到不同数字的原因，您链接的页面是 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 上使用完全相同的数字，但他们可能会应用一些节流作为 multi-gigabit 专用连接，就像他们拥有的那样并不表示真实世界的家庭宽带连接。
它们也可能有轻微的 CPU 节流，因为服务器处理器不代表笔记本电脑/PC 处理器。
我刚刚遇到一个案例，其中 Performance 选项卡和 Lighthouse 报告在不同的 LCP 元素上找到并测量。性能选项卡表示 LCP 元素是一个段落，而 Lighthouse 认为它是隐藏在网站 cookie 横幅下的图像。不用说，它们的加载时间大不相同。
您显然不能信任开发者工具。即使它们是同一家公司开发的同一东西...
以下是我用来生成报告的步骤，我的以下问题来源于此：
- 在 chrome 浏览器上启动此 url： “https://www.americanexpress.com/us/credit-cards/business/”打开 开发工具并单击“灯塔”选项卡。确保设备复选框 是“桌面”。然后点击“生成报告”按钮。那个报告 将如下图所示： lighthouse view 。请注意 LCP 值为 2.2 秒（2200 毫秒）
- 现在点击页面下方的“View Original Trace”按钮 屏幕。结果视图将如下图所示：性能 查看。请注意，LCP 值约为 890 毫秒（大约是 2200 毫秒的 1/3。
所以这是我的问题：为什么 Lighthouse 视图上的 LCP 是“2200 ms”（2.2 秒）而 LCP在“性能”选项卡上（来自同一个测试-运行）显示为低得多的“890 ms”?
这就是我问这个问题的原因：我们的开发团队已尽最大努力在某些其他活动之前尽快绘制页面，以提高感知页面性能。所以我认为性能选项卡上的 LCP 890ms 是正确的值。但不幸的是，“官方”报告取自 Lighthouse 选项卡中更高的值“2200ms”。我提到“官方”这个词的原因是，“PageSpeed Insight”站点使用与 Lighthouse 报告相同的算法。您认为这是 Lighthouse 报告的一些错误或临时状态吗？并且您认为Performance选项卡上的实际LCP最终会被采用吗？
提前感谢您提供的任何帮助。 威廉
当您在审核期间查看“如实发生”的原始跟踪时。
现在，如果您的连接特别好且延迟很低，您将获得细微差别。
这是因为 lighthouse（至少在浏览器中）应用网络节流，即使在桌面上也是如此。
它将延迟设置为 40 毫秒，将吞吐量设置为每秒 10,240 Kilobits（因此大约每秒 1.25 megabytes）。
这就是您看到不同数字的原因，您链接的页面是 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 上使用完全相同的数字，但他们可能会应用一些节流作为 multi-gigabit 专用连接，就像他们拥有的那样并不表示真实世界的家庭宽带连接。
它们也可能有轻微的 CPU 节流，因为服务器处理器不代表笔记本电脑/PC 处理器。
我刚刚遇到一个案例，其中 Performance 选项卡和 Lighthouse 报告在不同的 LCP 元素上找到并测量。性能选项卡表示 LCP 元素是一个段落，而 Lighthouse 认为它是隐藏在网站 cookie 横幅下的图像。不用说，它们的加载时间大不相同。
您显然不能信任开发者工具。即使它们是同一家公司开发的同一东西...