01
Use next/image with explicit dimensions
Eliminates CLS, lazy-loads everything below the fold, and serves modern formats automatically.
Before
<img src='/hero.jpg' />After
LCP −75%, CLS eliminated
Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·Performance Engineering·Real Web Vitals·75% Faster·Next.js · React 19·
◆ Case Study · Web Vitals Reckoning
Four-point-eightseconds.Now —
4800ms
We rewrote a slow page using everything modern Next.js gives you for free. The result was a 75% drop in LCP, zero layout shift, and a Lighthouse score that finally hit 100.
Lighthouse
52→100
75%
LCP improvement
−65%
JS bundle size
0.02
Cumulative Layout Shift
4.0×
Faster end-to-end
▣ The five metrics that matter
Every
Core Web Vital,
measured.
Side-by-side, real numbers from the live /before and /after pages in this app — collected with web-vitals.
01LCP
Largest Contentful Paint
Before
0ms
↓
After
0ms
Before
After
75%faster·4.0× speedup
02FCP
First Contentful Paint
Before
0ms
↓
After
0ms
Before
After
81%faster·5.3× speedup
03CLS
Cumulative Layout Shift
Before
0.00
↓
After
0.00
Before
After
94%faster·15.5× speedup
04INP
Interaction to Next Paint
Before
0ms
↓
After
0ms
Before
After
87%faster·7.9× speedup
05TTFB
Time to First Byte
Before
0ms
↓
After
0ms
Before
After
87%faster·7.8× speedup
⌘ How we did it
Four
small
decisions.
02
Dynamic-import heavy components
Defer non-critical UI past first paint. Cuts initial JS parse cost dramatically.
Before
import HeavyChart from './HeavyChart'After
JS parse −40%, FCP −60%
03
Server Components by default
Don't ship React for static UI. Mark only interactive islands as 'use client'.
Before
'use client' // top of every fileAfter
Bundle −65%, INP −87%
04
Self-host fonts with next/font
Preload, subset, and inline font CSS. No render-blocking Google Fonts request.
Before
<link href='fonts.googleapis.com/...'/>After
Render unblocked, TTFB −85%
▶ See it for yourself