Core Web Vitals (LCP, INP, CLS) directly affect SEO and user experience. Next.js offers excellent tools to optimize these metrics, but it requires conscious configuration.
Largest Contentful Paint (LCP)
LCP measures time until the largest visible element loads. To optimize: use next/image with priority on the hero, preload critical fonts, and minimize JavaScript on the critical path.
Server Components in the Next.js App Router significantly reduce JS sent to the client.
Interaction to Next Paint (INP)
INP replaced FID as the interactivity metric. To improve INP: avoid long tasks on the main thread, use Web Workers for heavy processing, and lazy-load non-critical components.
Framer Motion and heavy animations should only be loaded where needed.
Cumulative Layout Shift (CLS)
CLS measures visual stability. Set explicit dimensions on images and embeds, reserve space for dynamic content, and avoid injecting content above the fold after load.
next/font eliminates web font layout shift, a common cause of high CLS.