Core Web Vitals are one of the few performance metrics that directly affect search visibility and conversion. The good news: a small number of decisions account for most of the result.
1. Make the LCP element boring
The largest contentful paint is usually a headline or a hero image. Render it on the server, avoid fading it in with JavaScript, and if it is an image, give it priority and explicit dimensions.
<Image src="/hero.jpg" alt="" width={1600} height={900} priority sizes="100vw" />
2. Ship less JavaScript for interactions
Interaction to Next Paint (INP) suffers when the main thread is busy. Keep most components as Server Components and push "use client" down to the smallest interactive leaf.
- Lazy-load heavy, below-the-fold widgets
- Prefer CSS for hover and entrance effects
- Break up long tasks with
startTransition
3. Reserve space for everything
Cumulative Layout Shift comes from content that appears without reserved space: images, embeds, fonts and banners. Use next/font to eliminate font swapping shifts, and set aspect ratios on media containers.
Measure in the field
Lab tools are a starting point, but real-user data is what Google uses. Track vitals with the useReportWebVitals hook or your analytics provider and review them after every release.