CODEWITHSUNDEEP
reactjsperformancenext.jsvercellighthouse
Thomstaal
Thomstaal

Reputation: 83

Why is my NextJS performace score so inconsistent in web.dev?

We are seeing very inconsistent performance scores in web.dev with our NextJS application. At first, we had around 30 performance so we started optimising. Now we are at around 90 with a margin of 5 locally in Lighthouse. However, when we are testing it on web.dev, our score variates from 73 to 99 which is a huge difference. What could be the cause of this? When you compare the two reports with exact the same bundle size, one of them has 670ms total blocking time and the other has 70ms. Also, de "Minimize main-thread work" and "Reduce Javascript execution time" differ a lot. "Minimize main-thread work" is 3.5s at the less performant run and 2.8s at the high performing run. "Reduce Javascript execution time" is 1.5s at the less performant run and is not present at all (so 0s i assume) on the performant run. Again, this is with exact the same JS and CSS bundle.

What could cause this drop in performance? Is this any kind of error in my code or is this just an issue in Lighthouse/web.dev? I am hosting on Vercel which serves my website trough a CDN and i am also using a CDN for serving images.

Any help will be appreciated.

Upvotes: 6

Views: 3651

Answers (1)

winwiz1
winwiz1

Reputation: 3174

Two factors jumped to my mind:

  1. CDN related
    Your CDN provider runs many datacenters around the globe. The request from any user including web.dev is routed to the nearest datacenter. Which may or may not have the requested resource in its cache. If it doesn't, then the resource (.html page or script bundle etc.) is requested from your server - this takes extra time and performance suffers.

    Once in cache, the resource remains there for some time. No CDN provider will keep it there forever so sooner or later it gets evicted from the cache. When this happens depends on things like CDN provider policy, the free or paid plan you are on, the HTTP headers set by your webserver, demand on the resource.

  2. Lighthouse related
    The report generated by web.dev has "CPU/Memory Power" setting at the bottom. It reflects the metrics of the hardware used by Lighthouse. This setting affects the performance results a lot. Cloud instance of Lighthouse at web.dev runs on a shared cloud VM and the setting reflects the current workload that varies from time to time.

P.S.

  1. Server related
    When the CDN requests a resource from a webserver, the performance could take a further hit in case the server suffers from cold starts.

Upvotes: 3

Related Questions