Core Web Vitals Explained: How to Fix LCP, INP, and CLS

Core Web Vitals Explained: How to Fix LCP, INP, and CLS

Core Web Vitals are Google's set of metrics that measure real-world user experience on your website. They directly influence search rankings — Google uses them as ranking signals, meaning slow or unstable pages can lose positions in search results even if their content is excellent. In 2024, Google replaced FID (First Input Delay) with INP (Interaction to Next Paint), making the current trio LCP, INP, and CLS.

This guide explains each metric in plain language, shows you how to measure your scores, and provides specific fixes for the most common problems.

What Are Core Web Vitals?

Core Web Vitals measure three aspects of user experience: loading performance (LCP), interactivity (INP), and visual stability (CLS). Google evaluates these metrics based on real user data collected through the Chrome User Experience Report (CrUX), not lab simulations. Your scores come from actual visitors to your site.

Google classifies scores into three categories: Good (green), Needs Improvement (yellow), and Poor (red). To pass Core Web Vitals, you need "Good" status on all three metrics.

LCP: Largest Contentful Paint

What It Measures

LCP measures how long it takes for the largest content element in the viewport to render. This is usually a hero image, a large text block, or a video. LCP answers the question: "When does the user see the main content of the page?"

Good Scores

• Good: 2.5 seconds or less
• Needs Improvement: 2.5 to 4.0 seconds
• Poor: Over 4.0 seconds

Common Causes of Slow LCP

• Unoptimized images: Large PNG/JPG files that should be WebP or AVIF format. Hero images over 500KB are almost always a problem.
• Render-blocking resources: CSS and JavaScript files that prevent the page from rendering until they download and execute.
• Slow server response times: If your server takes more than 600ms to respond (Time to First Byte), LCP will suffer.
• Client-side rendering: JavaScript frameworks that render content on the client instead of the server delay when content appears.

How to Fix LCP

• Optimize images: Use modern formats (WebP, AVIF), compress aggressively, set explicit width and height attributes, and implement lazy loading for below-the-fold images.
• Use a CDN: A content delivery network serves your assets from locations closer to your users, reducing download times globally.
• Preload critical resources: Add rel="preload" for hero images and critical fonts so the browser starts downloading them immediately.
• Implement server-side rendering or static generation: Frameworks like Next.js with static generation (output: 'standalone') provide pre-rendered HTML that displays immediately.
• Optimize your server: Use HTTP/2 or HTTP/3, enable gzip or Brotli compression, and ensure your hosting has adequate resources.

INP: Interaction to Next Paint

What It Measures

INP measures the latency of all user interactions throughout the entire page lifecycle — clicks, taps, and keyboard presses. It tracks how quickly the page responds visually after a user interacts with it. INP replaced FID because FID only measured the first interaction, while INP captures the full experience.

Good Scores

• Good: 200 milliseconds or less
• Needs Improvement: 200 to 500 milliseconds
• Poor: Over 500 milliseconds

Common Causes of Poor INP

• Heavy JavaScript execution: Long tasks that block the main thread for more than 50ms delay visual responses to user input.
• Third-party scripts: Analytics, ads, chat widgets, and tracking pixels can hijack the main thread and cause interaction delays.
• Complex event handlers: Click handlers that perform expensive calculations or DOM manipulation create noticeable delays.
• Large DOM trees: Pages with thousands of DOM elements take longer to update visually after interactions.

How to Fix INP

• Break up long tasks: Use requestIdleCallback or scheduler.yield() to split long JavaScript tasks into smaller chunks that do not block interaction.
• Defer non-critical JavaScript: Load analytics, chat widgets, and non-essential scripts after the page becomes interactive.
• Use web workers: Move expensive computations off the main thread to a web worker so interactions remain responsive.
• Audit third-party scripts: Remove or defer any third-party scripts that are not essential. Each script adds potential interaction delay.
• Minimize main thread work: Reduce DOM complexity, avoid forced layout recalculations (layout thrashing), and batch DOM updates.

CLS: Cumulative Layout Shift

What It Measures

CLS measures the sum of all unexpected layout shifts that occur during the lifespan of a page. A layout shift happens when a visible element moves from one position to another. CLS captures how stable the page feels — high CLS means elements jump around, which is frustrating and causes misclicks.

Good Scores

• Good: 0.1 or less
• Needs Improvement: 0.1 to 0.25
• Poor: Over 0.25

Common Causes of High CLS

• Images without dimensions: When images lack explicit width and height attributes, the browser cannot reserve space for them, causing content below to shift when images load.
• Late-loading ads and embeds: Third-party content that loads after the page renders pushes existing content down.
• Dynamically injected content: Content added by JavaScript after initial render (toast notifications, banners, popups) shifts existing elements.
• Web fonts causing FOIT/FOUT: Flash of Invisible Text or Flash of Unstyled Text shifts content when custom fonts load.

How to Fix CLS

• Set explicit dimensions: Always include width and height attributes on images and videos. In modern CSS, use aspect-ratio to reserve space responsively.
• Reserve space for dynamic content: Pre-allocate space for ads, embeds, and late-loading components using CSS min-height or skeleton screens.
• Use font-display: swap: This CSS property ensures text renders immediately with a fallback font, then swaps to your custom font when it loads — without shifting layout.
• Preload critical fonts: Use rel="preload" for your primary web fonts so they load earlier in the page lifecycle.
• Transform instead of shift: Use CSS transforms (translate, scale) for animations instead of properties that trigger layout shifts (top, left, width, height).

How to Measure Core Web Vitals

• Google Search Console: The Core Web Vitals report shows real-user data for your site. It groups URLs by status (Good, Needs Improvement, Poor) for each metric.
• PageSpeed Insights: Enter any URL to see both lab data (Lighthouse) and field data (CrUX). The lab data helps identify specific issues; the field data shows real-user performance.
• Chrome DevTools: The Performance panel and Lighthouse tab provide detailed lab analysis. Use the Performance Insights feature for guided recommendations.
• web.dev/measure: A simple tool that runs Lighthouse audits and provides actionable suggestions for improvement.

Check Your Page Speed

Use our free page speed optimization checklist to systematically identify and fix performance issues. The checklist covers all Core Web Vitals with specific actions prioritized by impact — so you fix the biggest problems first and see results quickly.