Skip to main content
Next.js app-router recommended

Performance Optimization

Image optimization with next/image, font loading with next/font, bundle analysis, code splitting, dynamic imports, and Core Web Vitals optimization.

Difficulty
intermediate
Read time
1 min read
Version
v1.0.0
Confidence
established
Last updated

Quick Reference

Use next/image for all images (auto WebP, srcset, lazy loading). Use next/font for Google/local fonts (self-hosted, no FOUT). Use next/dynamic for lazy loading heavy components. Import specific functions not entire libraries (lodash/debounce not lodash). Analyze bundle with @next/bundle-analyzer.

Use When

  • Optimizing page load performance
  • Adding images to Next.js pages
  • Setting up fonts
  • Reducing JavaScript bundle size

Skip When

  • Simple static sites without images
  • Using external image CDN with own optimization

Performance Optimization

Image optimization with next/image, font loading with next/font, bundle analysis, code splitting, dynamic imports, and Core Web Vitals optimization.

Tags

performance images fonts bundle-size core-web-vitals optimization

Discussion