我们正在使用带有静态站点生成器的 NextJS 9.3.2 框架，即 SSG，并引入了 Google Lighthouse 6 Largest Contentful Paint (LCP)，这正在影响我的站点性能得分。大多数网站在首屏内容中都有英雄图片。
所以我希望预加载图像以减少 LCP 的时间。你们能指导一下我如何使用 SSG 在 NextJS 中预加载大英雄图像吗？
正如 HawaiiFi 建议，您可以预加载图像。
在 Next.js 中，您可以通过向 next.js 的
<link rel="preload" ...><Head>import Head from "next/head";
// Inside one of the components that loads on your page:
<Head>
<link
rel="preload"
href="/path/to/image.ext"
as="image"
/>
</Head>
您应该升级您的Next.js并使用图像组件。 它将做以下伟大的事情 -
实施它，看看灯塔得分的大幅上升。
虽然它有一些限制，例如静态导出和占位符图像当前不可用，但它仍然很好用。 对于占位符图像，您可以使用一些额外的库，例如 https://github.com/joe-bell/plaiceholder
在包含需要预加载的英雄图像的组件中，使用 next/head 并简单地预加载该图像。
我不会使用下一个/图像。它比其他动态服务器图像大小的解决方案慢。
那是另一回事了。您应该使用内置 HTML 功能根据浏览器大小加载图像。