How We Optimized Next.js Performance to 95+ Lighthouse Scores

Performance isn't magic. It's a checklist of specific optimizations that compound into a fast site.

Start With Measurement

Before optimizing, measure. We run Lighthouse on every pull request and track three key metrics:

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

If you're not measuring, you're guessing.

Image Optimization

Images are usually the biggest bottleneck. Here's what works:

• Use next/image with WebP format (automatic)
• Set explicit width/height to prevent layout shift
• Lazy load below-the-fold images
• Use priority prop on hero images

Code Splitting

Next.js handles route-based splitting automatically. What you need to watch:

• Keep shared bundles under 100KB gzipped
• Use dynamic imports for heavy components
• Audit bundle size with @next/bundle-analyzer

Server Components

The App Router's server components are a game-changer. Use them by default and only add 'use client' when you need:

• Browser APIs (localStorage, etc.)
• Event handlers (onClick, etc.)
• Hooks (useState, useEffect, etc.)

The 80/20 Rule

Focus on these five things first:

• Optimize images
• Minimize JavaScript
• Use server components
• Implement proper caching
• Lazy load below-the-fold content

Everything else is marginal gains.