在NextJS中预加载图像

Question

我们使用的是带有静态站点生成器的NextJS 9.3.2框架，即引入了谷歌灯塔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

在包含需要预加载的英雄图像的组件中，使用next/head并简单地预加载该图像。

我不会使用next/image。它比其他动态调整服务器映像大小的解决方案要慢。

这是另一回事。你应该使用内置的超文本标记语言( load images based on the browser size )功能。