Next.js performance: image optimization, code splitting, and caching

Use next/image for all image rendering. It automatically optimizes images for different screen sizes, lazy-loads below-the-fold images, and serves modern formats like WebP. This alone can cut image bandwidth by 50%+.

Implement code splitting with dynamic imports. Next.js automatically code-splits at route boundaries; use dynamic() for components that are conditionally rendered or below-the-fold.

Enable ISR (Incremental Static Regeneration) for pages that change infrequently. Set revalidate times based on how often content changes: 60 seconds for frequently updated content, 3600 for daily updates.

Use font stacks instead of web fonts or minimize font requests. Google Fonts add extra requests and parsing overhead. A good system font stack is faster and still looks professional.