What Are Core Web Vitals?
Core Web Vitals are three specific performance metrics Google uses to measure real-world user experience. They became a direct ranking signal in May 2021. Despite that, most sites still score poorly on at least one of them.
The three metrics: - **LCP (Largest Contentful Paint)** — How long until the main content loads - **CLS (Cumulative Layout Shift)** — How much the page jumps around during load - **TBT (Total Blocking Time)** — How long the main thread is blocked from user input
LCP — Largest Contentful Paint
What it measures: The time from page navigation to when the largest visible element (usually a hero image or headline) is fully rendered.
Target: Under 2.5 seconds. 4+ seconds is "poor."
Why sites fail: Unoptimized images are the #1 cause. A 2MB PNG hero image that could be a 200KB WebP will kill your LCP. Other causes: render-blocking JavaScript, slow server response times, no preload hints.
How to fix it: - Convert images to WebP or AVIF format - Add 'loading="eager"' and 'fetchpriority="high"' to your hero image - Add a '<link rel="preload">' tag for your LCP image in the document head - Enable server-side caching and CDN delivery - Defer non-critical JavaScript with 'defer' or 'async' attributes
A well-optimized page should hit LCP under 1.5 seconds. It's achievable for almost any site.
CLS — Cumulative Layout Shift
What it measures: The total amount of unexpected visual movement during the page's lifecycle. Scored 0 (no shift) to 1+ (catastrophic).
Target: Under 0.1. Above 0.25 is "poor."
Why sites fail: Images and embeds without explicit dimensions. Ads injecting content above existing elements. Custom web fonts swapping after load.
How to fix it: - Always specify 'width' and 'height' on '<img>' tags — even if you override them with CSS - Reserve space for ads and embeds before they load - Use 'font-display: optional' or 'font-display: swap' with a system font fallback that closely matches your web font - Avoid inserting content above existing content after page load
CLS is often the easiest metric to fix once you know where the shifts are coming from. Chrome DevTools' Performance tab shows exactly which elements are shifting.
TBT — Total Blocking Time
What it measures: The total time the main thread was blocked for more than 50ms, preventing user interactions. This is the desktop proxy for FID (First Input Delay) on mobile.
Target: Under 200ms. Above 600ms is "poor."
Why sites fail: Too much JavaScript executing on the main thread during page load. Third-party scripts (analytics, chat widgets, ad networks) are the primary culprit. Large JavaScript bundles that haven't been code-split.
How to fix it: - Audit and remove unused JavaScript. Use Chrome's Coverage tool. - Load third-party scripts after the main content with 'defer' or move them to 'requestIdleCallback' - Code-split your JavaScript bundles — only load what's needed for the current page - Move JavaScript execution off the main thread with Web Workers for heavy computations
Checking Your Scores
Run your site through Google PageSpeed Insights (free) or use FORGE to scan your site and get an instant breakdown of all three metrics alongside your full site health score. Both use the same Lighthouse engine.
The difference: FORGE shows you the fixes alongside the scores, in one place.
The Ranking Impact
Google's research shows pages in the "good" range for all three Core Web Vitals are 24% less likely to abandon a page load than pages that fail them. The ranking impact is real — but the conversion impact is arguably bigger.
Fix your Core Web Vitals. Your bounce rate will drop before your rankings improve.