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 显示加载时间更长？

答案是模拟网络节流和CPU 节流的组合。

模拟网络节流

当您运行审核时，它会对每个请求应用 150 毫秒的延迟，并将下载速度限制为每秒 1.6 兆位（200 千字节），上传速度为每秒 750 兆位（94 千字节）。

这是通过算法而不是应用来完成的（它是模拟的）

CPU 节流

Lighthouse 对您的 CPU 应用 4 倍减速以模拟中端手机性能。

如果您的 JavaScript 负载很重，这可能会阻塞主线程并延迟渲染。或者，如果您使用 JavaScript 动态插入元素，出于同样的原因，它可能会延迟 LCP。

这也是通过算法而不是应用来完成的（它是模拟的）

那么为什么它与性能跟踪不匹配呢？

因为跟踪是“正如它发生的那样”，并且没有考虑模拟的网络和 CPU 减速。

我可以让性能跟踪匹配 Lighthouse 吗？

是的 - 您需要做的就是取消选中设置部分下的“模拟节流”（您可能需要按下 Lighthouse 选项卡右上角的齿轮以显示此复选框）。

请注意，您可能会得到更低的分数，因为模拟节流可能会更宽容一些。

另请注意，您的报告将需要更长的时间才能运行（这有助于查看使用 4G 连接速度较慢的手机的人可能会如何体验您的网站！）

现在，当您运行 Lighthouse 时，它​​将使用应用节流，实时添加延迟和 CPU 减速。如果您现在查看您的跟踪，您将看到它匹配。

我在哪里可以看到运行时使用了哪些设置？

在报告底部，您可以看到应用了哪些设置。您将在下面的屏幕截图中看到“(Devtools)”列在网络节流和 CPU 节流部分，以表明我使用了应用节流。