Search code examples
performancenext.jsvercelpagespeed

Largest Contentful Paint very slow on mobile using Next.js

I have a website, https://www.paveinsight.com that I'm working on. The site is written using Next.js and hosted on Vercel and the home page is generated as a static page.

Running PageSpeed Insights, my LCP is slow, especially slow on mobile and I can't work out why. The images are optimised, sized according to the screen and hosted on Amazon CloudFront. Testing on my actual device, the page loads quickly and is slick. The webp image loaded on my Pixel 7 is 81KB, yet PageSpeed Insights says that LCP is 9.4s on mobile.

The simulated 4G connection speed is 1,638 kb/s, so I'd expect the download to take significantly less than 1 second. The breakdown of the time taken is below. What is likely to be causing the high TTFB, or the extreme load delay and render delay?

TTFB 6% 600ms
Load delay 53% 4,920ms
Load time 1% 80ms
Render delay 40% 3,750ms

enter image description here

Solution

  • A better way to see LCP loading is to use something like WebPageTest which will show the full waterfall:

    Waterfall of the site loading

    It results in a ~6.5 second LCP so a bit shorter than Lighthouse but Lighthouse does estimated throttling on quite a low spec machine both of which may contribute to the difference.

    This shows the LCP image (highlighted in green on line 55) is not fetched until all the JavaScript is downloaded AND the JavaScript is executed (particularly the bundles on lines 12 and 14). And this takes many seconds on this low-spec machine.

    You should look at Server-Side Rendering so that the image resource is delivered in the initial HTML and does not depend on all of the client-side JavaScript running first.

    And ideally reduce the JavaScript do it doesn't take multiple seconds to run on a low end machine!