The Ultimate Next.js Performance Guide: Hitting 100 on Core Web Vitals

## Why Core Web Vitals Matter More Than Ever Google's page experience signals are now a confirmed ranking factor, and Core Web Vitals--LCP, INP, and CLS--sit at the heart of that equation. In our experience building 120+ websites, we've seen a direct correlation: every 100ms improvement in LCP translates to roughly 1.2% higher conversion rates. ### The Three Metrics That Matter **Largest Contentful Paint (LCP) -- Target: < 2.5s** LCP measures when the largest visible element finishes rendering. The most common culprits for slow LCP are unoptimised hero images and render-blocking JavaScript. **Interaction to Next Paint (INP) -- Target: < 200ms** INP replaced FID in 2024 and measures overall responsiveness. Heavy client-side JavaScript and unoptimised event handlers are the usual offenders. **Cumulative Layout Shift (CLS) -- Target: < 0.1** CLS captures visual stability. Dynamic ad slots, images without dimensions, and web font loading are the top causes of layout shift. ### Our Next.js Performance Playbook **1. Image Optimisation with next/image** Always use the built-in `Image` component. It automatically serves WebP/AVIF, lazy-loads below-the-fold images, and reserves layout space to prevent CLS. **2. Server Components by Default** In the App Router, components are Server Components by default--meaning zero JavaScript shipped to the client unless you explicitly opt in with `'use client'`. Keep interactive islands small. **3. Strategic Code Splitting** Use `dynamic()` imports for heavy components that aren't needed on initial render--modals, charts, maps, and rich text editors. **4. Font Optimisation with next/font** Load fonts via `next/font` to eliminate render-blocking requests and prevent FOUT/FOIT. **5. Edge Caching with ISR** Use Incremental Static Regeneration to serve pages from the edge while keeping content fresh. We typically set `revalidate: 3600` for content pages and `revalidate: 60` for dynamic listings. ### Real Results On a recent e-commerce project, these optimisations moved our Lighthouse Performance score from 62 to 98, reduced LCP from 4.2s to 1.1s, and contributed to a 32% increase in organic traffic within 3 months. *Need help optimising your Next.js application? [Get in touch](/contact)--we offer free performance audits.*