Google uses Core Web Vitals as a direct ranking signal. In 2026, three metrics define the "good" threshold: LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. Miss any one of them and you lose the Page Experience signal. This guide explains what each metric actually measures and the highest-leverage fixes for each.
LCP — Largest Contentful Paint
LCP measures the time from navigation start to when the largest visible element in the viewport finishes rendering. In practice, the LCP element is almost always a hero image, background image, or large text block.
| Score | LCP |
|---|---|
| Good | ≤ 2.5 s |
| Needs improvement | 2.5–4.0 s |
| Poor | > 4.0 s |
Top LCP fixes
- Serve the LCP image from the same origin or a fast CDN. Each DNS lookup, TCP handshake, and TLS negotiation adds 50–200 ms before the first byte.
- Convert to WebP or AVIF. A 400 KB JPEG LCP image becomes 90–120 KB WebP — shaving 300 ms on a 3G connection.
- Add
fetchpriority="high"to the LCP image. This tells the browser to prioritize the request over other images and non-critical resources. - Preload the LCP image.
<link rel="preload" as="image" href="/hero.webp">puts it in the preload queue before the HTML parser reaches the<img>tag. - Never lazy-load the LCP image.
loading="lazy"on your hero image is a common mistake that adds 500+ ms. - Eliminate render-blocking resources above the LCP element — stylesheets that aren't critical, synchronous scripts in
<head>.
INP — Interaction to Next Paint
INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. It measures the worst interaction latency across all user interactions on a page visit — clicks, taps, and keyboard inputs. INP captures the full duration from input to next rendered frame.
| Score | INP |
|---|---|
| Good | ≤ 200 ms |
| Needs improvement | 200–500 ms |
| Poor | > 500 ms |
Top INP fixes
- Break up long tasks. Any JavaScript task over 50 ms blocks the main thread. Use
scheduler.yield()orsetTimeout(fn, 0)to yield control back to the browser between chunks. - Move heavy work off the main thread. Web Workers can run data processing, parsers, and serialization without blocking user interactions.
- Avoid layout thrashing. Interleaved reads and writes to the DOM cause forced synchronous layouts. Batch DOM reads, then batch DOM writes.
- Defer third-party scripts. Analytics, chat widgets, and A/B testing scripts are common INP killers. Load them with
<script defer>or after theloadevent. - Reduce React hydration cost. Large React trees hydrating on interaction cause multi-hundred-millisecond INP spikes. Use Suspense boundaries and selective hydration.
CLS — Cumulative Layout Shift
CLS measures unexpected layout shifts — elements jumping around while the user is reading or about to click. The score is calculated from the sum of all layout shift scores where each shift's score is the fraction of the viewport affected multiplied by the distance traveled.
| Score | CLS |
|---|---|
| Good | ≤ 0.1 |
| Needs improvement | 0.1–0.25 |
| Poor | > 0.25 |
Top CLS fixes
- Always specify image width and height. Without dimensions, the browser doesn't reserve space until the image loads, causing a shift. Use
widthandheightattributes oraspect-ratioin CSS. - Use
font-display: optionalor preload fonts. Web fonts that swap after the fallback font is painted cause layout shifts. - Reserve space for ads, embeds, and iframes. Inject a placeholder container with fixed dimensions before the content loads.
- Avoid inserting DOM above existing content. Banners, cookie notices, and dynamic content inserted at the top of the page push everything down.
Measuring Core Web Vitals
Lab tools (Lighthouse, PageSpeed Insights) give you a simulated score. Field data (Chrome User Experience Report, Search Console) reflects real user experience. Google uses field data for ranking signals. The 75th percentile of real visits must meet the threshold — not the median, not the best-case.
- PageSpeed Insights — shows field data from CrUX alongside lab data from Lighthouse.
- Search Console Core Web Vitals report — groups URLs by status and shows the percentage of good, needs improvement, and poor URLs.
- web-vitals JavaScript library — reports real LCP, INP, and CLS from your own users, sendable to any analytics backend.
Priority order
Fix LCP first — it has the highest correlation with perceived speed and the largest ranking impact. Then INP — it directly affects interactivity, which users feel. CLS last — it's usually fixable with HTML attribute changes and doesn't require architectural work.