Next/Image的组件显示速度太慢
我正在使用 Next.js 10.0.7 和 next-images 1.7,大图像需要几秒钟才能出现。
我正确使用了这些组件,您可以在下面看到,但我认为我的问题有一个解决方案。
<Image
height="600"
width="800"
src={
'https://myImageURL.png'
}
alt="my image"
/>
一些问题:
- 如果我将所有图像转换为 .webp 图像显示速度会更快吗?
- 这个问题有解决方案吗?
回答
您的问题是图像组件的默认行为是延迟加载。您可以通过添加这样的道具来将此行为更改为热切loading:loading="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.