Core Web Vitals for React & Next.js: A Practical Optimization Guide

TL;DR

Core Web Vitals (LCP, INP, CLS) are Google's page experience ranking signals. For React/Next.js sites: use next/image for LCP, code-split for INP, and next/font + reserved space for CLS. Targets: LCP < 2.5s, INP < 200ms, CLS < 0.1. Byron Johnson optimizes CWV at $60/hr — page speed services.

---

What Are Core Web Vitals?

Google measures three metrics that reflect real user experience:

Metric	What it measures	Good target
LCP (Largest Contentful Paint)	How fast main content loads	< 2.5 seconds
INP (Interaction to Next Paint)	How fast the page responds to clicks/taps	< 200 milliseconds
CLS (Cumulative Layout Shift)	How much the layout jumps while loading	< 0.1

All three must pass for a "Good" Core Web Vitals assessment. Failing metrics can lower your Google rankings — even if your content is excellent.

---

How to Fix LCP on React & Next.js

LCP measures when the largest visible element (usually a hero image, heading, or video) finishes rendering.

Use next/image with priority

import Image from 'next/image';

<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={630}
priority
sizes="(max-width: 768px) 100vw, 1200px"
/>

The priority prop preloads above-the-fold images. Without it, Next.js lazy-loads by default — killing LCP.

Use modern image formats

Configure next.config.mjs for AVIF and WebP:

images: {
formats: ['image/avif', 'image/webp'],
}

AVIF is typically 30–50% smaller than JPEG at equivalent quality.

Eliminate render-blocking resources

• Use next/font instead of Google Fonts tags
• Defer non-critical scripts with Next.js