I have a Next.js platform. On refresh, it takes around 6 seconds to load the page. So I was debugging to find out where the delay was to know what I could do to improve it and discovered that there's around 5 seconds of idle time.

Basically, according to the Performance debug tool of Chrome and Firefox, there's a 5 second idle timeframe between loading everything and starting to render the first page.

I'm following all best practices to speed up the platform like memoizing components, dynamically loading components that don't need to be rendered until the user interacts with them, ...

Here's the pie chart from the chrome Performance tool that shows the idle time:

I wanted to find out where this happens, so I added some logs of the timestamp at each steps (_app.js, index.js, ...) and found that in between the first call of _app.js and the first call of index.js, lies the 5 seconds wait.

So I started removing components (wrappers like providers, ...) one by one to find out if one of them was the cause but none of them affected the idle time by more than 2ms while there's around 5000ms going somewhere.

My question is, is there anyway to find out what that idle time is or why the application is waiting this long to start rendering or does anyone have any idea of what I could try to speed it up?

Edit:

Here's a screenshot of the waterfall where the idle time shows: There's no request in between and no other request is waiting for a result. One ends, nothing for 5 seconds, then the rendering begins.