在 NextJS 中预加载图像

Question

在 NextJS 中预加载图像

我们使用 NextJS 9.3.2 框架和静态站点生成器（即 SSG），并引入 Google Lighthouse 6 Largest Contentful Paint (LCP)，这影响了我的站点性能得分。大多数网站在首屏内容中都有英雄图片。

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

Answer 1

sim*_*lmx 8

正如HawaiiFi 建议的那样，您可以预加载图像。

<link rel="preload" ...>在 Next.js 中，您可以通过向 next.js 的组件添加 a 来实现此目的<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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Gau*_*rav 5

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

懒加载
新的 Webp 格式
根据设备尺寸动态调整图像大小
压缩图像
在 props 中设置prirotiy true 来预加载首屏图像。

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

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

缺乏 SSG 支持/“下一个导出”使其在这种情况下无法使用 (7认同)
不幸的是，有一个糟糕的缓存策略还无法更改：https://github.com/vercel/next.js/issues/19914，所以在相当长的一段时间内你可能想坚持使用普通的 `<img >` (3认同)
澄清一下，使用“下一个导出”时，仅*默认加载器*不受支持 - 使用[云提供商或自定义加载器](https://nextjs.org/docs/basic-features/image-optimization#loader)仍然有效。从那时起，[图像优化缓存](https://nextjs.org/docs/basic-features/image-optimization#caching)也得到了改进，并且不应再成为不使用“next/image”的阻碍。 (2认同)

归档时间：	5 年，3 月前
查看次数：	38168 次
最近记录：	1 年，11 月前