Guides
How to Improve Core Web Vitals in Next.js
Next.js gives you the tools to hit strong Core Web Vitals scores — but only if they're used deliberately. This walks through the highest-impact fixes in order of typical effect.
Prerequisites
- arrow_rightA Next.js app with a Lighthouse or PageSpeed Insights baseline already run
Step 1: Fix LCP With next/image
import Image from 'next/image';
<Image src={hero} alt="" priority width={1200} height={630} />The priority prop tells Next.js to preload this specific image rather than lazy-loading it — use it only on the actual largest above-the-fold image, not everywhere.
Step 2: Fix CLS With Reserved Space
next/image requires width and height (or fill with a sized container), which reserves the correct space before the image loads, preventing layout shift. Apply the same discipline to ads, embeds, and web fonts using next/font.
Step 3: Fix INP by Reducing Client-Side JavaScript
Push 'use client' boundaries as low as possible in the component tree, and use dynamic imports for heavy, non-critical client components so they don't block the main thread during initial interaction.
Common Errors
- arrow_rightUsing priority on every image on the page, which defeats its purpose by preloading everything
- arrow_rightLoading web fonts without next/font, causing font-swap layout shift
- arrow_rightLarge third-party scripts (chat widgets, analytics) loaded synchronously in the head, blocking render
Performance Considerations
- arrow_rightMeasure with both Lighthouse (lab data) and Search Console's Core Web Vitals report (field data) — they can disagree
- arrow_rightFix the single largest contributor first, then re-measure, rather than changing many things at once
Frequently Asked Questions
What's the single most impactful fix?add
For most content sites, correctly sizing and prioritizing the largest above-the-fold image, since LCP is frequently the worst-performing of the three Core Web Vitals metrics on unoptimized sites.
Does Next.js improve Core Web Vitals automatically?add
It provides the tools (image optimization, font optimization, code splitting) but doesn't apply them for you — a badly built Next.js app can still perform poorly.
How often should I re-measure?add
After any significant change, and periodically in production via Search Console's field data, since real-world conditions vary from lab tests.