为什么我的 Largest Contentful Paint 比我的页面加载时间大很多？
Why is my Largest Contenful Paint so much larger than my page load time?
我正在优化 WordPress 网站的页面速度。为此，我使用 Google PageSpeed Insights 来查找我的弱点。这是关于网站 goedkopewebsitezzp.nl.
我采取的一些措施：
- 每个页面都被缓存
- 我用 ShortPixel 优化了每张图片，它们被用作 WebP
- 所有 CSS 和 JS 被缩小并使用插件组合。不幸的是 CSS 仍然分成三个文件，但我找不到将其再次编译成一个文件的方法。
- 我使用 Cloudflare CDN
- jQuery 从 Cloudflare CDN 加载。
我目前的页面速度分数大约是 65-68。最大的 'red' 因素是 Largest Contentful Paint。
我目前对如何进行 LCP 有点困惑，我不明白为什么这个值这么大。如果你visit the website，那是相当快的。我的经验是空缓存等最多 2 秒
当我的页面加载速度更快时，为什么 LCP 的值略小于 9 秒？ LCP 元素是第一个粗体 header（h1 元素）。
我认为主题有些不对劲。我在另一个 website 上也有同样的问题，我也使用了相同的主题。 LCP还有9秒左右。
也许动画是原因，但这只需要大约 200 毫秒。我已经尝试禁用它，但没有任何改进。
我真的很纠结如何处理这个问题，由于 LCP 占总分的 25%，我真的很想把它缩短到几秒钟。
非常感谢。非常感谢所有帮助！
速度指数
Speed Index这里解释起来比较复杂，所以我会link到this article and the original speed index that Lighthouse Speed Index is based on
但本质上，它会在加载时沿时间线比较网站的大量图像。当它发现与最终页面设计相比已达到一定的“完整性”时，它会将这段时间用作速度指数。
现在，当您应用整个页面的白色封面来隐藏所有正在进行的加载时，会创建整个页面的绘制事件，这会稍微扭曲您的速度指数。
这些数字也被长动画歪斜了。你说 200 毫秒，但性能跟踪认为它更像是 400 毫秒，这与以下项目匹配：-
#ambition_body.fade_in_out {
transition-duration: 400ms;
}
因此您的速度指数可能略有偏差，但如果有的话，它比实际情况低，因为当我申请时您的白色封面停留在 3.4 秒之后 network throttling and CPU throttling 以匹配 Lighthouse（Page Speed Insights 背后的引擎）。
注意： 这就是为什么你看到 9 秒而不是你观察到的 2 秒时间，Lighthouse 正在考虑网络上的节流和 CPU 根据 link编辑上段文章信息
内容最多的绘画
这确实发生在很久以后，似乎在淡出发生时页面略有移动。正如您在此性能跟踪中看到的那样，它恰好发生在跟踪中的最终图像之前（LCP 线是要查看的线）。
这似乎是由于发生了一些奇怪的事情，可能与您的菜单有关。
我在 Developer tools 的“渲染”选项卡下打开了“paint flashing”，就在页面淡入视图时，左上角有一个奇怪的闪光，然后整个页面似乎都在重新绘制。
我没有时间为你找到根本原因，但我的直觉告诉我，看看菜单在页面加载时做了什么，看看你是否用 JS 隐藏了它。
如果您使用 JS 隐藏它并且使用 html * {transition: all 0.2s ease;} 在网站上的每个元素上都有 0.2 秒的动画（这不是一个好主意）那么这可能会导致不必要的重绘并延迟您的 LCP .
实际问题。
问题是我们可以对数字稍作争论，但您的网站确实不是特别快。
它重 1.4 兆字节，如果您考虑移动 3G 连接可能只有每秒 2 兆位（所以大约 250 千字节 每秒）。
此外，您还有将近 1 兆字节的未压缩 JavaScript 可在站点上编译和执行（压缩后约 250kb）。
这对移动设备来说是一项繁重的工作 CPU。
尝试并删除一些 JavaScript 臃肿的内容，但是使用 elementor 之类的东西（如您的网站似乎所做的那样）时会很困难。
此外，如果您修复 critical rendering path and 并推迟 JavaScript（这对于呈现“首屏”内容而言并非必需），您的速度也会大大提高。
我正在优化 WordPress 网站的页面速度。为此，我使用 Google PageSpeed Insights 来查找我的弱点。这是关于网站 goedkopewebsitezzp.nl.
我采取的一些措施：
- 每个页面都被缓存
- 我用 ShortPixel 优化了每张图片，它们被用作 WebP
- 所有 CSS 和 JS 被缩小并使用插件组合。不幸的是 CSS 仍然分成三个文件，但我找不到将其再次编译成一个文件的方法。
- 我使用 Cloudflare CDN
- jQuery 从 Cloudflare CDN 加载。
我目前的页面速度分数大约是 65-68。最大的 'red' 因素是 Largest Contentful Paint。
我目前对如何进行 LCP 有点困惑，我不明白为什么这个值这么大。如果你visit the website，那是相当快的。我的经验是空缓存等最多 2 秒
当我的页面加载速度更快时，为什么 LCP 的值略小于 9 秒？ LCP 元素是第一个粗体 header（h1 元素）。
我认为主题有些不对劲。我在另一个 website 上也有同样的问题，我也使用了相同的主题。 LCP还有9秒左右。
也许动画是原因，但这只需要大约 200 毫秒。我已经尝试禁用它，但没有任何改进。
我真的很纠结如何处理这个问题，由于 LCP 占总分的 25%，我真的很想把它缩短到几秒钟。
非常感谢。非常感谢所有帮助！
速度指数
Speed Index这里解释起来比较复杂，所以我会link到this article and the original speed index that Lighthouse Speed Index is based on
但本质上，它会在加载时沿时间线比较网站的大量图像。当它发现与最终页面设计相比已达到一定的“完整性”时，它会将这段时间用作速度指数。
现在，当您应用整个页面的白色封面来隐藏所有正在进行的加载时，会创建整个页面的绘制事件，这会稍微扭曲您的速度指数。
这些数字也被长动画歪斜了。你说 200 毫秒，但性能跟踪认为它更像是 400 毫秒，这与以下项目匹配：-
#ambition_body.fade_in_out {
transition-duration: 400ms;
}
因此您的速度指数可能略有偏差，但如果有的话，它比实际情况低，因为当我申请时您的白色封面停留在 3.4 秒之后 network throttling and CPU throttling 以匹配 Lighthouse（Page Speed Insights 背后的引擎）。
注意： 这就是为什么你看到 9 秒而不是你观察到的 2 秒时间，Lighthouse 正在考虑网络上的节流和 CPU 根据 link编辑上段文章信息
内容最多的绘画
这确实发生在很久以后，似乎在淡出发生时页面略有移动。正如您在此性能跟踪中看到的那样，它恰好发生在跟踪中的最终图像之前（LCP 线是要查看的线）。
这似乎是由于发生了一些奇怪的事情，可能与您的菜单有关。
我在 Developer tools 的“渲染”选项卡下打开了“paint flashing”，就在页面淡入视图时，左上角有一个奇怪的闪光，然后整个页面似乎都在重新绘制。
我没有时间为你找到根本原因，但我的直觉告诉我，看看菜单在页面加载时做了什么，看看你是否用 JS 隐藏了它。
如果您使用 JS 隐藏它并且使用 html * {transition: all 0.2s ease;} 在网站上的每个元素上都有 0.2 秒的动画（这不是一个好主意）那么这可能会导致不必要的重绘并延迟您的 LCP .
实际问题。
问题是我们可以对数字稍作争论，但您的网站确实不是特别快。
它重 1.4 兆字节，如果您考虑移动 3G 连接可能只有每秒 2 兆位（所以大约 250 千字节 每秒）。
此外，您还有将近 1 兆字节的未压缩 JavaScript 可在站点上编译和执行（压缩后约 250kb）。
这对移动设备来说是一项繁重的工作 CPU。
尝试并删除一些 JavaScript 臃肿的内容，但是使用 elementor 之类的东西（如您的网站似乎所做的那样）时会很困难。
此外，如果您修复 critical rendering path and 并推迟 JavaScript（这对于呈现“首屏”内容而言并非必需），您的速度也会大大提高。