为什么最大含量的油漆几乎是4秒？

Question

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

当我使用PageSpeed Insight(目前运行在灯塔v6.0.0上)测试该网站的当前版本时，它有90分用于带有1.8s的桌面，以呈现最大的内容油漆，这似乎是视图端口底部的4幅图像：

​

​

当我切换到移动结果时，它有61个点和3.7s来呈现最大的内容油漆，尽管在视图端口中甚至没有图像：

​

​

在https://web.dev/lcp/上，它指出，目前认为最大含量涂料的元素类型如下：

• <img>元素
• 元素中的<image>元素
• <video>元素(使用海报图像)
• 通过url()函数加载背景图像的元素(相对于CSS梯度)
• 包含文本节点或其他内联级文本元素的块级元素。

当我在最新版本的Chrome (灯塔5.7.1)中进行测试时，最大的内容油漆是在0.5s之后呈现的：

​

​

这是灯塔的一个bug 6.0.0，还是它可能有另一个原因？

Answer 1

你已经错过了灯塔(页面速度洞察(PSI)背后的引擎)的一个重要部分。

当运行移动PSI测试时，模拟4倍CPU减速和4G连接。

为了模拟这种情况，你需要将“网络”改为“快速3G”(这已经足够接近了，为了更精确，你可以为4G建立一个与PSI相同的配置文件--见下文)，并将"CPU“改为”4倍减速“。

如果您再次使用这些设置运行分析，您将看到呈现页面只需3秒多一点，然后在加载字体之后不久，也就是出现最大内容画图的时候。

下图显示了设置的位置(右侧)。

​

​

如何将网络配置文件设置为与页面速度洞察相同

页面速度洞察使用与灯塔相同的设置，正如我前面说过的。你可以找到他们目前在这里使用的配置。

由此我们可以看到，它们使用throttling.mobileSlow4G作为缺省值，可以设置如下：

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

上传： 750 * 0.9 = 675 kbps。

延迟： 150 * 3.75 = 562.5ms。

如果您使用上述设置设置了一个配置文件(转到"Network“->”自定义“-> "Add")，并将其命名为”“，那么您可以使用它来运行非常类似的配置文件。

获取分析数据的另一种方法

开发人员工具>审核中产生的跟踪可以通过单击设置设备(审核面板的右上角)并在出现的小条中取消检查“模拟节流”来生成准确的跟踪。

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