Question

我正在优化WordPress网站的页面速度。为此，我使用Google PageSpeed Insights来找出我的弱点。它与网站goedkopewebsitezzp.nl有关。

我已采取的一些措施：

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

我目前对如何进行LCP感到有些困惑，我不明白为什么这个值这么大。如果您visit the website，则速度非常快。我的经验是大约2秒钟的时间，缓存等为空。

当我的页面加载速度更快时，LCP为何值不到9秒？ LCP元素是第一个粗体标头（h1元素）。

我认为主题有些不对劲。我在另一个website上也遇到了相同的问题，在这里我也使用了相同的主题。 LCP大约还有9秒。

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

我真的很困惑如何进行此操作，而LCP占总得分的25％，所以我真的想把它缩短到几秒钟。

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

Answer 1

速度指数

但是从本质上讲，它会在加载时沿时间轴比较站点图像的加载。与最终页面设计相比，当发现它已经达到一定的“完整性”时，它将使用该时间作为速度指标。

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

数字也因长动画而歪斜。您说的是200ms，但性能跟踪认为它更像是400ms，它与以下项目匹配：-

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

因此，您的速度指数可能会略微偏高，但如果比实际情况更低，因为当我应用network throttling和{{3 }}匹配Lighthouse（Page Speed Insights背后的引擎）。

注意：这就是为什么您看到9秒而不是2秒的原因的原因，根据前面段落中的链接文章信息，Lighthouse考虑了网络和CPU的节流。

最大满意的油漆

这确实发生得很晚，就像淡出时一样，页面似乎有一点偏移。正如您在此性能跟踪上看到的那样，它恰好发生在跟踪中的最终图像之前（LCP行是要查看的行）。

这似乎是由于您的菜单出现了奇怪的情况。

我在开发人员工具的“渲染”选项卡下打开了“绘画闪烁”，就像页面逐渐淡入视图一样，左上方有一个奇怪的闪烁，然后整个页面似乎都在重新绘画。

我没有时间为您找到根本原因，但我的直觉告诉您菜单在页面加载时正在做什么，并查看是否用JS隐藏了它。

如果您使用JS隐藏它，并且使用html * {transition: all 0.2s ease;}在站点上的每个元素上都有0.2秒的动画（这不是一个好主意），那么这可能会导致不必要的重画并将您的LCP延迟。 / p>

问题是我们可以对数字稍加争论，但是您的网站确实不是特别快。

它的重量为1.4兆字节，如果您认为移动3G连接每秒可能只有约2兆位（每秒约250千个字节），则该值很高。

此外，您还有近兆字节的未压缩JavaScript可以在网站上编译和执行（压缩后约为250kb）。

在移动CPU上这是很多繁重的工作。

尝试并删除一些JavaScript膨胀，但是当使用诸如elementor之类的东西时（这在您的网站看来确实如此）很困难。

如果您修复并推迟JavaScript，这对于呈现“首屈一指”的内容来说不是必不可少的，那么您的速度也会大大提高。