Performance Optimization

Core Web Vitals

Core Web Vitals are the metrics Google uses to measure real-world user experience, and they also factor into search ranking — making them a useful, concrete target for performance work.

Analyzing Your Bundle

@next/bundle-analyzer visualizes exactly what's inside your production JavaScript bundle, making it easy to spot an unexpectedly large dependency.

npm install --save-dev @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

ANALYZE=true npm run build

Dynamic Imports

For a heavy component that isn't needed immediately — a rich text editor, a chart library — next/dynamic loads it separately, only when it's actually rendered.

import dynamic from 'next/dynamic';

const RichTextEditor = dynamic(() => import('./RichTextEditor'), {
  loading: () => <p>Loading editor…</p>,
  ssr: false, // skip server rendering for browser-only libraries
});

Streaming and Suspense, Revisited

As covered in the loading UI lesson, wrapping slow, non-critical parts of a page in <Suspense> lets the fast parts render immediately — directly improving perceived LCP, since visitors see meaningful content sooner.

A Performance Checklist

FAQs

Summary

Between Next.js's built-in optimizations and deliberate techniques like dynamic imports and parallel fetching, most performance problems have a clear, known fix. Next, you'll deploy a finished app to production.