10 Next.js Performance Patterns We Use on Every Project

Core Web Vitals have become a real ranking factor and a genuine proxy for user experience quality. Here are the patterns we apply on every Next.js project to consistently hit green scores.

1. Partial Prerendering (PPR) Next.js 15 makes PPR production-ready. Use it to serve a static shell instantly while streaming dynamic content — the best of SSG and SSR in one response.

2. Route-Level Code Splitting with Dynamic Imports Heavy components (charts, editors, 3D canvases) should always be dynamically imported with a Suspense boundary. Never import Three.js in the initial bundle.

3. Image Optimisation with next/image Always set explicit width/height, use priority for above-the-fold images, and configure remote patterns early. The WebP/AVIF auto-conversion alone can cut image bytes by 40%.

4. Font Subsetting Use next/font with subset specified. Loading a full typeface for an English-only site is wasteful — subsetting cuts font size by 60-70%.

5. React Server Components by Default Keep client components at the leaf level. Every unnecessary "use client" directive moves rendering to the browser and inflates your JS bundle.

6. Streaming with Suspense Wrap slow data-fetching components in Suspense boundaries with meaningful skeletons. Time To First Byte improves dramatically when the shell renders before data resolves.

7. Edge Runtime for Latency-Sensitive Routes Middleware and API routes that do auth checks or redirects should run on the edge — response times drop from ~200ms to ~20ms globally.

8. Bundle Analysis Run @next/bundle-analyzer before every release. It takes five minutes to catch a dependency that doubled your bundle.

9. Cache-Control Headers Configure proper s-maxage and stale-while-revalidate for static assets and API responses. CDN caching is the highest ROI performance investment.

10. Prefetching Strategy Use Link prefetch={false} for low-probability navigations and enable it explicitly for high-probability ones. Default eager prefetching on large nav menus kills bandwidth.