Core Web Vitals Explained: How to Pass LCP, INP and CLS for Free

What LCP, INP and CLS measure, the targets your pages must hit, the difference between field and lab data, and practical fixes for each metric.

Guide graphic: Core Web Vitals LCP, INP and CLS explained

Table of Contents

Core Web Vitals are Google’s three measures of how a page feels to real visitors: LCP (how fast the main content appears, good within 2.5 seconds), INP (how quickly the page reacts to taps and clicks, good within 200 milliseconds) and CLS (how much the layout jumps, good at 0.1 or less). A page passes when at least 75 percent of visits meet all three targets. You can check them for free and fix most problems with image, script and layout changes.

Key takeaways
  • LCP measures loading, INP responsiveness and CLS visual stability.
  • Targets: LCP 2.5 s, INP 200 ms, CLS 0.1, at the 75th percentile of real visits.
  • Real-user (field) data decides how Google sees you; lab data helps you find the cause.
  • Big images, too much JavaScript and missing image sizes cause most failures.
  • Check your scores free with the Free SEO Audit Tool.

Why do Core Web Vitals matter for a small business?

Imagine a customer on a phone with a weak signal, standing outside a restaurant, searching for the menu. Your page shows a blank screen for four seconds, then the menu button jumps down just as they tap it. They go back and open the next result. Core Web Vitals put numbers on exactly that experience.

Google uses them as part of its page experience signals. They rarely beat great content on their own, but when two pages are similar, the faster one has an edge, and it keeps more of the visitors it gets.

What do LCP, INP and CLS measure?

MetricMeasuresGoodPoor
LCP (Largest Contentful Paint)When the largest image or text block on screen appears2.5 s or lessOver 4 s
INP (Interaction to Next Paint)How long the page takes to respond after a tap, click or key press200 ms or lessOver 500 ms
CLS (Cumulative Layout Shift)How much visible content moves unexpectedly0.1 or lessOver 0.25

INP replaced the older FID metric as the responsiveness measure in 2024, so older guides that mention FID are out of date.

What is the difference between field data and lab data?

Field data comes from real Chrome users who agreed to share usage statistics, collected in the Chrome User Experience Report over 28 days. It is what Google uses to assess your page. Small or new pages often have no field data yet.

Lab data comes from a single simulated test, usually on a mid-range phone with a slow connection. It is repeatable, so it is ideal for finding causes and checking fixes. Lab tests cannot measure INP directly; they use Total Blocking Time as a stand-in.

The free audit tool shows both when they exist, together with the biggest savings Google suggests for your page.

How do you fix a slow LCP?

  1. Find the LCP elementIt is usually the hero image, a slider or a big heading. The PageSpeed report names it.
  2. Shrink the imageResize it to the size it is displayed at and compress it to WebP. Our free Image Compressor works in the browser.
  3. Load it earlyNever lazy load the top image. Add fetchpriority=”high” or a preload so the browser fetches it first.
  4. Cut server timeUse page caching and a CDN so the HTML arrives in well under a second.
  5. Remove render-blocking filesDefer scripts that are not needed for the first screen and trim unused CSS.

How do you fix a poor INP?

  • Remove plugins, apps and third-party widgets you do not need; each adds JavaScript to every page.
  • Delay chat widgets, heatmaps and social embeds until the visitor interacts or scrolls.
  • Avoid heavy animations and sliders that run constantly on mobile.
  • Developers: break long JavaScript tasks into smaller pieces and keep click handlers light.

How do you fix a high CLS?

  • Give every image, video and iframe a width and height (or a CSS aspect ratio) so the browser reserves space.
  • Reserve fixed space for ads, cookie banners and embeds instead of letting them push content down.
  • Load web fonts with font-display: swap and preload the main font to limit text jumps.
  • Do not insert banners above existing content after the page has loaded.
On WordPress, a cache and optimisation plugin (WP Rocket or LiteSpeed Cache) plus an image plugin with WebP conversion fixes most Core Web Vitals problems in an afternoon. Our image optimisation guide walks through it.

How do you check Core Web Vitals for free?

Run your page through the Free SEO Audit Tool and pick mobile or desktop. The Speed panel shows real-user LCP, INP and CLS when Google has enough data, the lab test results, a screenshot of how Google renders the page and the top opportunities ranked by time saved. For a whole site, open the Core Web Vitals report in Google Search Console, which groups similar URLs together.

Sources

Frequently asked questions

What are good Core Web Vitals scores?

LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less, measured at the 75th percentile of real visits.

Do Core Web Vitals affect Google rankings?

Yes, as part of page experience, but they are a smaller factor than relevant, helpful content. Their bigger effect is on how many visitors stay.

What replaced FID?

INP (Interaction to Next Paint) replaced FID as the Core Web Vitals responsiveness metric in 2024.

Why does my page have no Core Web Vitals field data?

Google only reports field data when enough Chrome users visit the page. Use the lab test until traffic grows.

What is the fastest way to improve LCP?

Compress and resize the hero image, stop lazy loading it, preload it and turn on page caching.

Free toolTry the Free SEO Audit Tool

Free, no sign-up, works on any device.

Open the free tool →
Written by Tanvir H

WordPress and Elementor web designer at Tanvir WebXprt, Bangladesh, with 7+ years of experience and 650+ projects. Tanvir builds the free tools on this site and writes practical guides for creators, learners and small businesses.

Learn more

Guides for this tool

Built by Tanvir WebXprt

Want a tool, website or app like this for your business?

Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.

Website developmentWordPress, Elementor & e-commerce sitesfrom $899
Creative designWeb, graphic & brand identityfrom $220
SEO & paid adsRank on Google, run Meta & Google Adsfrom $300
Speed & fixesCore Web Vitals, bugs and upgradesCustom quote
  • 650+ projects
  • 7+ years
  • 4.9★ rating
  • Govt. registered freelancer

Contents

Was this helpful? Spread the word and share with your network!
Facebook
Pinterest
LinkedIn
Reddit
VK
X
Telegram
Threads
Tumblr
Email
WhatsApp
Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Article