Next.js Performance: A Checklist for Shipping Fast Web Apps
Next.js gives you the tools for a fast app β but you have to use them right. A performance checklist for teams shipping production Next.js apps.
Next.js gives you all the tools to ship a fast app. The defaults are great. Used together, they are excellent. Used badly, they leave performance on the table.
Choosing between SSR, SSG, and ISR (and when)
SSG for pages that rarely change β marketing, docs. ISR when content changes but does not need to be instant. SSR for personalised or auth-gated views. Each has cost trade-offs β pick deliberately.
Image optimization done right
Use next/image with explicit width/height to avoid CLS. Pick AVIF/WebP. Configure remote loaders carefully. Reserve space for above-the-fold images.
Lazy loading components with dynamic imports
Heavy components β charts, editors, modals β should be dynamically imported. Use loading skeletons instead of spinners. Defer scripts that are not needed at first paint.
Bundle size analysis and reduction
Use the built-in bundle analyzer. Watch for accidentally importing entire libraries (lodash, date-fns). Split code along route boundaries.
Core Web Vitals: what to measure and how
Field data over lab data. RUM tools (Vercel Analytics, web-vitals to your endpoint) give the truth. Lab tools tell you what changed.
Caching strategies at the CDN and application layer
Cache static assets at the edge. Cache API responses where staleness is acceptable. Use ISR for heavy pages. Make cache headers explicit β never let Vercel guess.