lighthouse - 为什么同一测试运行的 Lighthouse 选项卡和性能选项卡之间的 LCP 值存在巨大差异?
问题描述
以下是我用来生成报告的步骤,以下是我的问题所依据的:
- 在 chrome 浏览器上启动此网址:“https://www.americanexpress.com/us/credit-cards/business/”打开开发工具并单击“灯塔”选项卡。确保设备复选框为“桌面”。然后单击“生成报告”按钮。报告将如下图所示:灯塔视图。请注意,LCP 值为 2.2 秒(2200 毫秒)
- 现在单击屏幕下方的“查看原始跟踪”按钮。结果视图将如下图所示: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 最终会在未来被采用吗?
提前感谢您提供的任何帮助。威廉
解决方案
当您在审核期间查看“原样”的原始跟踪时。
现在,如果您具有低延迟的特别良好的连接,您将获得细微的差异。
这是因为 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 处理器。
推荐阅读
- angular - 如何在 mat-form-field Angular Meterial 中删除 [object Object]
- python - 访问在python中循环外的for循环内部生成的数据框
- angular - Angular 的结构化指令不起作用
- angular - Angular 6 looping through child form Controls to patch form
- wordpress - Wordpress 媒体上传器:上传文件字体颜色为白色。如何改变?
- python - how to get a str from terminal and decode as gbk
- vue.js - VueJS handling dynamic input
- c# - How to create constructor of ThisAddIn class in VSTO
- flask - 无法从“女服务员”导入名称“服务”
- python-3.x - 通过循环写入数据帧