如何提高我的 Nuxt 站点的 LCP 分数？

如何解决如何提高我的 Nuxt 站点的 LCP 分数？

我一直在努力降低 Nuxt 应用中几种页面类型的 LCP 分数。 Google Search Console 给出的 LCP 分数目前是 5.9s，而 lighthouse 给我的是 7.5s（都在 4s 以上，因此是红色的）。您可以找到此类 page 的示例。

这是页面 performance report 的链接。

根据我的 chrome 灯塔，“最大的内容元素”是大图像。我已经为图像提供了 srcset（两种尺寸）。该图像是一个 html img 标记而不是 v-img（我使用 Vuetify 作为我的组件库）。因此，我假设，加载 Nuxt JS 块的顺序应该对 img 加载时间没有影响（我推迟加载 JS 块，并且我正在使用 SSR）。这是我的 img 元素：

<img src="https://www.sekonj.design/static/scenes/lowres/47cae5395250790de484389141b07433.jpg" srcset="https://www.sekonj.design/static/scenes/47cae5395250790de484389141b07433.jpg 1920w,https://www.sekonj.design/static/scenes/lowres/47cae5395250790de484389141b07433.jpg 670w" sizes="(max-width: 700px) 670px,1920px" style="width: 100%; height: auto; display: block;" data-v-567ccede="">

怎样才能把 LCP 降到 4s 甚至 2s 以下？

解决方法

网络性能是一个巨大的话题，有很多东西可以帮助您。

不确定 Google Search Console，但您不应该真正在本地使用 Lighthouse，因为它取决于您的本地机器。
https://web.dev/measure/ 是开始调试错误的好地方。

Here 是您链接的页面的报告。

您应该先阅读几篇文章，然后深入了解图像优化。因为，说您的图片由于特定原因加载缓慢不能这样做。

一个快速的答案是查看您从哪个位置加载这些图像（CDN？）、它们的压缩、它们的格式、它们的大小、子采样等等......

---

这是一个起点：https://web.dev/optimize-lcp/

这篇文章来自今天，由优秀的 Addy Osmani 撰写，他正在处理很多关于图像的事情，看看：https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

这是圣经，您可以在其中找到更多信息。我想说这是有史以来关于 Web 性能的最完整的文章，提供了大量资源和链接以实现有史以来最快的 Web 应用程序，请认真阅读：https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

---

我想说，获得良好性能的最快方法就是使用 Cloudinary，让它们为您处理所有繁重的工作：https://cloudinary.nuxtjs.org/