Next.js Core Web Vitals: How to Score 100/100 in 2026

#react #javascript #nextjs #webperf

Next.js hands you everything you need to score 100 on Core Web Vitals. It also lets you tank it just as easily. The score comes from using the tools on purpose — here's the exact code.

LCP: your hero image is the culprit

The Largest Contentful Paint element is almost always the hero. Two moves fix most of it — server-render it (default in the App Router) and prioritise the image:

import Image from 'next/image'
<Image src="/hero.webp" alt="Dashboard" width={1200} height={600} priority />

The priority flag preloads it so it paints first instead of waiting on JavaScript.

INP: ship less JavaScript

Interaction to Next Paint is the metric most sites now fail, and the cause is always too much client JS on the main thread. Keep components as Server Components by default, and code-split the heavy ones:

import dynamic from 'next/dynamic'
const Chart = dynamic(() => import('./Chart'), { ssr:false })

CLS: reserve the space

Layout shift comes from elements with no reserved space — unsized images and swapping fonts. next/font self-hosts and kills the font shift; always pass width/height to images.