Skip the micro-optimizations. These are the high-impact performance improvements for real Next.js applications.
Focus on What Moves the Needle
Most performance advice is noise. A 2ms improvement in bundle parsing does not matter if your page loads 3 seconds of unoptimized images. Here are the changes that actually impact user experience.
1. Use the Image Component
Next.js Image component handles lazy loading, responsive sizing, and modern formats (WebP/AVIF) automatically. Switching from raw
2. Static Generation Where Possible
If a page does not change on every request, generate it at build time. Blog posts, documentation, landing pages — all should be statically generated. The response time goes from hundreds of milliseconds to single digits.
3. Dynamic Imports for Heavy Components
Code-split large components that are not needed on initial render:
const Chart = dynamic(() => import('./Chart'), { ssr: false })
Maps, charts, editors — anything heavy should load on demand.
4. Optimize Third-Party Scripts
Analytics, chat widgets, and tracking pixels often add 200-500KB of JavaScript. Use next/script with strategy="lazyOnload" for non-essential scripts. Better yet, audit whether you actually need them all.
5. Streaming with Suspense
Wrap slow data-fetching components in Suspense boundaries. The rest of the page renders immediately while slow sections stream in. Users see content faster.
6. Reduce Layout Shifts
Set explicit width and height on images and videos. Use CSS aspect-ratio for responsive containers. Every layout shift hurts CLS score and makes the page feel janky.
7. Cache API Responses
Use fetch with next.revalidate to cache external API calls. If your product data changes hourly, there is no reason to fetch it on every request.
What Does Not Matter
- Shaving 5KB off your bundle (unless it is a per-route issue)
- Micro-optimizing React re-renders without measuring first
- Using
React.memoeverywhere "just in case" - Obsessing over Lighthouse scores without checking real user metrics