What Are Core Web Vitals? (LCP, CLS, FCP, INP Explained)

Core Web Vitals are a set of metrics Google introduced in 2020 to measure real user experience on a webpage. They're part of the broader "page experience" signals Google uses for search ranking.

Three metrics make up the official Core Web Vitals: LCP (loading), CLS (visual stability), and INP (interactivity). Two more — FCP and TTFB — are auxiliary metrics that help diagnose issues but aren't themselves ranking signals.

LCP measures how quickly the largest visible content element on the page renders. Usually a hero image, headline, or video.

Target: under 2.5 seconds (Good). 2.5–4.0 is "Needs Improvement." Above 4.0 is "Poor."

Common causes of slow LCP: large unoptimized images, slow server response time (high TTFB), render-blocking JavaScript or CSS, lazy-loaded hero images.

Fixes: compress and resize hero images, use modern image formats (AVIF, WebP), preload the hero image with `<link rel="preload">`, reduce server-side latency, eliminate render-blocking resources.

CLS measures unexpected movement of elements as the page loads. If you've ever tried to click a link and had it shift down right as your finger landed, you've experienced bad CLS.

CLS is unitless — combines impact and distance. Target: under 0.1 (Good). 0.1–0.25 is "Needs Improvement." Above 0.25 is "Poor."

Common causes: images without width/height, ads that load and push content down, web fonts that swap and resize text, late-loading widgets.

Fixes: always set explicit width/height on images, reserve space for ads with min-height, use `font-display: optional`, avoid inserting content above existing content after load.

INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. It measures the latency of all user interactions — clicks, taps, key presses — and reports the longest interaction.

Target: under 200 ms (Good). 200–500 ms is "Needs Improvement." Above 500 ms is "Poor."

Common causes: heavy JavaScript handlers blocking the main thread, third-party scripts in click handlers, expensive React re-renders, large lists rendering synchronously.

Fixes: break up long-running JavaScript with `requestIdleCallback`, virtualize long lists, debounce expensive handlers, defer non-critical work, audit third-party scripts.

FCP (First Contentful Paint) measures when the first piece of content renders. Leading indicator of LCP. Target: under 1.8s.

TTFB (Time to First Byte) measures how long the server takes to send the first byte. High TTFB usually indicates slow database queries or geographic distance from your CDN. Target: under 800ms.

These aren't ranking signals on their own, but improving them usually improves LCP — which IS a ranking signal.

Google uses Core Web Vitals as ranking signals for organic search. Pages that fail Core Web Vitals rank lower than equivalent pages that pass — all else being equal.

The signal is weak in absolute terms; content quality, backlinks, and intent match still dominate. But Web Vitals act as a tiebreaker: when two pages compete with similar content, the faster one wins.

For ecommerce, SaaS, and content sites where SEO drives most of the traffic, this tiebreaker compounds across thousands of pages.

Field data (real-user) matters more than lab data for ranking. Privacy-friendly analytics tools like Sleek collect Web Vitals from real visitors and surface them per page.