Hook
I talk to business owners every week who spend $5,000 on a website redesign and then watch their Google rankings drop. They call me confused: "The site looks amazing. Why is Google punishing us?"
Nine times out of ten, the answer is Core Web Vitals. Google measures three specific things about how your website performs for real visitors, and those measurements directly affect where you show up in search results. The frustrating part? Most web designers never mention them.
I have spent 16 years building and optimizing websites for businesses, and I have watched Core Web Vitals go from a nice-to-have to a ranking factor that costs companies real money when ignored. This guide explains all three metrics in plain language, with zero code and zero jargon. You will know exactly what to measure, what "good" looks like, and what to tell your developer to fix.
TL;DR
- Core Web Vitals are three Google metrics that measure loading speed (LCP), responsiveness (INP), and visual stability (CLS).
- Poor scores hurt your Google rankings and your conversion rate. A 1-second delay in loading can cost 7% of conversions.
- You can check your scores for free using Google PageSpeed Insights in under 60 seconds.
- Fixing images and fonts usually handles 60-70% of LCP problems. Fixing layout shifts often takes a single CSS change.
- You do not need to rebuild your website. Targeted fixes on the worst metric first give you the biggest return.
Need a hand with your website or web app?
Free 30-min strategy call. I'll review your situation and give you a clear next step.
Table of contents
- What are Core Web Vitals?
- The three metrics explained
- LCP: how fast your page loads
- INP: how fast your site responds
- CLS: how stable your layout is
- Why these metrics affect your revenue
- How to check your scores (free, 60 seconds)
- How to improve Core Web Vitals
- Real-world case study: Cuez
- What to tell your developer
- FAQ
What are Core Web Vitals?
Core Web Vitals are three performance metrics that Google uses to measure how real people experience your website. They were introduced in 2020 and became an official Google ranking factor in 2021. Since then, Google has refined and updated them, but the core idea has stayed the same: if your site is slow, unresponsive, or visually jumpy, Google pushes you down in search results.
Think of it like a restaurant health inspection. The food might taste great (your content), the decor might be beautiful (your design), but if the kitchen fails the health check, the restaurant gets a lower rating. Core Web Vitals are Google's health inspection for websites.
There are only three metrics to worry about. Each one measures a different aspect of the visitor experience, and each one has a clear pass/fail threshold. If you meet all three, Google considers your site to have a "good" page experience. If you fail even one, it drags down your overall score.
Here is what they are at a glance:
| Metric | Measures | Good score | Think of it as... |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed | Under 2.5 seconds | How long until customers see your page |
| INP (Interaction to Next Paint) | Responsiveness | Under 200 milliseconds | How fast buttons and menus react |
| CLS (Cumulative Layout Shift) | Visual stability | Under 0.1 | Whether the page jumps around while loading |
The rest of this guide breaks each one down with real-world analogies, so you can understand what your developer is talking about when they mention these terms.
The three metrics explained
Each Core Web Vital targets a specific frustration that website visitors experience. Google chose these three because research showed they correlate most strongly with whether someone stays on a site or leaves.
I will explain each one with an analogy that has nothing to do with code.
LCP: how fast your page loads
LCP stands for Largest Contentful Paint. It measures how long it takes for the biggest visible element on your page to finish loading. That biggest element is usually your hero image, a large banner, or the main block of text above the fold.
The restaurant analogy
You walk into a restaurant, sit down, and wait for a menu. LCP is how long you wait before the menu arrives. If it takes 10 seconds, you are already annoyed. If it takes 2 seconds, you barely notice the wait.
Your website works the same way. When someone clicks a link to your homepage, LCP measures the gap between that click and the moment they can actually see your main content. Everything before that point is a blank or partially loaded screen.
What good looks like
| LCP score | Rating | What visitors experience |
|---|---|---|
| Under 2.5 seconds | Good | Page feels instant; visitors start reading immediately |
| 2.5 to 4.0 seconds | Needs improvement | Noticeable wait; some visitors start reaching for the back button |
| Over 4.0 seconds | Poor | Most mobile visitors have already left |
What causes bad LCP
The usual culprits are large, unoptimized images (a 4MB hero photo when a 200KB version would look identical), slow server response times, render-blocking scripts (code that forces the browser to stop and wait), and web fonts that take too long to load.
When I audit websites, unoptimized images account for the majority of LCP problems. A single hero image saved as a PNG instead of WebP format can add 2-3 seconds to your LCP. That is the difference between "good" and "poor" in Google's eyes.
INP: how fast your site responds
INP stands for Interaction to Next Paint. It replaced an older metric called FID (First Input Delay) in March 2024. INP measures how quickly your website responds when someone interacts with it. Clicking a button, tapping a menu, selecting a filter, submitting a form -- INP tracks all of these.
The elevator analogy
You press an elevator button. INP is the gap between pressing the button and seeing the light come on (or the doors start moving). If you press the button and nothing happens for a full second, you wonder if it is broken. You press it again. Maybe a third time.
That is exactly what happens on a slow website. A visitor clicks "Add to Cart" and nothing visible happens for 400 milliseconds. They click again. Now they have two items in their cart, or worse, they have navigated away because they thought the button was broken.
What good looks like
| INP score | Rating | What visitors experience |
|---|---|---|
| Under 200ms | Good | Interactions feel instant and responsive |
| 200 to 500ms | Needs improvement | Slight lag that visitors notice on mobile |
| Over 500ms | Poor | Buttons feel broken; forms feel stuck |
What causes bad INP
Heavy JavaScript is the primary offender. When your browser is busy executing code, it cannot respond to taps and clicks. Common causes: analytics scripts loading all at once, complex animations running in the background, third-party widgets (chat popups, social media embeds) blocking the main thread, and poorly written custom code that runs expensive calculations on every interaction.
INP is often the hardest metric to fix because it involves code optimization rather than simple configuration changes. But the impact on conversions is real. Research from Google's Chrome UX team found that sites with good INP scores see up to 22% fewer page abandonments compared to sites with poor INP.
CLS: how stable your layout is
CLS stands for Cumulative Layout Shift. It measures how much your page layout moves around unexpectedly while it loads and while visitors interact with it. Every time an element shifts position without the user doing anything to cause it, that counts against your CLS score.
The newspaper analogy
Imagine reading a newspaper article, and mid-sentence, an advertisement drops in above the paragraph you are reading, shoving the text down. You lose your place. You have to find where you were. It is disorienting and annoying.
That is CLS on a website. You are about to tap a "Read More" link, and an image loads above it, pushing the link down. You accidentally tap an ad instead. Or a cookie banner slides in, a font swaps and resizes text, or a lazy-loaded image pops in without reserved space.
What good looks like
| CLS score | Rating | What visitors experience |
|---|---|---|
| Under 0.1 | Good | Page feels solid and stable |
| 0.1 to 0.25 | Needs improvement | Occasional jarring shifts |
| Over 0.25 | Poor | Page constantly jumping; visitors misclick on wrong elements |
What causes bad CLS
Images and ads without defined dimensions are the top cause. When the browser does not know how tall an image will be, it renders the page, then shifts everything down once the image loads. Other common causes: fonts that load and swap (the text reflows in a different size), dynamically injected content above the viewport, and cookie consent banners that push page content down instead of overlaying it.
The good news about CLS is that it is often the easiest of the three metrics to fix. Adding width and height attributes to images, reserving space for ads, and preloading fonts can solve most CLS issues in a single deployment.
Why these metrics affect your revenue
Core Web Vitals impact your business in two measurable ways: search rankings and conversion rates.
Search rankings
Google has explicitly stated that Core Web Vitals are a ranking signal. In competitive markets where multiple pages have equally good content, Google uses page experience metrics as a tiebreaker. If you and your competitor both have strong content but your CLS is 0.35 and theirs is 0.05, they get the edge.
A 2021 study by Searchmetrics analyzing 2 million URLs found a correlation between good Core Web Vitals scores and higher search positions. Pages in the top 10 results had measurably better LCP, CLS, and FID (now INP) scores than pages on page 2 and beyond.
Conversion rates
Performance directly affects whether visitors become customers. Here are specific numbers:
- Vodafone improved LCP by 31% and saw an 8% increase in sales (source: web.dev case study, 2021).
- Yahoo! Japan reduced CLS by 0.2 and saw a 15% increase in page views per session (source: web.dev, 2022).
- A widely cited Akamai study found that a 100-millisecond delay in load time can decrease conversion rates by 7%.
I wrote a detailed breakdown of these speed-to-revenue connections in my website speed optimization guide, including the full cost-per-second calculation you can run for your own site.
Mobile matters most
Google uses mobile-first indexing, meaning Google primarily looks at the mobile version of your site for ranking decisions. Mobile devices are slower, have less memory, and operate on less reliable networks. A site that scores "good" on desktop can easily score "poor" on mobile. If you are only checking your site on your office laptop, you are probably missing the problem. More than 60% of web traffic now comes from mobile devices, according to Statcounter's 2025 data.
For specific mobile optimization techniques, my guide on mobile-friendly website design covers responsive design, touch targets, and mobile performance testing.
How to check your scores (free, 60 seconds)
You do not need to hire anyone to find out where you stand. Here is how to check your Core Web Vitals right now:
Step 1: Google PageSpeed Insights
Go to pagespeed.web.dev, paste your URL, and click "Analyze." Within 30 seconds you get scores for all three Core Web Vitals, plus recommendations ranked by impact.
The tool shows two types of data:
- Field data (top section): Real measurements from actual Chrome users visiting your site over the past 28 days. This is what Google actually uses for rankings.
- Lab data (bottom section): Simulated tests run at the time of your analysis. Useful for debugging, but not what Google uses for ranking.
If your site does not have enough traffic for field data, rely on lab data and fix any red or orange items.
Step 2: Google Search Console
If you have Google Search Console connected (and you should), go to "Core Web Vitals" under the "Experience" section. It shows you which URLs on your site are rated "Good," "Needs Improvement," or "Poor," grouped by issue type. This gives you the full picture across your entire site, not just one page.
Step 3: Prioritize
Check your most important pages first: homepage, top landing pages, product or service pages, and your contact page. Fix the worst-scoring metric on your highest-traffic pages before touching anything else.
How to improve Core Web Vitals
You do not need to rebuild your site. Most improvements are targeted fixes that address specific bottlenecks. Here is what to prioritize, ordered by typical impact.
Improving LCP (loading speed)
- Compress and resize images. Convert images to WebP or AVIF format. Serve appropriately sized images for each screen size. This single change fixes 60-70% of LCP problems.
- Use a CDN (Content Delivery Network). A CDN is a network of servers around the world that delivers your content from the location closest to each visitor. Think of it as opening branch offices instead of shipping everything from headquarters.
- Reduce server response time. If your hosting takes more than 600ms to respond, no amount of front-end optimization will save you. Upgrading from shared hosting to a managed platform often cuts this in half.
- Preload critical resources. Tell the browser to start loading your hero image and main font immediately, instead of waiting until it encounters them in the code.
Improving INP (responsiveness)
- Defer non-essential JavaScript. Analytics scripts, chat widgets, and social media embeds do not need to load before your visitor can interact with the page. Load them after the page becomes interactive.
- Break up long tasks. If you have JavaScript that runs for more than 50 milliseconds, the browser freezes during that time. Your developer can split these into smaller chunks that let the browser respond to clicks between tasks.
- Minimize third-party scripts. Every tracking pixel, A/B testing tool, and marketing tag adds weight. Audit what is actually running on your pages. I regularly find sites loading 15-20 third-party scripts when they are only actively using 5-6 of them.
Improving CLS (visual stability)
- Set image dimensions. Every
<img>tag should include width and height attributes so the browser reserves space before the image loads. - Reserve space for ads and embeds. If you have dynamic content that loads after the page renders, wrap it in a container with a fixed minimum height.
- Preload fonts. When a custom font loads late, the browser swaps from a fallback font to your custom font, causing text to reflow. Preloading prevents the swap.
- Avoid inserting content above existing content. Cookie banners, promotional bars, and notification banners should overlay the page, not push content down.
Real-world case study: Cuez
Let me show you what fixing performance looks like in practice. Cuez is a B2B SaaS platform I worked with that was experiencing serious performance problems. Their API responses (the behind-the-scenes data requests that power every page load) took 3 seconds on average. That 3-second API delay meant their LCP was terrible, their INP was sluggish because the interface could not update until data arrived, and users were leaving.
What I found
I ran a full codebase audit and found the typical accumulation of technical debt that happens when a product ships fast without performance reviews:
- Unused and outdated libraries still loading on every page
- Custom-written code that duplicated things the framework already handled natively
- Database queries that pulled far more data than the page actually needed
- Dependencies that had ballooned over time without anyone pruning them
What I did
Instead of rebuilding the application (the expensive option), I took a targeted approach:
- Removed unused libraries and outdated dependencies
- Replaced custom code with optimized framework built-ins
- Rewrote the most expensive database queries
- Reduced the overall dependency footprint
The result
API response times dropped from 3 seconds to 300 milliseconds. That is a 90% improvement. Pages that took 4+ seconds to become interactive were now loading in under 1 second. The business impact was immediate: lower bounce rates, higher engagement, and a team that could finally ship features without worrying about the site falling over.
The total cost of the optimization was a fraction of what a rebuild would have been. This is the approach I recommend to every business owner: measure first, fix the specific bottlenecks, and only rebuild when targeted fixes are not enough.
You can read the full speed optimization breakdown in my website speed guide, which includes the 10-point checklist I used on the Cuez project.
What to tell your developer
If you are not a developer yourself, here is exactly what to say to get Core Web Vitals fixed. Copy this list and send it to whoever manages your website:
- "Run PageSpeed Insights on our top 10 pages by traffic and send me the Core Web Vitals scores for each."
- "Identify which metric (LCP, INP, or CLS) is the worst across the site and fix that one first."
- "Convert all images to WebP format and add width/height attributes."
- "Defer all non-essential JavaScript including analytics and chat widgets."
- "Set up a monthly Core Web Vitals check so we catch regressions before they hurt rankings."
If you want a professional who speaks both performance and business, I have optimized websites for 250+ clients, from startups to enterprises. My website design and development service includes Core Web Vitals optimization as a standard part of every project. Or, if you want a focused performance audit of your current site, let's talk.
FAQ
What are Core Web Vitals in simple terms?
Core Web Vitals are three measurements Google uses to judge your website's user experience. They check how fast your page loads (LCP), how quickly it responds to clicks and taps (INP), and whether the layout stays stable or jumps around while loading (CLS). All three affect your Google search ranking.
Do Core Web Vitals really affect SEO rankings?
Yes. Google confirmed Core Web Vitals as an official ranking signal in 2021. They function as a tiebreaker: when two pages have similar content quality, the one with better Core Web Vitals scores ranks higher. Sites with poor scores risk losing positions to competitors with identical content but faster, more stable pages.
How do I check my Core Web Vitals score for free?
Go to pagespeed.web.dev, enter your URL, and click Analyze. You will see your LCP, INP, and CLS scores within 30 seconds. For a site-wide view, use Google Search Console under Experience, then Core Web Vitals. Both tools are free and require no technical knowledge to use.
What is a good LCP score?
Google considers an LCP under 2.5 seconds "good." Between 2.5 and 4 seconds is "needs improvement." Over 4 seconds is "poor." Most LCP problems come from unoptimized images. Converting images to WebP format and properly sizing them fixes the majority of LCP issues without any other changes.
How much does it cost to fix Core Web Vitals?
It depends on what is broken. Simple fixes like image optimization and adding dimensions can cost $500-$1,500 and take a day. More complex issues like JavaScript optimization or server upgrades typically run $2,000-$8,000. A full performance audit and fix from a senior engineer like myself starts at $2,000. The ROI is usually measurable within 4-6 weeks through improved rankings and conversion rates.
Author Bio
I'm Adriano Junior, a senior software engineer and consultant with 16 years of experience optimizing websites for speed, usability, and search performance. I led the Cuez performance optimization project that cut API response times by 90%, and I have delivered 250+ projects for clients across the US, Americas, and Europe. If your Core Web Vitals need attention, I can help you figure out what to fix and in what order. Schedule a conversation.
