Next/Image 的组件显示速度太慢

Question

我正在使用 Next.js 10.0.7 和 next-images 1.7，大图像需要几秒钟才能出现。

我正确使用了这些组件，您可以在下面看到，但我认为我的问题有一个解决方案。

<Image
   height="600"
   width="800"
   src={
     'https://myImageURL.png'
   }
   alt="my image"
/>

一些问题：

• 如果我将所有图像转换为 .webp 图像显示速度会更快吗？
• 这个问题有解决方案吗？

Answer 1

我一直遇到同样的问题，主要是在滑块组件中。基本上，由于图像在滑块将其移入视图之前一直处于屏幕外，因此存在延迟并且短时间内不会显示，这看起来很糟糕。

解决办法： 添加sharp包。问题来自 NextJS 使用的默认图像处理器。我不知道这对OP是否有好处，但就我而言，我没有完全阅读文档。有一个提示指出：

next/image 组件的默认加载器使用“squoosh”库来调整图像大小和优化。该库安装速度快，适合开发服务器环境。对于生产环境，强烈建议您通过运行来安装可选的 Sharp 库

yarn add sharp

在你的项目目录中。如果已经安装了 Sharp 但无法解析，您可以通过 NEXT_SHARP_PATH 环境变量手动传递路径，例如 NEXT_SHARP_PATH=/tmp/node_modules/sharp

添加后sharp，我的图像处理速度更快，并且不再有明显的延迟。我会尝试在添加到每个图像之前添加它priority={true}，因为这会影响网站性能。

Answer 2

您的问题是图像组件的默认行为是延迟加载。您可以通过添加这样的道具来将此行为更改为热切loading：loading="eager"或添加priority={true}.

在推荐的方法是使用priority。