最大的 Contentful Paint 正在等待未知的东西答案

【问题标题】：Largest Contentful Paint is waiting for something unknown最大的 Contentful Paint 正在等待未知的东西
【发布时间】：2021-03-28 07:22:10
【问题描述】：

我的网站https://www.rbfamily.nl/ 遇到了谷歌页面速度问题，我不知道为什么。主要瓶颈似乎是LCP 时间，谷歌表示这需要 7 到 11 秒，具体取决于运行时间。

正如您在瀑布中看到的那样，首屏上方的所有内容都被快速加载并且之后不会更改。如果我在 chrome 中使用性能选项卡，网络设置为 3g，CPU 速度降低 4 倍，它仍然会在 2s 内加载所有内容。用光速查看 chrome 中的“查看原始跟踪”，一秒钟后我看不到网站有任何变化。

我什至尝试过不使用背景图片、网络字体、脚本和首屏以下没有内容，但它几乎不会改变 LCP 时间。

在调用 LCP 加载之前，谁能告诉我 pagespeed 正在等待什么？

更新

除了 css 之外，我将所有内容都精简到最低限度。 https://rbfamily.dego.dev/

即使所有内容都绘制在瀑布的第一帧中，我仍然在灯塔中获得红色 LCP 分数（2.9 秒）。

【问题讨论】：

【解决方案1】：

谁能告诉我 pagespeed 在调用 LCP 加载之前等待什么？

当运行“快速 3G”和“4x CPU 减速”时，我得到的时间与 Lighthouses 预测相似。（由于 Lighthouse 使用模拟节流，会有一些差异。

在 7 秒时导致 LCP 的是您的英雄图像（如果从下面的图像中看不清楚，名为“homepagebg.jpg.webp”的 webp 图像是完成加载的大绿色条，就像您看到的一样LCP 条目）。

我的猜测是，在“网络”选项卡上，您没有选中“禁用缓存”，因此您正在从“热缓存”运行性能跟踪。

您必须记住，除非明确告知不要这样做（使用 Lighthouse CLI，或取消选中 Lighthouse 选项卡上的“清除存储”复选框），否则 Lighthouse 始终像第一次访问页面一样运行，因此没有任何缓存的图像、文件等。

缓存图像后，我会获得 2 秒的 LCP，就像您正在经历的那样。

【讨论】：

显然我首先想到的是主背景，但是当我完全删除图像并只使用灰色背景时，LCP 并没有改变
你有什么地方我也可以为你测试吗？请记住，如果您不清除缓存，那么您仍然可能会看到旧结果？（不是教你“吸鸡蛋”，只是想看看这是否只是我们所有人都有的那些令人讨厌的“哦，当然”时刻之一：-P）
我基本上剥离了除 css 之外的所有内容，但 LCP 仍需要 2.5 秒才能触发。因此，很难将内容保持在 2.5 秒以下。如果我想要一个体面的分数，我想我必须把所有东西都降到最低限度。整个网站不再使用方便的单一样式表。 rbfamily.dego.dev
感谢您查看并提供一些指导。
呵呵，是的，如果你不从一开始就构建它，那真的很痛苦，祝项目好运！