Nextjs Idle time

Question

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.

Answer 1

Finally found what was causing it. I'm using a PersistGate from redux-persist and apparently the default timeout is 5 seconds. Getting it down to 2 seconds actually changed the idle time to 2 seconds instead of 5.

This is not an optimal solution since there's a risk that the state is not ready after 2 seconds so I'm looking into different libraries currently but at least I know where the idle time is from.

In case someone else runs into this and the cause is PersistGate here's what worked for me:

const config = {
 key: "root",
 storage: localForage,
 timeout: 2000,
};

Other things I found during my research:

• Your browser might be failing to load a request (like a CSS file)
• You might have a huge bundle and your browser is trying to load everything