Core Web Vitals in Next.js: what to measure and what to ignore
LCP, CLS and INP explained without the hype, plus the three causes behind most production failures.
Written by KillaQ
Core Web Vitals are almost always explained badly. They get presented as three acronyms to "turn green", when they are really three separate questions about a page: how long until it shows something, how much it moves while loading, and how quickly it responds when you touch it.
LCP: when the important thing appears
Largest Contentful Paint measures when the biggest element in the viewport is painted. On a marketing site that is nearly always the hero image or the headline.
The three causes we see over and over:
- The hero image is lazy-loaded.
loading="lazy"on the LCP element is a classic mistake: it delays exactly the thing that should arrive first. - Render-blocking fonts. A font served from an external CDN adds a fresh connection before any text can paint. Self-hosting it with
next/fontremoves that chain. - Unnecessary JavaScript on the critical path. If the hero needs hydration to be visible, it is not a hero — it is an application wearing a landing page as a costume.
CLS: the jump that breaks trust
Cumulative Layout Shift penalises content that moves after it appears. It usually comes from images without declared dimensions, banners injected above existing content, or fonts whose metrics change on load.
The practical rule: anything that will occupy space on the page must reserve that space before it has the content. A skeleton loader matching the final geometry solves the problem and looks better than a spinner while it does.
INP: the metric that replaced FID
Interaction to Next Paint measures real interaction latency across the whole visit, not just the first click. It is more honest than FID and much harder to game.
The enemy here is long work on the main thread: handlers that recompute entire lists, animations on properties that force layout (width, height, top) instead of transform and opacity, and global state that triggers cascading re-renders.
What to ignore
Do not chase a perfect lab score. Lighthouse on your laptop over fibre is not your user. What matters is field data: the 75th percentile of real users, on the devices and networks they actually have.
Measure first, optimise second, and only what misses a budget you wrote down before you started.