The Next.js Performance Checklist

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.