How to improve the LCP score of my Nuxt site?

Question

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?

Envelop

the link gives a 522 gateway error so I would probably have a look into that one first as it may be slowing your whole page down when it isn't failing. – Rodi

Thank you @graham. I did not find any error in my console, though. the only output i get on opening the link is : ScenePage mounted ... – Envelop

After running a performance trace (I still had issues with the page taking forever to load on first visit FYI just so you can look into that) the main image is taking over a second to load. Most of this is waiting (Time To First Byte). This is either geography (I am in the UK so round trip time could be high) or there is some delay in accessing the image - is there some processing done when the image is requested or is it a static image? Perhaps have a look at your DNS settings etc. and see if your cloudflare is configured correctly. Can you run a performance trace and post a link to it? – Rodi

@graham, added the link to the performance report to the question. (thanks to @kissu) – Envelop

No sorry a performance trace - in developer tools it is under the performance tab. You open your web page, open developer tools, then click the second icon in at the top left (looks like a refresh icon), or press CTRL + SHIFT + E. When you have run it you can save it by right clicking. Them file will be quite large so you may have to zip it and upload it to a server you control and share the URL. – Rodi

Oh and make sure you have "screenshots" and "web vitals" checked at the top of the page, you dont need "memory", Then below that you should see "Enable advanced paint instrumentation (slow)" - you might as well uncheck that if it is checked as we are only after LCP info at this stage not CLS. – Rodi

Any updates on the performance trace? – Envelop

Sorry it is a bank holiday here in the UK so my computer is off so I can enjoy the weekend. I will do my best to have a look Tuesday evening for you as I can't do it from my phone 😋. – Rodi

Hi, did my answer helped somehow ? – Bacchic

Your answer is already upvoted. Still waiting for a more specific answer. – Envelop

Answer 1

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/

Bacchic

Thank you @kissu. Compressing images will not be easy for me, since our api stack (nginx>express) serves images to our site AND our mobile app. Updating the api is not very easy for us at the moment, because we will need to adjust our app as well. And thank you for the resources you mentioned. I am new to web performance and I need to spend more time on it. – Envelop