Core Web Vitals aren't a vanity metric. They're a proxy for how it actually feels to use your site — and Google still uses them as a ranking signal. Here's how we hit green consistently.
Know the three metrics
- LCP (Largest Contentful Paint) — how fast the main content appears. Target under 2.5s.
- INP (Interaction to Next Paint) — how snappy interactions feel. Target under 200ms.
- CLS (Cumulative Layout Shift) — how much the layout jumps. Target under 0.1.
You optimise each differently, so measure them separately.
LCP: render on the server, prioritise the hero
The fastest way to show content is to ship it in the HTML. Server-render the page so the largest element is in the initial response — no waiting for JavaScript.
Then help the browser: give your hero image explicit width/height, serve it as AVIF/WebP, and preload the hero font with next/font so text paints without a flash.
INP: ship less JavaScript
Interaction latency is almost always a JavaScript problem. The fixes:
- Keep components as Server Components wherever possible — they ship zero JS.
- Make only the interactive leaves Client Components.
- Lazy-load heavy, below-the-fold widgets with dynamic imports.
- Avoid blocking the main thread with large synchronous work.
The less JavaScript the browser has to parse and run, the faster every tap responds.
CLS: reserve space for everything
Layout shift comes from content that arrives late and pushes things around. Prevent it:
- Always set dimensions on images and embeds.
- Reserve space for fonts with
font-display: swapand a matched fallback metric. - Don't inject banners or ads above existing content after load.
Measure in the field, not just the lab
Lighthouse is a lab tool — useful, but it's a single run on a simulated device. What Google actually uses is field data from real users. Watch your Search Console Core Web Vitals report and real-user monitoring, because the lab and the field often disagree.
The Next.js advantage
A modern Next.js setup gives you most of this by default: server rendering, automatic code splitting, next/image optimisation and next/font with no layout shift. Your job is mostly to not undo it — keep client JavaScript lean and reserve space for media.
Do that, and green Core Web Vitals stop being a project and become the baseline.
