performance - 为什么最大的内容绘画几乎是 4 秒？

Question

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

当我使用 PageSpeed Insights(当前在 Lighthouse v6.0.0 上运行)测试网站的当前版本时，它有 90 个点用于桌面用 1.8 秒来呈现最大的内容绘画，这似乎是 View 底部的 4 个图像港口:



当我切换到移动结果时，它有 61 个点和 3.7 秒来渲染最大内容绘制，尽管视口(viewport)中甚至没有图像:



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

<img>元素

<image>元素内的元素

<video>元素(使用海报图片)

具有通过 url() 函数加载的背景图像的元素(与 CSS 渐变相反)

包含文本节点或其他内联文本元素子级的 block 级元素。

当我在最新版本的 Chrome for macOS (Lighthouse 5.7.1) 中进行测试时，最大的内容绘制在大约 0.5 秒后呈现:



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

Answer 1

您错过了 Lighthouse(Page Speed Insights (PSI) 背后的引擎)如何工作的重要部分。
为移动 PSI 运行测试时，会模拟 4 倍 CPU 减速和 4G 连接。
要在配置文件时模拟这一点，您需要将“网络”更改为“快速 3G”(这足够接近，为了更准确，您可以设置与 PSI 相同的 4G 配置文件 - 见下文)并更改“CPU”到“4 倍减速”。
如果您使用这些设置再次运行分析，您将看到渲染页面只需要 3 秒多一点，然后在加载字体后不久，这是最大的内容绘制发生的时候。
下图显示了设置的位置(右侧)

如何将您的网络配置文件设置为与 Page Speed Insights 相同
Page Speed Insights 使用与我之前所说的 Lighthouse 相同的设置。您可以找到 config they currently use here.
从这里我们可以看到他们使用throttling.mobileSlow4G作为默认值，可以设置如下:-
下载: 1.6 * 1024 * 0.9 = 1474 kbps。
上传: 750 * 0.9 = 675 kbps。
延迟: 150 * 3.75 = 562.5 毫秒。
如果您使用上述设置设置配置文件(转到“网络”->“自定义”->“添加”)并将其命名为“Page Speed Insights Throttle Settings”，您可以使用它来运行非常相似的配置文件.
获取分析数据的另一种方法
通过单击设置齿轮(审计面板的右上角)并取消选中出现的小栏中的“模拟限制”，可以使在开发人员工具 > 审计中生成的跟踪生成准确的跟踪。
如果您然后运行您的审计(它将花费更长的时间，因为它现在应用节流而不是模拟它)。然后，您可以通过单击“查看跟踪”按钮访问与您的报告匹配的跟踪，该按钮位于照片时间线上方/“交互时间”下方。