Next.js app takes 33 seconds to load. What could make it THAT slow?

Question

I'm almost done with my first ever Next.js app.

Dev was always somewhat slow to load, but production is absolutely ridiculous.

On first load it takes 30+ seconds for the home page to render.

I've seen really slow sites take 5-10 seconds, but what could I possibly be doing wrong that would lead to 30 second load times?

Is prefetch a huge performance killer?

Answer 1

Finding the bottleneck:

First of all you need to find out what is making your site slow. For that I recommend lighthouse or the network tab of your development tools.

Common developer mistakes:

A. Development instead production mode:

Next.js has two modes. The development mode (next dev) is pretty slow, since a lot of development tools are executed and shipped.

To run your app in production mode first build it with next build and then start it with next start.

B. Included too much code:

Sometimes developers include gigantic npm modules or even modules that only have been build for node.js into next.js.

Finding these modules is actually pretty easy thanks to these examples:

• https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-analyzer
• https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-size-analyzer

C. Cold Serverless instance:

If you are running your next.js instance on a serverless provider keep in mind that it may take some time to start the serverless instance. Especially if you have a free plan.