Performance is a feature. A 100ms improvement in load time translates directly to higher conversion rates and lower bounce rates. Here's how to systematically improve Next.js app performance.
Core Web Vitals First
Always start with measurement. Use the Chrome DevTools Lighthouse panel or Vercel Speed Insights to baseline your LCP, CLS, and INP.
1. Images
Use `next/image` for all images. It automatically: - Serves WebP/AVIF formats - Lazy loads off-screen images - Prevents layout shift via reserved dimensions
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority /> ```
2. Bundle Size
Audit your bundle with `@next/bundle-analyzer`. Common wins: - Replace heavy dependencies with lighter alternatives (e.g., `date-fns` instead of `moment`) - Dynamic import large components with `next/dynamic` - Use tree-shakeable imports
3. Caching Strategy
- Use `"use cache"` for expensive data fetches
- Set appropriate `Cache-Control` headers on API routes
- Use `revalidatePath` and `revalidateTag` for targeted invalidation
4. Fonts
Use `next/font` to load fonts. It removes external network requests and eliminates layout shift:
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });Conclusion
Performance optimisation is an ongoing process, not a one-time task. Set up monitoring, run Lighthouse in CI, and treat regressions as bugs.