webperf By Marshkalk

Core Web Vitals Explained: LCP, CLS, and INP

Google's Core Web Vitals are now ranking signals. Learn what LCP, CLS, and INP measure, what good scores look like, and how to improve each one.

What Are Core Web Vitals?

Core Web Vitals are a set of real-world performance metrics defined by Google to measure the user experience quality of web pages. They became a Google ranking signal in 2021 and have been updated since. They measure loading performance, visual stability, and interactivity – the three aspects of page experience that most affect users.

There are currently three Core Web Vitals metrics:

  1. LCP – Largest Contentful Paint (loading)
  2. CLS – Cumulative Layout Shift (visual stability)
  3. INP – Interaction to Next Paint (interactivity, replaced FID in 2024)

LCP – Largest Contentful Paint

What it measures: How long it takes for the largest visible content element to render. This is usually a hero image, a large heading, or a full-screen video poster.

Why it matters: LCP is a proxy for "how fast does the page feel like it has loaded?" Users form their primary impression of page speed from when the main content appears.

Scoring:

  • Good: ≤ 2.5 seconds
  • Needs improvement: 2.5–4 seconds
  • Poor: > 4 seconds

Common LCP culprits:

  • A large, unoptimized hero image (wrong format, no loading="lazy" on first-viewport images – actually, do NOT lazy-load LCP elements)
  • Render-blocking JavaScript or CSS
  • Slow server response time (TTFB > 600ms)
  • No preloading of the LCP resource

Key fix: Preload your LCP image. Add <link rel="preload" as="image" href="hero.webp"> in the <head>. This alone typically cuts 1–2 seconds from LCP.

CLS – Cumulative Layout Shift

What it measures: How much the page layout shifts unexpectedly during loading and use. Each shift is scored by the fraction of the viewport affected and the distance elements moved.

Why it matters: Unexpected layout shifts cause clicks on the wrong element, loss of reading position, and a frustrating user experience. The classic example: a "Sign Up" button shifts just as you click it and you accidentally click the ad below it.

Scoring:

  • Good: ≤ 0.1
  • Needs improvement: 0.1–0.25
  • Poor: > 0.25

Common CLS culprits:

  • Images without explicit width and height attributes (browser doesn't reserve space before the image loads)
  • Ads or embeds injected without reserved space
  • Web fonts causing a flash of unstyled text (FOUT) that changes layout
  • Late-loading banners or cookie notices that push content down

Key fix: Always set width and height on <img> elements. The browser uses these to reserve the correct space before the image loads, preventing a shift.

INP – Interaction to Next Paint

What it measures: The responsiveness of the page to user interactions (clicks, taps, keyboard input). INP measures the time from interaction start to the next visual update across all interactions during a session, and reports the worst case (excluding outliers).

INP replaced FID (First Input Delay) in March 2024. FID only measured the first interaction; INP measures all interactions throughout the session.

Scoring:

  • Good: ≤ 200 milliseconds
  • Needs improvement: 200–500ms
  • Poor: > 500ms

Common INP culprits:

  • Heavy JavaScript on the main thread blocking the response
  • Long tasks (> 50ms) running during interaction
  • Expensive DOM operations triggered by clicks
  • Third-party scripts (analytics, ads) competing for the main thread

Key fix: Break up long tasks using scheduler.yield() or setTimeout(fn, 0). Audit and defer third-party scripts. Use a performance profiler (Chrome DevTools → Performance tab) to identify long tasks.

How to Measure Core Web Vitals

Real User Monitoring (RUM):

  • Google Search Console → Core Web Vitals report (field data from real Chrome users)
  • Chrome User Experience Report (CrUX) – the public dataset Google uses for ranking

Lab testing (synthetic):

  • PageSpeed Insights (pagespeed.web.dev) – runs Lighthouse and shows field data
  • Lighthouse in Chrome DevTools (Ctrl+Shift+J → Lighthouse tab)
  • WebPageTest – detailed waterfall and filmstrip

Important: Lab scores and field scores can differ significantly. Google uses field data (CrUX) for ranking. If you have field data available, optimize for that, not just the Lighthouse score.

Checking Your Meta Tags for SEO

Well-structured meta tags (title, description, canonical, Open Graph) support search performance. The Meta Tag Analyzer on this site checks any URL's metadata for completeness and correctness.

Summary

LCP (loading), CLS (stability), and INP (interactivity) are Google's three Core Web Vitals ranking signals. Good thresholds: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms. Preloading the LCP resource, adding image dimensions, and eliminating main-thread-blocking JavaScript are the highest-impact fixes for most sites.