Next js initial page loading time is too slow compared to subsequent page loads

Question

I have build a App using nextjs and deployed it on server, I have observed that initial page loading take 4 sec to load and all subsequent page loads takes fews ms to load , if next generates the static html page and serves it then why does it take so long, correct me if I am wrong,

network process screenshot

https://public-sapient.vercel.app/

Answer 1

UPDATE:

You are running too many asset requests in parallel. I suspect your asset host is throttling your requests because we see some slowdown every X request.

Only request the assets that are in view using an IntersectionObserver solution.

======

Network cost is actually all the operations that need to be completed by a site and it's not always the best marker for performance.

For example, lets say that I have a total network cost of 4ms. Even though one of the scripts takes a long time to complete (which affects total network time), my web core vitals are good and actually my First Contentful Paint (FCP) is short so users get to see a working site quickly.

Web Core Vitals are better metrics https://web.dev/vitals/

Ran a Performance Audit in Chrome Dev Tools and couldn't find any obvious issues. There are a few large tasks and a big layout shift, but nothing that could visibly cause that delay.