在NextJS中预加载图像

Question

我们正在将NextJS 9.3.2框架与静态网站生成器（即SSG）配合使用，并引入了Google Lighthouse 6最大的内容丰富涂料（LCP），这影响了我的网站性能得分。大多数网站的首屏内容上方都有英雄形象。

所以我想预加载图像以减少LCP的时间。你们可以指导我如何使用SSG在NextJS中预加载大英雄图像。

Answer 1

您应该升级Next.js并使用Image Component。 它将做以下伟大的事情-

1. 延迟加载
2. 新的Webp格式
3. 根据设备大小即时调整图像大小
4. 压缩图像
5. 在道具中将prirotiy设置为true，以将其预加载到折叠图像上方。

实施该程序以查看灯塔得分的大幅上升。

尽管它有一些限制，例如静态导出和占位符图像当前不可用，但使用起来还是不错的。 对于占位符图像，您可以使用一些额外的库，例如https://github.com/joe-bell/plaiceholder

Answer 2

https://nextjs.org/docs/api-reference/next/image

您可以结合使用加载器和优先加载选项，我建议在加载主图像时只使用一个非常小的默认图像，这样任何测试您的 LCP 的内容都会被它愚弄。