Core Web Vitals: The Complete Guide for Website Owners
Google uses Core Web Vitals as a ranking factor. But what are LCP, CLS and INP — and what can you actually do to improve them? This guide explains everything without the jargon.
What are Core Web Vitals and why did Google add them as a ranking factor?
Core Web Vitals are a set of specific metrics that Google uses to measure the user experience quality of a web page — focusing on loading performance, visual stability and responsiveness. Google introduced them as a ranking signal in 2021 through the "Page Experience" update.
The reasoning was straightforward: fast, stable, responsive pages keep users engaged. Pages that shift their layout while loading or take 5 seconds to become interactive frustrate users and lead to high bounce rates. Google wants to surface pages that provide genuinely good experiences.
Core Web Vitals are measured using real user data collected through the Chrome browser (the Chrome User Experience Report, or CrUX). This is important: your scores reflect how actual visitors experienced your page, not just a lab test. You need sufficient traffic for field data to be available.
LCP (Largest Contentful Paint) — what it is and how to improve it
LCP measures how long it takes for the largest visible element on the page to fully render. This is almost always your hero image, a large heading, or a background image. The threshold is 2.5 seconds or less for a "good" score.
LCP is the Core Web Vital most directly tied to perceived load speed — it's the moment when users feel "the page has loaded." The most common causes of poor LCP:
- Slow server response (TTFB) — if the server takes 2 seconds to start responding, LCP can't possibly be under 2.5 seconds
- Render-blocking resources — CSS and JavaScript in
<head>that must finish before the browser renders anything - Large, unoptimized hero images — a 4MB image will always be slow regardless of other optimizations
- Lazy-loading the LCP element — adding
loading="lazy"to the hero image delays it; the LCP element should never be lazy-loaded
The highest-impact fix for most sites is to preload the LCP image using <link rel="preload"> and ensure it's served in WebP format at an appropriate size.
CLS (Cumulative Layout Shift) — what causes it and how to fix it
CLS measures unexpected visual movement of page elements as the page loads. If a button suddenly jumps 200 pixels because an ad loaded above it, that's a layout shift. The cumulative score reflects all significant shifts during the page load. A score of 0.1 or less is "good."
The most common causes:
- Images without dimensions — if an image has no
widthandheightattributes, the browser doesn't reserve space for it; the page reflows when the image loads - Ads and embeds — late-loading ads push content down
- Web fonts causing FOUT — text rendering in a fallback font then jumping to the webfont causes layout shifts
- Dynamically injected content — banners, cookie notices and chat widgets that appear above existing content
The fix for most CLS issues is simple: always specify dimensions on images and media, and ensure any dynamically injected content (ads, banners) has reserved space.
INP (Interaction to Next Paint) — the newest vital
INP replaced FID (First Input Delay) in March 2024. While FID only measured the delay before the browser started processing the first user interaction, INP measures the full response time — from when the user clicks or taps to when the visual response appears. The threshold is 200ms for a "good" score.
INP problems are most common on JavaScript-heavy pages where the main thread is busy doing other work when the user interacts. Common causes include complex event handlers, large render updates triggered by interactions, and heavy third-party scripts running on the main thread.
How to track Core Web Vitals over time
One-off measurements don't give you the full picture. You need to track trends — especially after deployments, plugin updates or content changes. Tools for this:
- Google Search Console — shows field data (real user CrUX data) aggregated by page group, updated weekly
- PageSpeed Insights — shows both lab data (Lighthouse) and field data for specific URLs
- Sitekeeper — runs Lighthouse daily and shows score trends over time with change alerts
Field data has a delay (Google CrUX data is 28-day rolling average). Lab data from Lighthouse is immediate. Both matter: lab data shows what's theoretically possible; field data shows what real users experience.
Track Core Web Vitals daily with Sitekeeper
Sitekeeper runs Lighthouse checks daily and charts your Performance scores over time. See trends, catch regressions, and confirm your optimizations are working. 30-day free trial.
Start free trial →Frequently asked questions
Are Core Web Vitals the same as PageSpeed score?
No, but they're closely related. Core Web Vitals (LCP, CLS, INP) are specific metrics that contribute to the Lighthouse Performance score. The Performance score also includes other metrics like FCP and Speed Index. All three Core Web Vitals are important Google ranking signals.
Do Core Web Vitals affect my rankings if I don't have much traffic?
Google uses field data (Chrome User Experience Report) for Core Web Vitals rankings. If your site doesn't have enough CrUX data, Google falls back to lab data. Either way, improving performance is worthwhile — even if the direct ranking impact is limited, faster pages always convert better.
What replaced FID in Core Web Vitals?
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. INP is a more comprehensive measure of responsiveness — it measures the full response latency for all user interactions during a page visit, not just the first one.
My Lighthouse score is good but Google Search Console shows poor Core Web Vitals — why?
Lighthouse (lab data) tests in a controlled environment with a simulated device. Search Console shows field data from real Chrome users, who may have slower devices, slower connections, or interact differently. Both are useful, but field data reflects actual user experience.
What is the quickest way to improve CLS?
Add explicit width and height attributes to all images and video elements. This allows the browser to reserve space before the media loads, preventing the layout shifts that cause CLS. It's a single-line change per image and often dramatically improves the score.