performance - LightHouse 和 Performance 之间的 LCP 时间 - Google Chrome

Question

使用 google chrome chrome dev，我正在为移动设备运行灯塔分析。
Lighthouse 显示最大内容绘制 (LCP) 的延迟为 7.0 秒:

我决定深入研究并单击:“查看原始跟踪”。
它将我重定向到性能选项卡:

这里说 LCP 是 749.7 毫秒(= 0.7497 秒)。
LightHouse 和 Performance 选项卡之间的这种差异来自哪里？

0.7497 秒性能

LightHouse 7.0 秒

Answer 1

为什么 Lighthouse 显示加载时间更长？
答案是simulated network throttling的组合和 CPU throttling .
模拟网络节流
当您运行审核时，它会对每个请求应用 150 毫秒的延迟，并将下载速度限制为每秒 1.6 兆位(200 千字节)，上传速度为每秒 750 兆位(94 千字节)。
这是通过算法而不是应用来完成的(它是模拟的)
CPU 节流
Lighthouse 对您的 CPU 应用 4 倍减速以模拟中端手机性能。
如果您的 JavaScript 负载很重，这可能会阻塞主线程并延迟渲染。或者，如果您使用 JavaScript 动态插入元素，出于同样的原因，它可能会延迟 LCP。
这也是通过算法而不是应用来完成的(它是模拟的)
那么为什么它与性能跟踪不匹配呢？
因为跟踪是“正如它发生的那样”并且没有考虑模拟的网络和 CPU 减速。
我可以让性能跟踪匹配 Lighthouse 吗？
是的 - 您需要做的就是取消选中设置部分下的“模拟节流”(您可能需要按灯塔选项卡右上角的齿轮以显示此复选框)。

请注意，您可能会得到更低的分数，因为模拟节流可能会更宽容一些。
另请注意，您的报告将需要更长的时间才能运行(这有助于了解使用 4G 连接速度较慢的手机的人可能会如何体验您的网站!)
现在，当您运行 Lighthouse 时，它​​将使用 已申请 节流，实时添加延迟和 CPU 减速。如果您现在查看您的跟踪，您将看到它匹配。
我在哪里可以看到运行时使用了哪些设置？
在报告底部，您可以看到应用了哪些设置。您将在下面的屏幕截图中看到“(Devtools)”列在网络节流和 CPU 节流部分，以表明我使用了应用节流。