Next.js：优化 LCP 时间/速度答案

【问题标题】：Next.js: Optimize LCP time/speedNext.js：优化 LCP 时间/速度
【发布时间】：2021-11-03 09:06:19
【问题描述】：

我有一个 next.js 项目（版本 11.1.2），我想优化页面速度。我正在使用 google PageSpeed Insight 进行测量。目前，分数约为：

移动设备为 40-50 (!!)
80-90 用于桌面。

一些背景：
对于我需要优化的页面，我使用静态站点生成和增量静态生成。最重要的页面是在构建时构建的，而“不太重要”的页面则是根据需要构建的。这些页面基于数据 - 我使用的是 Heroku 上托管的 Postgres。

到目前为止我做了什么：
在 Google PageSpeed Insight 中，我可以看到 LCP 真的很慢（6-7 秒）。我认为这是问题所在。我已经完成了以下操作：

我已经优化了图像。每页只有一张图片 (img)，这是一个预加载的 PNG（首屏）。我没有使用原生的 next/image-component，因为图像的大小不同。对于其他图像，我使用的是 next/image-component。
在 Google PageSpeed Insight 中，我看到消息“删除未使用的 JS”（在 2 个 next.js 文件中：“/chunks/...”和生成的页面中）。所以我：

使用 next/bundle-analyzer 检查了所有内容。在客户端，有一个很大的库。所以我尝试了另一种更轻量级的。不幸的是，它并没有提高任何速度。
我正在使用 next/dynamic-imports - 我不确定这是否真的很聪明。由于我使用的是静态网站生成：额外的请求是否有可能减慢一切？

现在，我不确定我做的一切是否正确？还有什么我可以改进的吗？任何建议表示赞赏！谢谢！

编辑这是我与首屏图片预加载相关的代码：

export function SingleItem({ item }){
// some logic

return(
 <>
  <Head>
    <link
       rel="preload"
       as="image"
       href={`/assets/pics/${item.name}.png`} />
   </Head>
   
   <div className={styles.image}>
     <ItemImage
       src={`/assets/pics/${item.name)}.png`}
       fallbackSrc="/assets/pic-coming-soon.jpg"
       alt="{`${item.name}`}" />
   </div>
   
   //more code
 </>
)}

我在 pages/item.js（即 SSG/ISG）中使用 SingleItem 组件。我不确定是否可以在组件中使用 Head-Tags？

这里是 ItemImage 组件：

const ItemImage = (props) => {
  const { src, fallbackSrc, ...rest } = props;
  const [imgSrc, setImgSrc] = useState(src);
  const isSmallScreen = useMediaQuery("(max-width:780px)");

  return (
   <img
      {...rest}
      src={imgSrc}
      onError={() => {
        setImgSrc(fallbackSrc);
      }}
      className={`${isSmallScreen ? styles.smallImg : styles.bigImg}`}
    /> 
  );
};

//css:
//.bigImg {width: 100%; height: 100%}
//.smallImg {width: 70%; height: 70%}

【问题讨论】：

我已经添加了代码。这有帮助吗？
预加载似乎没问题 - 你能告诉我们ItemImage组件的代码吗？
好的。我已经添加了代码。感谢您尝试帮助我！

标签： javascript performance next.js

【解决方案1】：

也许，只是一个建议。尝试为图像实现延迟加载，因为它们可能是最密集的加载。

【讨论】：

感谢您的建议。 Next/image 默认会延迟加载。我在 PNG 中使用的一张图片在首屏，所以我认为预加载可以提高速度？！
您可以尝试提高您可能使用的任何 cdn 的性能。
我检查了这个。我也将 next.js 用于后端（无服务器）。在文档中，我可以看到 CDN 的所有内容都已设置和优化。