What Are Core Web Vitals?
Core Web Vitals are three specific measurements of user experience that Google uses to evaluate page quality. They were introduced in 2020 and became a confirmed ranking signal in 2021 as part of the Page Experience update.
The three Core Web Vitals are:
LCP (Largest Contentful Paint) — measures loading performance. Specifically, how long it takes for the largest visible content element (usually a hero image or heading) to appear on screen.
INP (Interaction to Next Paint) — measures interactivity and responsiveness. Introduced in 2024 to replace the old FID metric, INP measures how quickly a page responds to user interactions like taps, clicks and key presses.
CLS (Cumulative Layout Shift) — measures visual stability. It quantifies how much page content unexpectedly shifts around as the page loads, which is jarring and causes users to misclick.
Google assesses these metrics using real user data from Chrome users (Chrome User Experience Report / CrUX), supplemented by lab data from tools like Lighthouse and PageSpeed Insights.
LCP: Improving Loading Performance
Target: LCP should be 2.5 seconds or faster.
The LCP element is usually a hero image, a large heading, a banner image or a video thumbnail — whatever is the largest element within the visible viewport when the page first loads.
How to improve LCP:
Optimize your hero image — this is the biggest impact. Use WebP or AVIF format (30-50% smaller than JPEG). Add width and height attributes to prevent layout shifts. Use a CDN to serve images from a server close to the user.
Add fetchpriority="high" to your hero image tag — this tells the browser to download the hero image before other images, improving perceived load time.
Use preconnect for critical third-party resources — if your hero uses a Google Font or CDN image, add <link rel="preconnect" href="..."> in the <head> to start the connection earlier.
Reduce server response time (TTFB) — if the server itself is slow, LCP cannot be good. Use caching, a CDN or a faster hosting plan.
Minimize render-blocking CSS and JavaScript — large CSS files and JavaScript that run before the page renders delay when LCP can happen.
INP: Improving Page Responsiveness
Target: INP should be 200 milliseconds or less.
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. While FID only measured the delay on the very first interaction, INP measures all interactions throughout the page session and reports the worst one.
Common causes of poor INP:
Long JavaScript tasks — any JavaScript task that takes more than 50ms blocks the browser from responding to user input. Break large tasks into smaller ones using setTimeout(), requestAnimationFrame() or the Scheduler API.
Inefficient event handlers — event listeners that trigger complex DOM updates, heavy calculations or synchronous API calls during a click cause delays.
Third-party scripts — analytics tools, chat widgets, advertising scripts and social media embeds often run heavy JavaScript. Load them with async or defer attributes, or use a Tag Manager to control loading.
Excessive DOM size — pages with thousands of DOM nodes are slower to update. Simplify your HTML structure and use virtual scrolling for long lists.
React re-renders — React components that re-render unnecessarily can cause poor INP. Use React.memo, useMemo and useCallback to prevent unnecessary re-computation.
CLS: Fixing Layout Shifts
Target: CLS score should be 0.1 or less.
CLS measures how much page content shifts around during loading. A score of 0 means no shifts; a score above 0.25 is "Poor" and actively hurts the user experience.
The most common causes of layout shift:
Images without dimensions — if you do not specify width and height on <img> tags, the browser does not know how much space to reserve until the image loads. When it loads, everything below it shifts down. Fix: always add explicit width and height attributes to images.
Late-loading fonts — when web fonts take time to load, the browser initially renders text with a system font. When the web font loads, the text re-renders and shifts. Fix: use font-display: optional or font-display: swap, and preload critical fonts.
Dynamically injected content — content inserted above existing content (like a cookie banner, notification bar or dynamically loaded ad) pushes everything down. Fix: reserve space for dynamic content using CSS min-height, or insert it at the bottom.
Unstable ad slots — ad units that change size after loading cause shifts. Fix: reserve the expected ad size using CSS dimensions on the container.
Animations and transitions — CSS animations that animate properties other than transform and opacity can cause layout recalculations. Always use transform: translate() instead of top/left for movement animations.
How to Measure Core Web Vitals
Several tools help you measure and diagnose Core Web Vitals:
Google PageSpeed Insights (pagespeed.web.dev) — the most important tool. Shows both real-world CrUX data (from actual Chrome users) and Lighthouse lab data. Identifies specific elements causing poor scores with actionable suggestions.
Google Search Console — the Core Web Vitals report shows CrUX data aggregated across all pages on your site, highlighting which pages have Poor, Needs Improvement or Good scores. This is the data Google actually uses for rankings.
Chrome DevTools — the Performance panel lets you record and analyze page loading frame by frame. The Experience section specifically highlights layout shifts and their causes.
Lighthouse — built into Chrome DevTools (Audits tab) and available as a CLI tool. Runs lab tests and scores your page across Performance, Accessibility, Best Practices and SEO.
web-vitals JavaScript library — add this small Google library to your site to measure real user CWV data in production and send it to your analytics.
The most important distinction: field data (from real users via CrUX) is what Google uses for rankings. Lab data (from Lighthouse) is a diagnostic approximation. A page might score 95 in Lighthouse but have poor field data due to third-party scripts that only load in real user environments.