问题描述
我一直在努力降低Nuxt应用程序中几个页面类型的LCP分数。谷歌搜索控制台给出的LCP得分目前是5.9分，灯塔给了我7.5分(都在4分以上，因此是红色的)。您可以找到这样一个page的示例。
这里是指向该页的performance report的链接。
根据我的铬灯塔，最大的令人满意的元素是大图像。我已经为图像提供了源集(两个大小)。该图像是htmlimg标记，而不是v-img(我使用Vutify作为我的组件库)。因此，我假设加载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不太确定，但您不应该真正在本地使用LighTower，因为它取决于您的本地计算机。
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/
这篇关于如何提高我的Nuxt站点的LCP分数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！