InBuild
GuidesApril 12, 20267 min read

Core Web Vitals Explained: LCP, CLS, INP for Developers

Google's Core Web Vitals are a ranking signal. Here's what LCP, CLS, and INP measure, what targets to hit, and how to fix the common failures in Next.js apps.

Core Web Vitals are Google's metrics for page experience. They're a ranking signal, and they measure what users actually care about: how fast content appears, how stable the layout is, and how responsive the page feels to interaction.

The three metrics

LCP — Largest Contentful Paint

How long until the largest visible element (usually a hero image or heading) renders. Target: under 2.5 seconds on mobile. Fix: optimize images (AVIF/WebP, priority on above-fold), reduce server response time, eliminate render-blocking scripts.

CLS — Cumulative Layout Shift

How much the page layout shifts as it loads. Target: under 0.1. Fix: set explicit dimensions on images and embeds, use font display: swap, reserve space for dynamic content (ads, carousels, lazy-loaded components).

INP — Interaction to Next Paint

How long between a user interaction (click, tap, key press) and the visual response. Target: under 200ms. Fix: avoid long JavaScript tasks on the main thread, defer non-critical scripts, use React concurrent features.

Common fixes in Next.js

  1. Images: use next/image with priority on the hero image. Set formats to AVIF/WebP in next.config.
  2. Fonts: load via next/font/google with display: swap. This prevents font-swap CLS.
  3. Scripts: load GTM and third-party scripts with strategy="lazyOnload" — never beforeInteractive.
  4. DNS: add dns-prefetch and preconnect for external domains (image CDNs, analytics).
  5. Static generation: use SSG for marketing pages. Static HTML from a CDN is the fastest possible LCP.

How to measure

  • Lab data: PageSpeed Insights, Chrome DevTools Lighthouse panel.
  • Field data: Chrome UX Report (CrUX), Google Search Console Core Web Vitals report.
  • Continuous monitoring: Vercel Analytics, Sentry Performance, or web-vitals npm package reporting to your analytics.

Frequently asked questions

Do Core Web Vitals affect rankings?

Yes, as a tiebreaker. If two pages have equal content quality and relevance, the one with better Core Web Vitals ranks higher. It's not the dominant factor, but it matters at the margin — and margins compound across hundreds of pages.

What are good scores?

LCP under 2.5 seconds. CLS under 0.1. INP under 200ms. These are Google's 'Good' thresholds. Aim for these on mobile — desktop is usually easier.

How do I test them?

PageSpeed Insights (lab data) and Chrome UX Report (field data from real users). GSC also reports Core Web Vitals per URL group. Test on mobile — it's always the harder target.

Ready to build?

Turn your next idea into a production-ready app in minutes.

Keep reading

Guides

Google Search Console for Developers: Setup, Sitemap, and Monitoring

GSC is your direct line to Google. Here's how to set it up, submit your sitemap, request indexing, and monitor your site's search performance.

Guides

React Server Components Explained: What They Are and Why They Matter

React Server Components run on the server, send zero JavaScript to the browser, and are the default in Next.js App Router. Here's what that means for your app.

Guides

How to Design a Hero Section That Converts (With Examples)

The hero section gets 5 seconds. Here's how to use them: headline structure, CTA placement, social proof positioning, and the 2026 design patterns that work.