从LightHouse到Performance之间的LCP时间-Google Chrome 模拟网络节流 CPU节制

问题描述

使用Google chrome chrome开发人员，我正在运行灯塔分析手机版。

灯塔显示最大内容绘画（LCP）的7.0秒延迟：

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

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

这里说LCP为749.7ms（= 0.7497秒）。

LightHouse和“效果”标签之间的差异来自何处？

• 0.7497秒的表现
• LightHouse 7.0秒

解决方法

为什么Lighthouse显示的加载时间更长？

答案是simulated network throttling和CPU throttling的组合。

模拟网络节流

运行审核时，它将对每个请求施加150ms的延迟，还将下载速度限制为每秒1.6兆位（200 KB），并每秒上传750兆位（94 KB）。

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

CPU节制

灯塔将CPU速度降低4倍，以模拟中端手机的性能。

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

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

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

因为跟踪是“按实际情况进行的”，并且没有考虑模拟的网络和CPU的速度下降。

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

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

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

还请注意，您的报告将需要花费更长的时间运行（这有助于查看4G连接速度较慢的慢速电话上的用户可能会访问您的网站！）

现在，当您运行Lighthouse时，它将使用 applied 进行限制，从而实时增加延迟和CPU速度。如果现在查看您的跟踪，您将看到它匹配。

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

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