Google introduced Core Web Vitals in 2021 as part of its Page Experience update. The goal: replace vague speed metrics with measurements that reflect how actual users perceive page quality. Today, three signals form the Core Web Vitals set, and Google evaluates every URL on your site against them.
The Three Core Web Vitals Explained
Largest Contentful Paint (LCP)
LCP measures how long the browser takes to render the largest visible element in the viewport. That element is usually a hero image, a large heading, or a background video thumbnail. Google considers a score under 2.5 seconds good, 2.5 to 4 seconds needs improvement, and anything above 4 seconds poor.
Slow servers, render-blocking JavaScript, and large uncompressed images are the three most common causes of poor LCP. A content delivery network (CDN), server-side caching, and next-generation image formats like WebP and AVIF all push LCP scores into the green zone.
Interaction to Next Paint (INP)
INP replaced First Input Delay in March 2024. Where FID only measured the delay before the browser responded to the very first click, INP measures the full response time of every interaction throughout the page lifecycle. It reports the worst-case interaction delay as the page score.
A good INP score sits below 200 milliseconds. Scores between 200 and 500 milliseconds need improvement. Scores above 500 milliseconds signal that the main thread blocks interactions, leaving users waiting for buttons and links to respond. Heavy third-party scripts, large JavaScript bundles, and synchronous DOM operations all push INP scores up.
Cumulative Layout Shift (CLS)
CLS tracks unexpected visual movement. When a font loads late and pushes text down, or when an ad banner appears above a button the user is about to click, that movement registers as layout shift. Google scores CLS on a scale where 0.1 or below is good, 0.1 to 0.25 needs improvement, and anything above 0.25 is poor.
Reserve space for images and embeds with explicit width and height attributes. Preload critical fonts so they render before content paints. Avoid inserting content above existing elements after the page loads.
How Google Uses Core Web Vitals as Ranking Signals
Google collects Core Web Vitals data from Chrome users through the Chrome User Experience Report (CrUX). When enough real-user data exists for a URL, Google uses that data in ranking decisions. Pages with good scores across all three metrics receive a small but measurable ranking boost relative to pages with poor scores, assuming content quality is equal.
The boost is a tiebreaker, not a shortcut. A page with excellent content and mediocre Core Web Vitals scores still outranks a technically perfect page with thin content. However, when two pages offer comparable content quality, Core Web Vitals scores become a meaningful differentiator.
LCP Optimisation: Step by Step
Start with your server response time. Use Time to First Byte (TTFB) as a proxy. A TTFB above 600 milliseconds on a cold request signals that server configuration or hosting quality limits LCP before the browser even starts rendering.
Next, identify the LCP element. Chrome DevTools flags it in the Performance panel under the Timings track. Once you know whether the LCP element is an image or text, you can choose the right fix. For images, preload the LCP image using <link rel="preload" as="image"> in the document head and serve it in WebP or AVIF format at the correct display dimensions. For text-based LCP, eliminate render-blocking stylesheets by inlining critical CSS and deferring the rest.
INP Optimisation: Keeping the Main Thread Free
The main JavaScript thread handles everything: parsing HTML, running scripts, and responding to user input. When a long task occupies the main thread, clicks and keystrokes queue up and wait. Break long tasks into smaller chunks using setTimeout or the Scheduler API so the browser processes input between chunks.
Audit third-party scripts. Analytics platforms, chat widgets, and advertising tags often execute JavaScript on the main thread at unpredictable times. Load them with the async or defer attribute and consider using a web worker for processing that does not need DOM access.
CLS Optimisation: Eliminating Layout Surprises
Set explicit width and height attributes on every img and video element. Modern browsers use these values to reserve layout space before the media file loads, preventing the shift that occurs when content pops in and pushes everything down.
For web fonts, add font-display: optional or font-display: swap to your font face declarations. Preloading critical font files further reduces the window during which a fallback font occupies space before the correct typeface loads.
Tools for Measuring Core Web Vitals
PageSpeed Insights combines lab data from Lighthouse with field data from CrUX, giving you both simulated scores and real user measurements in one place. Web.dev/measure runs Lighthouse directly in the browser. The Chrome DevTools Performance panel lets you record and replay interactions to diagnose INP issues at the function level.
Google Search Console is the most important tool for site-wide monitoring because it surfaces URL groups with problems at scale. Fix the issue pattern once and the entire group improves, rather than optimising individual URLs manually.
Why Core Web Vitals Matter Beyond Rankings
Better Core Web Vitals scores do not just improve rankings. They reduce bounce rates because pages load quickly and respond to clicks without lag. They increase conversion rates because users complete purchases and form submissions on pages that feel fast and stable. They also reduce server load because optimising images and deferring scripts lowers bandwidth consumption.
Every millisecond you shave off LCP and every layout shift you eliminate translates into a better user experience that Google rewards and users return to. Treat Core Web Vitals as a continuous quality programme, not a one-time fix.