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

问题是图像组件的默认行为是 lazy loading. You can change this behavior to eager，方法是添加 loading 属性，如下所示：loading="eager" 或添加 priority={true}。

recommended way 正在使用 priority。

关于图片格式。 Webp is smaller than png，所以加载速度会更快。

Answer 2

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

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

The next/image component's default loader uses the 'squoosh' library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running

yarn add sharp

in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp

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

Answer 3

升级你的 next 高于 11.0.2-canary.20
yarn add sharp
啤酒

https://github.com/vercel/next.js/issues/23637#issuecomment-885631610

https://nextjs.org/blog/next-11-1#image-optimization

Next/Image的组件显示太慢

Next/Image's components are too slow to appear

next.js

nextjs-image