以下是我用来生成报告的步骤,以下是我的问题所依据的:
“https://www.americanexpress.com/us/credit-cards/business/” 打开
开发工具并单击“灯塔”选项卡。确保设备复选框
是“桌面”。然后单击“生成报告”按钮。那个报告
看起来像这样的图像:lighthouse view .请注意
LCP 值为 2.2 秒 ( 2200 毫秒 )
屏幕。结果 View 将如下图所示:Performance view .请注意,LCP 值约为 890
毫秒 (大约是 2200 毫秒的 1/3。
所以这是我的问题 :为什么 Lighthouse View 上的 LCP 为“ 2200 毫秒 ”(2.2 秒),而性能选项卡上的 LCP(来自同一测试运行)显示为低得多“890 毫秒“?
这就是我问这个问题的原因:我们的开发团队已经付出了巨大的努力,在某些其他事件之前尽快绘制页面,以提高感知的页面性能。所以我认为 LCP 890ms 性能选项卡上的值是正确的。但不幸的是,“官方”报告取自 Lighthouse 选项卡中更高的值“ 2200ms ”。我提到“官方”这个词的原因是,“PageSpeed Insight”网站使用与 Lighthouse 报告相同的算法。您认为这是 Lighthouse 报告的错误还是临时状态?您认为性能选项卡上的实际 LCP 最终会在 future 被采用吗?
提前感谢您提供的任何帮助。
威廉
最佳答案
当您在审核期间查看“原样”的原始跟踪时。
现在,如果您具有低延迟的特别良好的连接,您将获得细微的差异。
这是因为 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 处理器。
关于lighthouse - 为什么同一测试运行的 Lighthouse 选项卡和性能选项卡之间的 LCP 值存在巨大差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64615354/