Next.js Performance Checklist: 28 Essential Steps

Server Components send zero JavaScript to the browser. Only add 'use client' for components that need interactivity (onClick, useState, useEffect). Moving a component from client to server can reduce its JavaScript cost to zero bytes.

Use `generateStaticParams` to pre-render pages at build time. Static pages are served from CDN cache with near-zero TTFB. Even pages with periodic updates should use ISR with `revalidate` rather than full server rendering.

Use PPR (Next.js 14+) to statically render the shell of a page while streaming dynamic parts. Wrap dynamic content in `<Suspense>` boundaries. This gives CDN-speed initial loads with real-time data where needed.

Wrap slow data-fetching components in `<Suspense>` with meaningful fallback UIs. This lets Next.js stream the page shell immediately while expensive database queries or API calls complete, dramatically improving perceived load time.

Use `Promise.all()` for data fetches that don't depend on each other. Sequential fetches in a Server Component create a waterfall — three 200ms fetches in sequence take 600ms, but in parallel only 200ms.

Check your build output for pages marked as 'dynamic'. Functions like `cookies()`, `headers()`, and unscoped `searchParams` force dynamic rendering. Move these calls to the smallest possible component wrapped in Suspense.

Add `@next/bundle-analyzer` to your project and run `ANALYZE=true next build`. Look for dependencies over 50KB, duplicate packages, and code that should be lazy-loaded. This visual treemap reveals optimization opportunities invisible in code.

Use `next/dynamic` for components like charts (recharts: 200KB+), code editors (Monaco: 5MB+), maps (Leaflet: 140KB+), and rich text editors. Add `{ loading: () => <Skeleton /> }` to show placeholder UI during load.

Swap moment.js (300KB) for date-fns (tree-shakeable) or dayjs (2KB). Replace lodash (72KB) with individual lodash-es imports. Use bundlephobia.com to compare package sizes before adding new dependencies.

Use named imports (`import { Button } from 'ui-lib'`) instead of default imports of entire modules. Verify your dependencies support ES modules. Add `sideEffects: false` to your package.json if your code has no import side effects.

Run `npx depcheck` to find unused packages in your project. Remove them from package.json. Unused dependencies still affect install time, and some may contribute dead code if they are imported indirectly.

The `next/image` component automatically resizes, converts to WebP/AVIF, and lazy-loads images. Set `sizes` prop to match your layout breakpoints so the browser downloads only the size it needs.

Add `priority` to your hero image and any images visible without scrolling. This disables lazy loading and adds a preload hint, ensuring these images load as fast as possible. Only use on 1-2 images per page.

Use `next/font/google` or `next/font/local` to self-host fonts. This eliminates the render-blocking request to Google Fonts, adds automatic font subsetting, and applies `font-display: swap` for zero layout shift.

Run SVGs through SVGO to remove unnecessary metadata and reduce file size by 20-60%. For icons, consider using an SVG sprite or an icon library like Lucide that tree-shakes unused icons.

Add trusted image domains to `images.remotePatterns` in next.config.js. For CMS-hosted images, consider using a dedicated image CDN like Cloudinary or imgix that handles format conversion and resizing at the edge.

Use `{ cache: 'force-cache' }` for rarely-changing data and `{ next: { revalidate: 3600 } }` for hourly updates. Avoid `{ cache: 'no-store' }` unless data must be real-time — it bypasses all caching layers.

Tag your fetch requests with `{ next: { tags: ['products'] } }` and call `revalidateTag('products')` from a webhook when CMS content updates. This gives you instant content updates without sacrificing cache performance.

Wrap data-fetching functions with React's `cache()` to deduplicate identical requests within a single render pass. If three components need the same user data, the database query runs only once.

Next.js automatically adds immutable cache headers to hashed static assets. For custom API routes returning cacheable data, manually set `Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400` headers.

Use `unstable_cache` (or the stable version when available) to cache ORM/database query results in the Next.js data cache. Tag cached queries for on-demand revalidation when the underlying data changes.

Use the `web-vitals` library or Vercel Speed Insights to collect real-user LCP, INP, and CLS data. Lab tests alone miss device-specific and network-specific performance issues that real users experience.

Audit click and input handlers for long-running synchronous work. Use `useTransition` for non-urgent updates, `useDeferredValue` for expensive re-renders, and `requestIdleCallback` for background work. Target INP under 200ms.

Reserve space for images with `width`/`height` props, ads with min-height CSS, and skeleton loaders that match final content dimensions. Use `transform` animations instead of properties that trigger layout recalculation.

Load analytics, chat widgets, A/B testing, and social embeds with `next/script strategy='lazyOnload'`. This delays their execution until after the page is fully interactive, keeping your main thread free for user interactions.

Profile with React DevTools Profiler before memoizing. Wrap expensive list renders and complex calculations with `useMemo`. Use `React.memo` for components that re-render with the same props. Avoid premature optimization — memoization has its own cost.

Use `@tanstack/react-virtual` or `react-window` for lists with 100+ items. Virtualization renders only visible items, reducing DOM nodes from thousands to dozens and keeping scroll performance smooth.

Use Lighthouse CI or bundlewatch to enforce performance budgets on every PR. Set thresholds for JavaScript bundle size (e.g., max 250KB gzipped), Lighthouse performance score (e.g., min 90), and LCP (e.g., max 2.5s).