为什么我的最大内容绘制比我的页面加载时间大得多？

Question

我正在优化 WordPress 网站以提高页面速度。为此，我使用 Google PageSpeed Insights 来查找我的弱点。这是关于网站goedkopewebsitezzp.nl。

我采取的一些措施：

• 每个页面都被缓存
• 我使用 ShortPixel 优化了每张图片，并将它们作为 WebP 提供
• 所有 CSS 和 JS 都使用插件进行了缩小和组合。不幸的是，CSS 仍然被拆分为三个文件，但我找不到将其重新编译成一个文件的方法。
• 我使用 Cloudflare CDN
• jQuery 是从 Cloudflare CDN 加载的。

我当前的页面速度得分约为 65-68。最大的“红色”因素是最大的 Contentful Paint。

我目前对如何继续使用 LCP 有点困惑，我不明白为什么这个值这么大。如果你visit the website，它是相当快的。我的经验是空缓存等最多 2 秒。

当我的页面加载速度更快时，为什么 LCP 的值略小于 9 秒？ LCP 元素是第一个粗体标题（h1 元素）。

我认为这个主题有些不妥。我在另一个website 上也有同样的问题，我也使用了相同的主题。那里的 LCP 也有大约 9 秒。

也许动画是原因，但这只需要大约 200 毫秒。我已经尝试禁用它，但没有任何改进。

我真的不知道如何进行此操作，由于 LCP 占总分的 25%，我真的很想把它缩短到几秒钟。

提前非常感谢。非常感谢所有帮助！

Answer 1

速度指数

速度指数在这里解释起来相当复杂，所以我将链接到this article和original speed index that Lighthouse Speed Index is based on

但本质上，它会在加载时沿时间轴比较网站的加载图像。当它发现与最终页面设计相比已达到一定的“完整性”时，它会将这段时间用于速度指数。

现在，当您应用整页白色封面来隐藏所有正在进行的加载时，这会创建整个页面的绘制事件，这会稍微扭曲您的速度指数。

人物也会因长动画而出现偏差。您说 200 毫秒，但性能跟踪认为它更像 400 毫秒，与以下项目匹配：-

#ambition_body.fade_in_out {
    transition-duration: 400ms;
}

因此，您的速度指数可能会稍有偏差，但如果有的话，它低于实际情况，因为当我应用 network throttling 和 CPU throttling 匹配时，您的白色封面停留超过 3.4 秒Lighthouse（Page Speed Insights 背后的引擎）。

注意：这就是为什么您看到 9 秒而不是您观察到的 2 秒时间，Lighthouse 根据上一段中链接的文章信息考虑了网络和 CPU 上的限制。 p>

最大的内容绘画

这确实发生在很久以后，看起来就像淡出发生时页面有轻微的变化。正如您在此性能跟踪中看到的那样，它发生在跟踪中的最终图像之前（LCP 线是要查看的线）。

这似乎是由于发生了一些奇怪的事情，可能是您的菜单。

我在开发者工具的“渲染”选项卡下打开了“绘画闪烁”，就在页面淡入视野时，左上角有一个奇怪的闪光，然后整个页面似乎重新绘制。

我没有时间为你找到根本原因，但我的直觉是看看菜单在页面加载时做了什么，看看你是否用 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，您的速度也会大大提高。