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

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

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

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

一些问题:

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

回答

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

在推荐的方法是使用priority

  • I think they've gone backward in some sections and specially performance.
  • That isn't the problem. The problem is how long it takes Next to serve the image on demand. They would have been much better off offering a static generation option for each defined image/screen size at build time and referencing the static file. Then just serve with NGINX - no need for Node.

以上是Next/Image的组件显示速度太慢的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>