The Next.js Performance Checklist

A practical checklist covering every performance lever available in modern Next.js — from Server Components and image optimization to Core Web Vitals and edge caching.

Why Performance is a Product Feature

Every 100ms of load time costs conversions. This checklist distills our internal standards for shipping fast Next.js applications.

Server Components First

Move as much rendering to the server as possible. Zero client bundle cost for data-fetching components.

Image Optimization

Always use next/image — never raw <img> tags
Set explicit width and height to prevent layout shift
Use priority on above-the-fold images
Prefer WebP and AVIF formats

Core Web Vitals

LCP: Preload hero images, use SSG where possible
CLS: Reserve space for dynamic content
INP: Defer heavy JS, use useTransition for UI updates

Caching Strategy

Static pages: force-static + ISR with revalidate
Dynamic pages: cache: 'no-store' only when truly necessary
API routes: Set explicit cache headers

Ship fast. Your users will thank you, and so will Google.