Improve Core Web Vitals in Next.js: LCP, CLS and INP

Core Web Vitals are a real Google ranking signal and a direct driver of conversions. The three that matter — LCP, CLS, and INP — each have specific, fixable causes. Here's the playbook.

LCP — Largest Contentful Paint (target < 2.5s)

• Use next/image with priority on the hero image so it loads first.
• Preload your primary font and use next/font to avoid render-blocking requests.
• Serve from the edge / a CDN and keep the critical render path small.

CLS — Cumulative Layout Shift (target < 0.1)

// Always reserve space for images so content doesn't jump
<Image src={src} alt={alt} width={1200} height={630} />

Other CLS killers: ads/embeds without reserved height, and web fonts that swap and reflow. Set explicit dimensions and use font-display: optional.

INP — Interaction to Next Paint (target < 200ms)

INP measures responsiveness. Reduce JavaScript on the main thread: keep "use client" at the leaves, defer non-critical scripts with next/script strategy lazyOnload, and break up long tasks.