为什么最大的内容绘制接近 4 秒？

Question

我不明白https://www.openstream.ch移动版上的哪个元素被 Lighthouse认为是最大的内容绘制。

当我使用 PageSpeed Insights（目前在 Lighthouse v6.0.0 上运行）测试当前版本的网站时，它有 90 点的桌面和1.8 秒来渲染最大的内容绘制，这似乎是视图底部的 4 个图像港口：

当我切换到移动结果时，它有 61 个点和 3.7s 来渲染Largest Contentful Paint，尽管视口中甚至没有图像：

在https://web.dev/lcp/ 上，它说目前考虑用于最大内容绘制的元素类型是：

当我在适用于 macOS 的最新版 Chrome（Lighthouse 5.7.1）中进行测试时，最大的内容绘制在大约 0.5 秒后呈现：

这是 Lighthouse 6.0.0 中的错误还是可能有其他原因？

Answer 1

您错过了 Lighthouse（Page Speed Insights (PSI) 背后的引擎）工作方式的一个重要部分。

在运行移动 PSI 测试时，模拟 4 倍 CPU 速度下降和 4G 连接。

要在分析时模拟这一点，您需要将“网络”更改为“快速 3G”（这已经足够接近了，为了更准确，您可以为 4G 设置一个与 PSI 相同的配置文件 - 见下文）并更改“ CPU”到“4 倍减速”。

如果您使用这些设置再次运行分析，您将看到渲染页面只需要 3 秒多一点，然后在加载字体后不久，这是最大的内容绘制发生的时间。

下图显示了设置的位置（右侧）

如何将您的网络配置文件设置为与 Page Speed Insights 相同

Page Speed Insights 使用与我之前所说的 Lighthouse 相同的设置。您可以在此处找到他们当前使用的配置。

从这里我们可以看到它们throttling.mobileSlow4G用作默认值，可以设置如下：-

下载： 1.6 * 1024 * 0.9 = 1474 kbps。

上传： 750 * 0.9 = 675 kbps。

延迟： 150 * 3.75 = 562.5 毫秒。

如果您使用上述设置设置配置文件（转到“网络”->“自定义”->“添加”）并将其命名为“Page Speed Insights Throttle Settings”，然后您可以使用它来运行非常相似的配置文件.

通过单击设置齿轮（审核面板的右上角）并在出现的小栏中取消选中“模拟节流”，可以使在开发人员工具 > 审核中生成的跟踪生成准确的跟踪。

如果您然后运行您的审计（它会花费更长的时间，因为它现在应用节流而不是模拟它）。然后，您可以通过单击位于照片时间线正上方/“交互时间”下方的“查看跟踪”按钮访问与您的报告匹配的跟踪。