The Complete Guide to Web Performance Optimization

Web performance directly impacts business outcomes. Amazon found that every 100ms of latency costs 1% in sales. Google found that 53% of mobile users abandon sites that take over 3 seconds to load. And Google uses Core Web Vitals as a ranking factor. Performance isn't just a technical concern — it's a business imperative.

Core Web Vitals: The Metrics That Matter

• Largest Contentful Paint (LCP): Time until the largest content element is visible. Target: < 2.5s. Fix: optimize hero images, preload critical resources, use CDN.
• Interaction to Next Paint (INP): Responsiveness to user interactions. Target: < 200ms. Fix: break up long tasks, use requestIdleCallback, reduce JavaScript execution time.
• Cumulative Layout Shift (CLS): Visual stability during loading. Target: < 0.1. Fix: set explicit dimensions on images/videos, avoid inserting content above the fold.

Image Optimization

Images are typically 50-70% of page weight. Modern optimization techniques can reduce image payload by 80% without visible quality loss: use WebP/AVIF formats, serve responsive sizes with srcset, lazy-load below-the-fold images, and use blur-up placeholders for perceived performance.

// Next.js Image component handles all optimization automatically
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority           // Preload LCP image
  placeholder="blur"  // Show blur placeholder while loading
  sizes="(max-width: 768px) 100vw, 1200px"  // Serve correct size per viewport
/>
// Automatically converts to WebP/AVIF, generates responsive sizes, lazy-loads

Code Splitting and Bundle Optimization

Ship only the JavaScript users need for the current page. Next.js automatically code-splits by route, but you should also split heavy libraries (charting, editors, maps) with dynamic imports. The goal: initial JavaScript bundle under 200KB gzipped for the critical rendering path.

Font Loading Strategy

Custom fonts cause invisible text (FOIT) or layout shifts (FOUT) if not loaded correctly. Our strategy: self-host fonts (avoid render-blocking Google Fonts requests), preload the primary font weight, use font-display: swap for text visibility, and subset fonts to include only the characters you need.

Performance Testing in CI

Run Lighthouse CI on every pull request. Compare scores against the main branch and block merges that regress performance. This catches performance issues before they reach production — a habit that's far easier than fixing performance problems after launch.

Web performance is a continuous practice, not a one-time optimization. Measure constantly, set budgets, automate checks, and make performance a first-class engineering concern alongside features and reliability.