Core Web Vitals for Next.js: A Practical Checklist

The three metrics, in plain terms

• LCP (Largest Contentful Paint) — how long until the largest visible element (usually a hero image or heading) has rendered.
• INP (Interaction to Next Paint) — how quickly the page responds after a user actually interacts with it, replacing the older FID metric.
• CLS (Cumulative Layout Shift) — how much visible content jumps around as the page loads.

Field data vs. lab data — measure the right one

A Lighthouse score in dev tools is lab data — a single run, on one simulated connection, on one device. Google's actual ranking signal is field data from the Chrome UX Report (CrUX), aggregated from real visitors over a rolling 28-day window. A site can have a perfect Lighthouse score and a poor CrUX report if real users are mostly on slower connections or older phones than the lab simulation assumes. Check Search Console's Core Web Vitals report, not just a local Lighthouse run, before declaring a page fixed.

Next.js-specific levers for LCP

• Use the built-in Image component with explicit width/height (or fill with a sized container) so the browser can reserve space before the image loads — this also directly helps CLS.
• Mark the LCP image with priority so Next.js preloads it instead of lazy-loading the one image that matters most for this metric.
• Audit font loading — a custom font swapping in after paint (FOUT) can itself trigger the LCP element to shift.

Next.js-specific levers for INP

INP problems in a Next.js site are usually caused by large client-side JavaScript bundles blocking the main thread during hydration, especially with heavy animation libraries running on every route. Code-split anything not needed for the initial interaction, and check whether animation-heavy sections can defer their JS until after first interaction rather than loading eagerly with the rest of the bundle.

Common CLS causes worth checking specifically

• Ads or embeds injected without a reserved space.
• Web fonts that render at a different width than the fallback font before swapping.
• Content injected above existing content after initial load (a common mistake with cookie banners and promotional bars).

A pre-launch checklist

Before shipping a new page: confirm the LCP element is identified and preloaded, confirm every image has explicit dimensions, run a CrUX check once the page has real traffic (not just a lab score), and budget the JavaScript payload before writing the components rather than after — see the companion piece on setting performance budgets before you design.

Related reading