Core Web Vitals Explained: Fix LCP, CLS & INP Fast

What Core Web Vitals are

Core Web Vitals (CWV) are a set of three specific page experience metrics that Google uses as important ranking signals in its search algorithm. Unlike traditional performance tests that only focus on raw loading speed or lab-based simulations, Core Web Vitals are designed to measure real-world user experience — meaning how a page actually performs for real users on real devices, under real network conditions such as slow mobile data, unstable Wi-Fi, or high traffic loads.

These metrics help Google understand whether a website provides a smooth, stable, and responsive experience. Since May 2021, Core Web Vitals have been officially included as a ranking factor in Google Search, which means they directly influence where a page appears in search results. Pages that fail to meet the recommended thresholds may rank lower than competing pages that offer a better user experience, even if their content quality is similar.

Core Web Vitals are made up of three key metrics: Largest Contentful Paint (LCP), which measures loading performance and how quickly the main content becomes visible; Cumulative Layout Shift (CLS), which measures visual stability and checks whether page elements move unexpectedly while loading; and Interaction to Next Paint (INP), which measures responsiveness and how quickly a page reacts to user interactions like clicks, taps, or typing.

Together, these metrics provide a complete picture of user experience from start to finish — from the moment a page begins loading to the moment a user interacts with it. A website that performs well in Core Web Vitals not only improves its chances of ranking higher in search engines but also increases user satisfaction, reduces bounce rates, and encourages longer engagement.

Improving Core Web Vitals typically involves optimizing images, reducing unnecessary JavaScript, improving server response times, and ensuring layout stability across all devices. In short, CWV bridges the gap between technical SEO and real user experience, making it a critical factor for modern websites that want to succeed in organic search.

LCP — Largest Contentful Paint

LCP measures the time from when a user first navigates to a page until the largest visible content element (usually the hero image, heading text, or above-fold video) finishes loading. It is Google's best proxy for "how long until the user sees the main content."

Thresholds: Good = under 2.5 seconds. Needs Improvement = 2.5–4 seconds. Poor = over 4 seconds.

The most common LCP elements: hero images, large text blocks, video poster images, and above-fold background images loaded via CSS. The most common causes of poor LCP:

• Large, uncompressed hero images — the single most common LCP failure on most websites
• Render-blocking JavaScript and CSS that delay the page from painting
• Slow server response times (TTFB over 600ms)
• Lazy-loaded hero images (the LCP element should never be lazy-loaded)

Quick fixes: Compress and convert your hero image to WebP. Add fetchpriority="high" to your LCP image tag. Remove render-blocking resources. Enable server-side caching to improve TTFB.

CLS — Cumulative Layout Shift

CLS measures visual instability — how much page elements unexpectedly move around as the page loads. A button that shifts down when an ad loads above it, text that jumps when a font loads, or an image that pushes content down when it renders — these all contribute to your CLS score. High CLS means users accidentally click the wrong element or lose their reading position.

Thresholds: Good = under 0.1. Needs Improvement = 0.1–0.25. Poor = over 0.25.

Most common causes of poor CLS:

• Images without declared width and height attributes — the browser does not know how much space to reserve, so content shifts when the image loads
• Ads, embeds, or iframes without reserved space
• Web fonts causing FOUT (Flash of Unstyled Text) that reshuffles layout
• Dynamically injected content (cookie banners, chat widgets) pushing page content down

Quick fixes: Add explicit width and height to all images and videos. Reserve space for ads and embeds with CSS aspect-ratio or min-height. Use font-display: swap for web fonts to prevent invisible text. Ensure injected content (banners, widgets) does not push existing content.

INP — Interaction to Next Paint

INP (which replaced FID in March 2024) measures how quickly a page responds to user interactions — taps, clicks, and key presses. It captures the worst interaction delay across the full page visit, not just the first interaction. A page that responds instantly to most clicks but occasionally freezes for 500ms when a heavy JavaScript function runs will have a poor INP score.

Thresholds: Good = under 200ms. Needs Improvement = 200–500ms. Poor = over 500ms.

Most common causes of poor INP:

• Long JavaScript tasks (over 50ms) that block the main thread from responding to user input
• Large third-party scripts (analytics, advertising, chat widgets) executing during page interaction
• Unoptimised event handlers that do too much work on user input

Quick fixes: Audit and remove unnecessary third-party scripts. Break long JavaScript tasks into smaller chunks using setTimeout or scheduler.yield. Defer non-critical JavaScript until after page interaction.

Where to check your Core Web Vitals