Optimizing Core Web Vitals in Next.js
A practical walkthrough of how I push LCP, CLS and INP into the green: image strategy, font loading, hydration and the wins that actually move the needle.
Core Web Vitals are no longer a nice-to-have. They influence search ranking, bounce rate and how fast your product feels. The good news: in a Next.js app, most of the wins come from a handful of fundamentals applied consistently.
Largest Contentful Paint (LCP)
LCP is usually your hero image or headline. Serve the hero with next/image, set priority on it, and make sure it is not blocked by render-heavy client components. Preload critical fonts and avoid layout-shifting wrappers above the fold.
Cumulative Layout Shift (CLS)
Reserve space for everything that loads late: images with explicit width/height, ad slots, and embeds. Use font-display: swap with a matched fallback metric to avoid the text reflow that quietly wrecks CLS.
Interaction to Next Paint (INP)
Ship less JavaScript. Keep client components small and push data fetching to the server. Break up long tasks, defer non-critical work, and lean on React Server Components so the browser has less to hydrate.
Measure on real devices, not just your laptop. Lighthouse is a starting point, but field data from the Chrome UX Report tells you what users actually experience.
Mohammed Sajas
Full Stack Engineer & Digital Solutions Consultant