LCP spent too long time

[nuanyang233]

I was recently build my site with nextjs and when I deployed it in vercel and tested it with pageSpeed, I found that the LCP was very high.

So I tested nextjs.org with pageSpeed and found that the LCP was just as high in the lab.

Can anyone tell me what could be the cause of this result? Is it a problem with nextjs? Or is it a Google PageSpeed problem?

[awareness481]

Keep in mind that a single test isn't enough to determine the exact score, as the score can vary from to test to test. You should also make sure to run the tests in Incognito mode, so that no extensions hurt your score. Extensions like React Dev Tools, Web Vitals, etc will hurt your score because Lighthouse thinks the script files come from your website.

Here's the results from the Lighthouse audit I ran just now:

Edit: The Image elements do not have explicit width and height is a bug of Lighthouse when using the next/image component. See: GoogleChrome/lighthouse#11631

Edit 2: The above were for desktop, here are for mobile.

Not perfect but I'm sure there's room for improvement. You can certainly get perfect score using Next.js, I'd look into the warnings Lighthouse gives you and try to identify the issues.

[svassaux]

that's just not good. if the content is served from the server, we can't be happy with an ok score, we should have a 100 score and a good rehydration or script loading

[svassaux]

I have the same issue as you and I'm trying hard to find solutions

There is a huge problem with rehydration and the way scripts are loaded by nextjs
It's known but not acknowledged by everybody: https://twitter.com/devongovett/status/1222953658049974272

Here are my issues with some response on how to improve your perf:
#20454
#20700

[Confuze]

It looks like lighthouse's simulated throttling may be exaggerating the LCP.

Here's my result with simulated throttling:

And here it is with devtools throttling:

Both test were done on the mobile option so the difference is pretty big.