如何异步加载图像到 JavaScript 执行（Splide）？仅修复移动设备上的 LCP 问题

Question

我的页面顶部有一个图像轮播（幻灯片）。 我发现我的 LCP 分数因此非常差，仅在移动设备上，而在桌面设备上得分很高。问题似乎是

Load Delay

部分，这意味着：

第一个字节的时间 (TTFB) - 从用户开始加载页面到浏览器收到 HTML 文档响应的第一个字节的时间。了解有关 TTFB 的更多信息。

加载延迟 - TTFB 与浏览器开始加载 LCP 资源时之间的增量。

我怀疑的一件事是，首先执行初始化和渲染轮播的 Javascript，然后才开始下载图像。

有没有办法以异步方式下载它们？使用下一步 12.3.4 另外，如果有任何其他方法来处理我面临的 LCP 问题，我将很乐意尝试。

Answer 1

在Next.js中，next/image组件有一些配置来优化图像加载：

优先加载： 要优先加载特定图像，您可以使用 next/image 组件中的priority 属性。这允许您指示哪些图像是关键的并且应该首先加载，从而提高性能：

例如：

{images.map((image, index) => (
  <SplideSlide key={index}>
    <Image
      src={image.src}
      alt={image.alt}
      layout="responsive"
      width={700}
      height={475}
      priority={index === 0} // Set priority for the first image
    />
  </SplideSlide>
))}

否则你可以使用loading =“lazy”来阻止初始加载图像以降低LCP分数

例如：

 <Image
  src="/path/to/image.jpg"
  alt="Description of the image"
  width={500}
  height={300}
  loading="lazy" // Enable lazy loading
/>