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

【问题标题】：How to improve the LCP score of my Nuxt site?如何提高我的 Nuxt 站点的 LCP 分数？
【发布时间】：2021-07-22 19:23:32
【问题描述】：

我一直在努力降低 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="">

4s以下，甚至2s以下的LCP怎么拿？

【问题讨论】：

该链接给出了 522 网关错误，因此我可能会先查看该错误，因为如果它没有失败，它可能会减慢整个页面的速度。
谢谢@graham。不过，我在控制台中没有发现任何错误。我打开链接时得到的唯一输出是：ScenePage mount ...
在运行性能跟踪后（我仍然遇到问题，第一次访问时页面需要永远加载，仅供参考，以便您查看）主图像需要一秒钟才能加载。其中大部分是等待（第一个字节的时间）。这要么是地理原因（我在英国，所以往返时间可能很长）或者访问图像有一些延迟 - 请求图像时是否进行了一些处理或者它是静态图像？也许看看你的 DNS 设置等，看看你的 cloudflare 是否配置正确。您可以运行性能跟踪并发布指向它的链接吗？
@graham，将性能报告的链接添加到问题中。（感谢@kissu）
抱歉，性能跟踪 - 在开发人员工具中，它位于性能选项卡下。您打开您的网页，打开开发人员工具，然后单击左上角的第二个图标（看起来像一个刷新图标），或按 CTRL + SHIFT + E。运行它后，您可以通过右键单击来保存它。它们的文件将非常大，因此您可能需要将其压缩并上传到您控制的服务器并共享 URL。

标签： image nuxt.js lighthouse core-web-vitals

【解决方案1】：

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

不确定 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 性能最完整的文章，有很多资源和链接可以实现有史以来最快的 webapp，请认真阅读：https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

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

【讨论】：

谢谢@kissu。压缩图像对我来说并不容易，因为我们的 api 堆栈（nginx>express）为我们的网站和我们的移动应用程序提供图像。目前更新 api 对我们来说并不容易，因为我们还需要调整我们的应用程序。并感谢您提到的资源。我是网络性能的新手，我需要花更多时间在这方面。