LCP 报告中我的加载延迟和加载时间很差，我该怎么办？

Question

这是我来自 PageSpeed Insights 的报告

https://pagespeed.web.dev/analysis/https-ttbeb-com/z14r7yl4wt?form_factor=mobile

我想在桌面和移动设备上都达到 90+ 的分数，因此我需要改善这两种设备的加载延迟和加载时间。

我缩小了图像尺寸并使其成为webp，但没有任何改善

任何帮助将不胜感激。

谢谢

Answer 1

您共享的 PageSpeed Insights 报告包含一些有关您的 LCP 元素以及渲染它的时间的有趣信息：

只要延迟阶段大大长于 0 毫秒，就表明页面正在执行低效操作。在桌面评估中，您的加载延迟为 1,430 毫秒。这是一个很长的时间，特别是考虑到“好的”LCP 的预算是 2,500 毫秒。

我查看了该图像包含在初始 HTML 中的方式，我注意到它正在执行一种奇怪的反模式来延迟加载图像源。这是简化的标记：

<img
  fetchpriority="high"
  width="1491"
  height="1333"
  alt=""
  sizes="(max-width: 1491px) 100vw, 1491px"
  nitro-lazy-srcset="..."
  nitro-lazy-src="..."
  class="kb-img wp-image-752 nitro-lazy"
  decoding="async"
  nitro-lazy-empty
  id="Nzk6NzUz-1"
  src="data:image/svg+xml;nitro-empty-id=Nzk6NzUz-1;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQ5MSAxMzMzIiB3aWR0aD0iMTQ5MSIgaGVpZ2h0PSIxMzMzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
/>

src

属性设置为透明SVG的数据URI。实际图像源包含在

nitro-lazy-src

和

nitro-lazy-srcset

属性中。这些属性是 NitroPack 插件的签名。

因此，您的插件似乎正在改变图像在 HTML 中标记的方式，使其保持透明，直到插件的 JavaScript 有机会执行并惰性地交换正确的

src

属性。

这对性能不利。事实上，我们 Chrome 团队的一篇文章在我们的建议中记录了这种确切的反模式，以确保可以从 HTML 源中发现 LCP 资源。

它还破坏了

fetchpriority="high"

属性的好处，该属性本来可以尽早开始加载图像源。然而，由于图像源是内联透明 SVG，浏览器无法尽早知道图像源，因此优化无法提供帮助。

就上下文而言，Chrome 过去将透明 SVG 渲染（而不是实际图像）的时间视为页面的 LCP 时间。然而，这是一个错误，因为真正的用户实际上无法看到 SVG，并且对他们来说，感觉页面加载明显较晚。因此，从 Chrome 112 开始，像这样的低熵图像已被忽略为 LCP 候选图像。您可能正在使用实现此过时反模式的旧版本插件，因此值得看看是否可以升级。 希望通过消除延迟加载行为，您的 LCP 图像可以更快地开始加载，并且您将更接近 2,500 毫秒的目标。