Core Web Vitals: The complete guide
Core Web Vitals are Google's metrics for measuring real user experience. They directly impact your search rankings, conversion rates, and revenue. This guide shows you how to master each metric and turn performance into a competitive advantage.
Image from web.dev/articles/vitals
Current Core Web Vitals
- LCP Largest Contentful Paint
- INP Interaction to Next Paint
- CLS Cumulative Layout Shift
Good Thresholds
- LCP: Under 2.5s
- INP: Under 200ms
- CLS: Under 0.1
Business Impact
- Better rankings in Google
- Higher conversion rates
- Improved user satisfaction
Why Core Web Vitals matter for revenue
Core Web Vitals aren't just technical metrics. They measure the moments where users decide whether to stay or leave, whether to buy or bounce. Here's why they matter:
Search Rankings
Since 2021, Core Web Vitals are an official ranking signal in Google's algorithm. Sites with poor vitals may be deprioritised in search results, losing organic traffic and visibility.
Conversion Rates
Research shows that a 1-second delay in LCP reduces conversion by 7%. When your main content loads slowly, users leave before seeing your value proposition. Layout shifts during checkout cause abandoned carts. Slow interactions make forms feel broken.
User Experience
Core Web Vitals measure the frustrations that break trust. A slow LCP means users wait. A high CLS means content jumps around. A poor INP means buttons feel unresponsive. Fix these, and users feel your site is fast, stable, and reliable.
Communicating performance: Beyond the metrics
Here's the uncomfortable truth: most stakeholders don't care about LCP, INP, or CLS. They care about revenue, trust, and whether customers are frustrated. The gap between technical metrics and business outcomes is where performance work often gets stuck.
We've found a better way to talk about performance: one that resonates with engineering leads, product owners, and business leaders alike. Instead of leading with numbers, we talk about friction and flow.
Flow: When everything just works
Flow is what happens when a page loads, nothing jumps, you tap and it responds immediately. No drama. No surprises. Nothing calling attention to itself.
It's the feeling of not noticing the website at all. Psychologists describe flow as a state of effortless progress. On the web, users feel this when they can move through a journey without thinking about the interface.
When users are in flow, they convert more, explore more, and trust more.
Friction: The silent conversion leak
Friction isn't always a big issue. Often it's the accumulation of tiny ones:
- A tap that doesn't respond right away
- A button that jumps as the layout settles
- Images that flicker into place
- A screen that stays blank just a beat too long
Individually, these look harmless. Together, they chip away at confidence. Google's research shows that delays as small as 70–100ms affect a user's sense of control.
Friction breaks trust long before anyone realises trust was on the table.
Translating metrics into business language
When talking to stakeholders, translate technical metrics into outcomes they care about:
Half a second extra loading time = 7% conversion drop
Users think buttons are broken, abandon forms
Users mis-tap buttons, lose reading position, lose trust
Use metrics to measure the work. Use friction and flow to communicate the work. We don't fix metrics; we fix moments. And the story of those moments is what finally makes performance matter.
The three Core Web Vitals explained
Largest Contentful Paint (LCP)
What it measures: How long it takes for the main content to load.
Why it matters: LCP measures perceived loading speed. If your hero image or main headline loads slowly, users think your entire site is slow, even if it's not.
Good threshold: 2.5 seconds or less
Common issues: Large images, slow server response, render-blocking resources, lazy loading the LCP element.
Interaction to Next Paint (INP)
What it measures: How quickly your site responds to user interactions (clicks, taps, keyboard inputs).
Why it matters: INP measures responsiveness. When users click a button and nothing happens for 500ms, they think it's broken. This hurts conversion on forms, checkout, and navigation.
Good threshold: 200 milliseconds or less
Common issues: Heavy JavaScript execution, long tasks blocking the main thread, inefficient event handlers, unoptimised third-party scripts.
Cumulative Layout Shift (CLS)
What it measures: How much content moves around while the page loads.
Why it matters: Layout shifts are frustrating. Users go to click "Buy Now" and the button moves. They start reading and the text jumps. CLS measures visual stability.
Good threshold: 0.1 or less
Common issues: Images without dimensions, web fonts causing text reflow, dynamically injected content, ads without reserved space.
Supporting metrics that influence Core Web Vitals
While LCP, INP, and CLS are the official Core Web Vitals, several other metrics provide insight into the loading experience. Optimising these will often result in a better user experience:
Time to First Byte (TTFB)
How quickly your server responds to requests. A slow TTFB means everything else starts late, directly impacting LCP and FCP.
Good threshold: Under 800ms
First Contentful Paint (FCP)
When the first content appears on screen. This is the first visual feedback users get that the page is loading.
Good threshold: Under 1.8s
First Input Delay (FID)
The legacy metric for interaction responsiveness, now replaced by INP. Still relevant for understanding older data.
Good threshold: Under 100ms
How to measure Core Web Vitals
There are two ways to measure Core Web Vitals: in the lab (synthetic) and in the field (real users). You need both.
Field data (Real User Monitoring)
Real users, real devices, real conditions. This is what Google uses for rankings. Sources include:
- Chrome UX Report (CrUX) - Google's public dataset of real Chrome users. Available via our free benchmark tool.
- Google Search Console - Shows your Core Web Vitals status for pages indexed by Google.
- Real User Monitoring (RUM) - Track your actual visitors with tools like our observability implementation.
Lab data (Synthetic Testing)
Controlled environment, consistent results. Perfect for development and debugging. Sources include:
- PageSpeed Insights - Google's free tool for testing any URL.
- Lighthouse - Built into Chrome DevTools.
- WebPageTest - Advanced testing with detailed waterfall charts.
Key difference: Lab data shows potential performance. Field data shows actual user experience. Fix issues found in lab data, but prioritise based on field data.
How Google measures Core Web Vitals
Google uses the Chrome User Experience Report (CrUX) to measure Core Web Vitals from real Chrome users around the world. This is field data, not lab data.
What is CrUX?
CrUX collects anonymous performance metrics from actual Chrome users who have opted in to usage statistics. Google aggregates this data and uses it for:
- Google Search Console performance reports
- PageSpeed Insights field data section
- Search ranking decisions (Core Web Vitals are a ranking signal)
The 75th percentile rule
Google evaluates your site based on the 75th percentile of user experiences over the past 28 days. Think of it like this: if you had 100 visitors, Google looks at visitor #75 when ranked from fastest to slowest experience. If that visitor had a "good" experience, you pass.
- You can't just be fast for some users, at least 75 out of 100 need a good experience
- A few slow experiences won't fail you, but if more than 25% of visitors have issues, you won't pass
Important: CrUX only includes Chrome users
CrUX data comes exclusively from Chrome browsers. Safari, Firefox, and Edge users aren't included. If your audience primarily uses non-Chrome browsers, use RUM tools to get complete field data.
How often does CrUX update?
CrUX data updates on a rolling 28-day window. After you make performance improvements, it can take up to 28 days to see the full impact in Google Search Console and PageSpeed Insights. Set up Real User Monitoring for faster feedback loops.
The Core Web Vitals optimisation workflow
Follow this systematic approach to improve your Core Web Vitals:
Measure current performance
Use our free benchmark tool to get your baseline Core Web Vitals from real Chrome users.
Identify problem pages
Use Google Search Console to find which pages have poor Core Web Vitals. For deeper insights, implement Real User Monitoring (RUM) with tools like our observability solution, SpeedCurve, RUMvision, or DebugBear to see performance broken down by page, device, and geography. Prioritise high-traffic and high-value pages (homepage, product pages, checkout).
Diagnose root causes
Use synthetic testing tools like PageSpeed Insights (Google's free tool) or WebPageTest (advanced testing with detailed waterfall charts) on problem pages. Look at the specific recommendations for each metric. Use Chrome DevTools to understand what's happening.
Implement fixes
Start with quick wins (image optimisation, font loading). Then tackle structural issues (JavaScript, server response). Use our metric-specific guides for detailed implementation steps.
Test in staging
Verify improvements with synthetic testing tools (Chrome DevTools, WebPageTest, or similar) before deploying to production. Check that fixes don't break functionality.
Deploy and monitor
Roll out changes and monitor field data. CrUX updates daily (with a 2-day delay), but since it uses a rolling 28-day average, improvements take time to fully reflect. Set up Real User Monitoring for faster feedback.
Common Core Web Vitals mistakes
❌ Only optimising for lab scores
Synthetic testing tools use simulated conditions that don't match real users. Your actual users have varying connections (5G, 4G, WiFi) and diverse devices. Always prioritise field data from real users.
❌ Lazy loading the LCP element
Never lazy load your hero image or main headline. This delays your LCP by forcing the browser to wait until JavaScript runs. The LCP element should load eagerly.
❌ Ignoring mobile performance
Most e-commerce traffic is mobile. Mobile devices have slower CPUs and networks. Test on real devices, not just desktop Chrome.
❌ Optimising the wrong pages
Google only cares about pages with sufficient traffic. Fix your homepage, category pages, and top products first. Don't waste time on pages with 10 visits per month.
❌ Adding too many third-party scripts
Every analytics tag, chat widget, and marketing pixel adds JavaScript that delays INP and blocks LCP. Audit your tags and remove what you don't actively use.
Start improving your Core Web Vitals
Ready to optimise? Where to start:
1. Get your baseline
Use our free benchmark tool to see your current Core Web Vitals and how you compare to competitors.
3. Get expert help
If you need hands-on support, schedule a consultation. We'll audit your site and create a custom optimisation plan.
Need help improving your Core Web Vitals?
Get a free audit and see exactly which metrics are impacting your conversion rate.