Complete Guide to Core Web Vitals: LCP, CLS and INP Explained

Core Web Vitals are a set of metrics defined by Google to measure the quality of user experience on the web. Since their integration as a ranking signal in 2021, these indicators have become essential for any site owner concerned with organic search performance.

In 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP), making the responsiveness measurement more demanding and more representative of the actual user experience. This guide explains each metric in detail, how to measure it, and how to improve it.

What Are Core Web Vitals?

Core Web Vitals are three user-centric metrics that evaluate the fundamental aspects of web experience: loading speed (LCP), visual stability (CLS), and interactive responsiveness (INP). Google uses these metrics as ranking factors in its search results.

These metrics are measured from field data (real user metrics) collected by the Chrome User Experience Report (CrUX). This means that the actual performance experienced by your visitors is what counts, not just lab test results.

LCP: Largest Contentful Paint

Largest Contentful Paint measures the time needed to display the largest content element visible in the viewport. This is typically a hero image, video, or large text block. LCP reflects the user's perception of loading speed.

LCP Performance Thresholds

• Good: 2.5 seconds or less
• Needs Improvement: between 2.5 and 4 seconds
• Poor: more than 4 seconds

Common Causes of Poor LCP

Several factors can degrade your LCP: a slow server response time (high TTFB), render-blocking CSS and JavaScript resources, slow loading of images and web fonts, and client-side rendering delaying content display.

How to Improve Your LCP

• Optimize your server: use a CDN, configure HTTP caching, enable gzip/Brotli compression
• Preload critical resources with <link rel="preload"> for LCP images, fonts, and essential CSS
• Convert images to WebP or AVIF format and use responsive sizing with srcset
• Eliminate render-blocking CSS and JavaScript by deferring non-critical resources
• Use server-side rendering (SSR) or static generation to display content faster

CLS: Cumulative Layout Shift

Cumulative Layout Shift measures the visual stability of a page by quantifying unexpected layout shifts. A high CLS means page elements move unexpectedly during loading, creating a frustrating experience for the user.

Each layout shift is calculated by multiplying the impact fraction (proportion of viewport affected) by the distance fraction (distance of the movement). CLS is the sum of individual shift scores grouped by session windows.

CLS Performance Thresholds

• Good: 0.1 or less
• Needs Improvement: between 0.1 and 0.25
• Poor: more than 0.25

Common Causes of Poor CLS

Layout shifts are mainly caused by: images and videos without explicit dimensions, dynamically loading ads and iframes, web fonts causing FOIT/FOUT (flash of invisible or unstyled text), and dynamically injected content above existing content.

How to Improve Your CLS

• Always set width and height attributes on images and videos or use the CSS aspect-ratio property
• Reserve space for ads and iframes with fixed-size containers
• Use font-display: swap combined with font preloading to minimize typographic shifts
• Avoid injecting content above existing content unless in response to a user interaction
• Use CSS contain and content-visibility properties to isolate layout calculations

INP: Interaction to Next Paint

Interaction to Next Paint officially replaced FID in March 2024. Unlike FID which only measured the delay of the first interaction, INP evaluates overall page responsiveness by measuring the latency of all interactions (clicks, taps, key presses) and retaining a representative value near the worst case.

INP measures the time between when the user interacts and when the browser displays the resulting visual update. It includes input delay, processing time, and presentation delay.

INP Performance Thresholds

• Good: 200 milliseconds or less
• Needs Improvement: between 200 and 500 milliseconds
• Poor: more than 500 milliseconds

How to Improve Your INP

• Break up long JavaScript tasks into smaller ones using requestIdleCallback or scheduler.yield()
• Minimize main thread work by deferring non-essential JavaScript
• Reduce DOM size: a large DOM increases style computation and layout time
• Use event delegation and avoid expensive event handlers
• Optimize style and layout recalculations by batching DOM reads and writes

How to Measure Core Web Vitals

Several tools allow you to measure your Core Web Vitals, each with its own characteristics. For a complete picture, it is recommended to combine field data (real user metrics) and lab data. For a first snapshot, our free speed test measures the LCP and CLS of a page in the lab (Lighthouse) in a few tens of seconds. INP is a field metric: read it in Search Console or in CrUX data, not in a lab test.

• Google Search Console: dedicated Core Web Vitals report with field data from your real users
• PageSpeed Insights: combines field data (CrUX) and lab data (Lighthouse) for a specific URL
• Chrome DevTools: Performance tab for detailed analysis of page behavior in the lab
• Web Vitals Extension: Chrome extension that displays Core Web Vitals in real-time during browsing
• CrUX Dashboard: comprehensive dashboard based on Chrome User Experience Report data

The Impact of Core Web Vitals on SEO

Core Web Vitals are part of Google's Page Experience signals, alongside mobile optimization, HTTPS, and the absence of intrusive interstitials. While content relevance remains the primary ranking factor, Core Web Vitals can make the difference between two pages of similar content quality.

Beyond ranking, good web performance has a direct impact on business metrics: reduced bounce rate, increased time on site, improved conversion rates, and enhanced user satisfaction.

Conclusion

Core Web Vitals are not just a technical exercise to please Google. They are concrete indicators of the quality of experience you offer your visitors. By optimizing your LCP, CLS, and INP, you simultaneously improve your organic search performance and your business results.

The fixes, from server to browser, HTTP cache, images, fonts, third-party scripts, CSS, are in the complete web performance guide, with what Google documents for each.

Performance is one of the eight checks of a technical audit. The complete technical SEO guide places Core Web Vitals alongside crawling, indexing, rendering and internal linking, with the fix for each point.

At SEOForge, we systematically include Core Web Vitals analysis in our technical SEO audits. Our approach combines your users' field data with concrete, prioritized recommendations to improve each metric. If your scores are already in the red, our Core Web Vitals optimisation service fixes the causes directly in your code.

Get your Core Web Vitals analyzed by SEOForge