Core Web Vitals Optimization: A Complete Guide for 2025

LCP, INP, and CLS explained and exactly how to fix them in your Next.js app to improve rankings and user experience.

Core Web Vitals are Google's set of user experience metrics that directly impact search rankings. Since they became official ranking factors in 2021, ignoring them means leaving traffic on the table. In 2025, they're table stakes.

The Three Metrics That Matter

Google evaluates three signals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Each measures a different dimension of how a page feels to real users.

LCP: Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to load. The target is under 2.5 seconds. The most common culprits are unoptimized images, slow server response times, and render-blocking JavaScript.

To fix LCP in Next.js: use the Image component with priority on above-the-fold images, enable ISR or SSG to reduce TTFB, and move any large fonts to next/font. For images, set explicit width and height to prevent layout thrashing during load.

INP: Interaction to Next Paint

INP replaced FID as a Core Web Vital in 2024. It measures the delay between any user interaction and the next visual update. Target is under 200ms. The main causes are long JavaScript tasks that block the main thread.

To fix INP: break up large JS bundles using dynamic imports, defer non-critical third-party scripts, and avoid synchronous state updates in event handlers. React 19's concurrent rendering features help significantly here.

CLS: Cumulative Layout Shift

CLS measures how much the page layout moves unexpectedly while loading. Target is under 0.1. The most common causes are images without dimensions, dynamically injected content, and late-loading fonts.

Next.js Specific Wins

Use next/image for all images with priority on hero images
Move Google Fonts to next/font to eliminate render blocking
Use next/script with strategy="afterInteractive" for analytics
Keep your bundle under 200kb parsed JS using bundle-analyzer

Tracking Progress

Once you've made fixes, resubmit your URL to Search Console and monitor the Core Web Vitals report. Lab data (PageSpeed) updates immediately. Field data in Search Console takes 28 days to update.