Core Web Vitals Guide

Core Web Vitals are three user-centric performance metrics defined by Google: LCP (Largest Contentful Paint) measures loading speed, INP (Interaction to Next Paint) measures responsiveness, and CLS (Cumulative Layout Shift) measures visual stability. Google uses these as ranking signals in search results since 2021.

INP (Interaction to Next Paint) replaced FID (First Input Delay) as an official Core Web Vital in March 2024. FID only measured the delay before the browser could start processing an interaction; INP measures the full input latency including processing and rendering, giving a more accurate picture of page responsiveness.

Good thresholds: LCP ≤ 2.5 seconds (loading), INP ≤ 200 milliseconds (responsiveness), CLS ≤ 0.1 (visual stability). Values in the 'Needs Improvement' range are between Good and Poor thresholds. Poor thresholds: LCP > 4.0s, INP > 500ms, CLS > 0.25.

Field data (real users): Google Search Console, Chrome User Experience Report (CrUX), and the web-vitals.js library. Lab data (simulated): Chrome DevTools Lighthouse, PageSpeed Insights, and WebPageTest. Field data is what Google uses for ranking — lab data is a proxy for debugging.

TTFB (Time to First Byte) is the time from the request to the first byte of the response. A TTFB over 800ms delays LCP because the browser can't start loading resources until the HTML arrives. Improve TTFB with a CDN, server-side caching, and reducing backend query time.

CLS is caused by images/embeds without explicit size attributes, dynamically injected content above existing content (ads, banners, cookie notices), and web fonts causing text reflow (FOIT/FOUT). Fix: always set width and height on images, use aspect-ratio CSS, load fonts with font-display: optional, and avoid inserting above-fold content after load.