Reactjs 在NextJS中预加载图像

我们使用的是带有静态站点生成器的NextJS 9.3.2框架，即引入Google Lighthouse 6的SSG最大的内容绘制（LCP）正在影响我的站点性能分数。大多数网站在上面的折叠内容中都有一个英雄形象

因此，我期待预加载图像，以减少LCP的时间。你们能指导我如何用SSG在NextJS中预加载大英雄形象吗。

你们应该升级并使用。 它将做以下几件大事-

惰性负载

新的Webp格式

根据设备大小动态调整图像大小

压缩图像

在道具中设置prirotiy true以在折叠图像上方预加载

实施它，可以看到灯塔得分的大幅上升

尽管它有一些限制，比如静态导出和占位符图像当前不可用，但它仍然非常适合使用。

---

对于占位符图像，您可以使用一些额外的库，如

，您可以签出并删除。如果您想对构建过程有更多的控制，我写了这篇文章，简要介绍了如何创建自己的LQIP（低质量图像占位符）在Next的帮助下，

getStaticProps

并通过

props

传递到页面组件。感谢回复，但我们的客户不同意将低质量的图像作为占位符放置，直到加载主图像，我们需要预渲染主英雄图像以减少LCP。主英雄意味着将其转换为内联base64？您的意思是说在构建期间使用sharp生成webp图像格式，因为站点是SSG，然后使用base64图像生成内联图像。如果我错了，请纠正我。我只是问你“预渲染主英雄图像”是什么意思？缺少SSG支持/

下一次导出

使得它在这个场景中无法使用。不幸的是，有一个糟糕的缓存策略还无法更改：，因此在相当长的一段时间内，你可能会坚持使用普通的