Core Web Vitals are Google's official metrics for page experience — and they directly affect your search rankings. In 2025, LCP, CLS, and INP are the three signals that matter. Here is exactly what they measure and how to improve each one in a Next.js application.

Why Core Web Vitals Matter

Google uses Core Web Vitals as a ranking signal. Two pages with identical content and backlinks — the faster one ranks higher. Beyond rankings, these metrics correlate directly with business outcomes: a 0.1-second improvement in LCP increases conversion rates by an average of 8%.

Measure your current scores in Google Search Console → Core Web Vitals or run a Lighthouse audit in Chrome DevTools. Field data (real users) matters more than lab data (simulated) for rankings.

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to load. This is usually your hero image, a large heading, or a video thumbnail. Google's threshold:

  • Good: under 2.5 seconds
  • Needs improvement: 2.5–4.0 seconds
  • Poor: over 4.0 seconds

How to fix LCP in Next.js:

  1. Use next/image with priority prop on your hero image — this adds fetchpriority="high" and preloads the image
  2. Serve images in WebP or AVIF format (Next.js does this automatically)
  3. Use a CDN — static assets should be served from an edge location near the user
  4. Eliminate render-blocking resources — defer non-critical JavaScript
  5. Enable HTTP/2 on your server for parallel asset loading
The single highest-impact LCP fix: add priority to your hero image. It is a one-line change that often cuts 0.5–1.5 seconds from LCP.

CLS — Cumulative Layout Shift

CLS measures visual stability — how much the page layout shifts while loading. A score of 0 is perfect. Above 0.1 is a problem. The most common causes:

  • Images without dimensions — the browser reserves no space until the image loads, then the layout jumps
  • Web fonts loading late — text reflows when the font swaps in
  • Dynamic content injected above existing content — ads, banners, cookie notices
  • Animations that change layout properties — avoid animating width, height, top, left

How to fix CLS in Next.js:

  1. Always provide width and height props to next/image
  2. Use next/font — it eliminates font-swap layout shift entirely
  3. Reserve space for dynamic content (ads, iframes) with min-height containers
  4. Animate with transform and opacity only — these do not trigger layout recalculation

INP — Interaction to Next Paint

INP replaced FID (First Input Delay) in March 2024. It measures the delay between any user interaction — click, tap, keyboard press — and the next paint that reflects the result. Google's threshold:

  • Good: under 200ms
  • Needs improvement: 200–500ms
  • Poor: over 500ms

How to fix INP in Next.js:

  1. Break up long JavaScript tasks — anything over 50ms blocks the main thread
  2. Use React Server Components to keep heavy computation off the client
  3. Defer non-critical third-party scripts (next/script with strategy="lazyOnload")
  4. Avoid heavy work in event handlers — offload to requestIdleCallback or web workers
  5. Minimise client-side state updates that trigger large re-renders

Auditing Your Site

Use these tools to find and prioritise issues:

  • Chrome DevTools → Lighthouse — full audit with actionable recommendations
  • PageSpeed Insights — combines lab and field data
  • Web Vitals Chrome Extension — real-time vitals as you browse your own site
  • Search Console → Core Web Vitals report — field data from your real visitors

Core Web Vitals are not a one-time fix — they are a discipline. Every new feature you ship should be evaluated against its impact on LCP, CLS, and INP. Build that habit now and you will stay ahead of competitors who treat performance as an afterthought.