DEV Community

Ben Read
Ben Read

Posted on • Updated on

NextJS Performance Checklist

Building React applications with NextJS is a great way of getting things in front of customers quickly. But you might find that they aren't using your site because it's too slow. Here's a list of things you might be able to do to improve the performance of your NextJS application.

I've geared this towards NextJS for a few specifics I wanted to include, but this list can be applied more generally too.

Applications

Images

Styles

Fonts

Scripts

Data

  • Only fetch data you need (consider using GraphQL)
  • No API chaining (consider using GraphQL)
  • Minimise data normalisation (offload to a standalone function or backend)

Third-party scripts

Perceived performance

Testing and analysis

  • PRs that degrade performance are identified in the pipeline
  • Frontend performance is measured (https://speedcurve.com/ )
  • Frontend performance is regularly analysed
  • Analysis is turned into actionable backlog items

There are two benefits to implementing as many of these as you can: conversions will likely improve because more users can use your app. And also you will save your own costs: less downloads, less bandwith and where you can cache from origin, you'll save on infrastructure costs.

I'm sure this list isn't quite complete, let me know if there's anything I've missed!

Discussion (3)

Collapse
talr98 profile image
TalR98

It seems as this is more about front-end performance. Cannot figure out how this post is either about nextjs, or more specifically react.js

Collapse
endymion1818 profile image
Ben Read Author

I've geared this towards NextJS for a few specifics I wanted to include, but this list can be applied more generally too.

Collapse
danielballardp profile image
Daniel Pfanzagl

The title is indeed misleading as these tips/advices are about frontend performance in general, nothing specific about NextJs or ReactJs itself. Still a nice compilation of performance improvement options.