Core Web Vitals
Optimization Tips
Measurement Tools
| Tool | Measures | Lab/Field | Notes |
|---|
LCP, INP, CLS, FCP, TTFB — thresholds, measurement tools, and optimization tips
| Tool | Measures | Lab/Field | Notes |
|---|
Core Web Vitals Reference explains Google's three Core Web Vitals metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — with their thresholds, measurement methods, and the most impactful optimizations for each. It also covers the supporting vitals: First Contentful Paint (FCP), Time to First Byte (TTFB), and Total Blocking Time (TBT).
Google uses Core Web Vitals as a ranking signal in its Page Experience algorithm. Sites that score Good on all three metrics may receive a ranking boost; more importantly, good scores correlate with lower bounce rates and higher conversion. The metrics measure real user experience: how fast the main content appears (LCP), how responsive the page feels to input (INP), and how stable the layout is as content loads (CLS).
LCP measures when the largest visible element (image, text block, or video poster) finishes loading. Good LCP is under 2.5 seconds. INP replaced FID in 2024 and measures the full interaction latency from input to visual response. Good INP is under 200ms. CLS measures layout shift throughout the page's life. Good CLS is under 0.1.
These thresholds are assessed at the 75th percentile of page loads from field data — meaning 75% of your real users' visits must meet the threshold for a page to be classified as Good.
LCP: 3.8 seconds
Result: Needs Improvement (Good threshold is 2.5s). Likely cause: large unoptimized hero image. Fix: add loading='eager' and fetchpriority='high', use WebP, preload the image in the head.
CLS: 0.25
Result: Poor (Good threshold is 0.1). Likely cause: images without explicit width/height, or content inserted above existing content by ads or late-loading scripts. Fix: set explicit dimensions on all images and ad slots.
INP: 350ms
Result: Poor (Good threshold is 200ms). Likely cause: heavy JavaScript blocking the main thread during a click handler. Fix: break long tasks, defer non-critical JS, use a web worker for CPU-heavy work.
How do I measure Core Web Vitals?
Use PageSpeed Insights for a quick check. For continuous field data, add the web-vitals npm package to your site and send measurements to your analytics. Google Search Console shows aggregated field data after sufficient traffic.
What is the difference between lab and field data?
Lab data is measured in controlled conditions (Lighthouse in Chrome DevTools or PageSpeed Insights). Field data comes from real users' Chrome browsers via the Chrome User Experience Report (CrUX). Google's ranking signal uses field data at the 75th percentile.
Why did FID get replaced by INP?
First Input Delay measured only the delay before a browser could process the first interaction. INP measures the full latency of all interactions throughout the page's life, including animations and visual updates after the event handler runs. INP is a more comprehensive responsiveness metric.
What causes a high CLS score?
Common causes: images without width/height attributes (browser doesn't know their size until loaded), dynamically injected content above existing content (ads, cookie banners), custom fonts causing FOUT/FOIT (flash of unstyled/invisible text), and animations that move elements in ways the layout doesn't anticipate.
What is TTFB and does it affect Core Web Vitals?
Time to First Byte measures when the browser receives the first byte from the server. It is not a Core Web Vital itself but directly affects LCP — a slow server response delays all subsequent rendering. Good TTFB is under 800ms.