• Waleed AmjadWaleed Amjad
  • Date:  
  • Reading time:  1 min
  • Web Development

A Practical Performance Checklist for Next.js Sites

A Practical Performance Checklist for Next.js Sites
Why performance is a feature

Users abandon slow sites, and Google ranks them lower. The good news: Next.js gives you most of the tooling you need — you just have to use it deliberately.

Here is the checklist I run through before every launch:

Rendering strategy

  • Use static generation (getStaticProps) for any page whose content does not change per-request. It is the single biggest win available.
  • Add Incremental Static Regeneration for content that updates occasionally — blogs, product listings, documentation.
  • Reserve server-side rendering for genuinely dynamic pages like dashboards.

Assets

  • Serve images through next/image or at minimum pre-size and compress them. Unoptimized images are the most common cause of poor LCP scores I see in audits.
  • Subset your fonts and preload the primary weight. A 400KB font file blocks text rendering on slow connections.
  • Audit your bundle with @next/bundle-analyzer. Heavy libraries like moment.js or lodash often sneak in through transitive dependencies.

Third-party scripts

  • Load analytics and ad scripts with next/script using the lazyOnload strategy.
  • Every third-party tag is a performance tax. Ask whether each one earns its place.
Measure before and after

Do not optimize blind. Run Lighthouse and PageSpeed Insights before you start, fix the biggest item, and measure again. Performance work follows the 80/20 rule aggressively — usually two or three changes deliver most of the improvement.

Similar publications

Stay up-to-date with my latest news by subscribing!