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

Question

使用 google chrome chrome dev，我正在为移动设备运行灯塔分析。

Lighthouse 显示最大内容绘制 (LCP) 的延迟为 7.0 秒：

我决定深入研究并点击：“查看原始跟踪”。

它将我重定向到性能选项卡：

这里说 LCP 是 749.7 毫秒（= 0.7497 秒）。

LightHouse 和 Performance 标签之间的这种差异来自哪里？

• 0.7497 秒的性能
• 灯塔 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 匹配吗？

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

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

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

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

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

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