I have been struggling to reduce the LCP score of a few page types in my Nuxt app. The LCP score given by Google Search Console is currently 5.9s, and lighthouse gives me 7.5s (both above 4s, and thus red). You can find a sample of such a page.
Here is a link to the page's performance report.
The "Largest Contentful Element", according to my chrome lighthouse, is the large image. I have provided srcset for the image (two sizes). The image is an html img tag and not a v-img (I use Vuetify as my component library). Therefore, I assume, the order of loading the Nuxt JS chunks should have no effect on the img load time (I have defered loading the JS chunks, and I am using SSR). Here is my img element:
<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="">
How can I take the LCP below 4s, and even 2s?
Web performance is a huge topic and there are a lot of thing that can help you there.
Not sure about Google Search Console but you should not really use Lighthouse locally because it is depending of your local machine.
https://web.dev/measure/ is a good place to start debugging what is wrong.
Here is the report for the page you've linked.
You should start by reading a few articles and deep dive a bit further into image optimizations. Because, saying that your images are loading slowly because of a specific reason cannot be done like this.
A quick answer would be to look from which place you do load those images (CDN?), their compression, their format, their size, subsampling and so on...
This is a starting point: https://web.dev/optimize-lcp/
This article is from today and written by the excellent Addy Osmani, he is tackling a lot of things about images, give it a look: https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
And here is the bible in which you will find even more info. I'd say that this is the most complete article ever on web performance, with a lot of resources and link to achieve the fastest webapp ever, give it a conscientious read: https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
I'd say that the fastest way to get nice performance is just to use Cloudinary and let them handle all the heavy lifting for you: https://cloudinary.nuxtjs.org/