Core Web Vitals: What They Mean and Why They Matter

Google Is Measuring Your Website’s User Experience

In 2021, Google started using a set of metrics called Core Web Vitals as ranking factors. These metrics measure real aspects of user experience — how fast your page loads, how quickly it responds to interaction, and how stable the layout is while it’s loading.

For business owners, this means that a slow, janky, frustrating website isn’t just annoying your visitors — it’s actively hurting your search rankings. Google has made user experience a measurable part of how it decides which websites deserve to rank.

As a web developer, I pay close attention to Core Web Vitals on every site I build. They’re not just abstract numbers — they represent real user frustrations that cost businesses real customers. Let me break down what each metric means and what you can do to improve them.

The Three Core Web Vitals

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on your page to load. This is usually a hero image, a large text block, or a video. It answers the question: “When does the page look like it’s actually loaded?”

What’s a good score?

• Good: under 2.5 seconds
• Needs improvement: 2.5 to 4 seconds
• Poor: over 4 seconds

Why it matters: If your page takes five seconds before anything meaningful appears, visitors assume it’s broken and leave. First impressions happen in milliseconds, and LCP is essentially measuring your first impression.

Common causes of poor LCP:

• Large, unoptimised images (the most common culprit by far)
• Slow server response times from cheap hosting
• Render-blocking JavaScript and CSS
• Web fonts that take too long to load

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) in March 2024. It measures how responsive your page is to user interactions throughout the entire visit — not just the first click. When someone taps a button, clicks a link, or types in a form field, INP measures how long it takes for the page to visually respond.

What’s a good score?

• Good: under 200 milliseconds
• Needs improvement: 200 to 500 milliseconds
• Poor: over 500 milliseconds

Why it matters: A page that feels sluggish when you interact with it is deeply frustrating. You click a button and nothing happens for half a second. You start to wonder if your click registered. You click again. Maybe now two actions fire. It’s the kind of experience that makes people leave and never come back.

Common causes of poor INP:

• Heavy JavaScript execution blocking the main thread
• Too many third-party scripts (analytics, chat widgets, social embeds)
• Complex DOM manipulations on user interaction
• Inefficient event handlers

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts around unexpectedly while it’s loading. You’ve experienced this: you’re about to tap a link, and suddenly an ad loads above it, pushing everything down. You end up tapping the wrong thing. That’s layout shift.

What’s a good score?

• Good: under 0.1
• Needs improvement: 0.1 to 0.25
• Poor: over 0.25

Why it matters: Layout shifts are genuinely maddening. They cause misclicks, make content hard to read, and make your website feel unstable and untrustworthy. Google takes this seriously because it directly impacts user experience.

Common causes of poor CLS:

• Images without width and height attributes
• Ads or embeds that load after the initial page render
• Web fonts that cause text to resize when they load (Flash of Unstyled Text)
• Dynamic content injected above existing content

How to Check Your Core Web Vitals

You don’t need to be technical to check your scores. Here are the tools I recommend:

Google PageSpeed Insights

Go to pagespeed.web.dev and enter your URL. You’ll get both lab data (simulated tests) and field data (real user measurements). Focus on the field data if it’s available — that’s what Google actually uses for rankings.

Google Search Console

If you’ve verified your site in Google Search Console, there’s a Core Web Vitals report under the “Experience” section. It shows you which pages pass and which don’t, grouped by issue type. This is the best place to get an overview of your entire site’s performance.

Chrome DevTools

For a more detailed technical analysis, Chrome’s DevTools has a Performance panel that lets you record and analyse page loads. This is where developers dig into the specifics, but it’s worth mentioning because your web developer should be using it.

Practical Ways to Improve Each Metric

Improving LCP

Optimise your images. This single step fixes more LCP issues than anything else. Convert images to modern formats like WebP or AVIF, compress them properly, and serve appropriately sized images for each screen size. A hero image doesn’t need to be 4000 pixels wide on a mobile phone.

Upgrade your hosting. If your server takes two seconds just to respond to a request, you’ve already used most of your LCP budget before any content loads. Good hosting doesn’t have to be expensive — it just needs to be appropriate for your site.

Preload critical resources. Tell the browser about your most important resources (like your hero image or main font) early, so it can start loading them sooner.

Minimise render-blocking resources. CSS and JavaScript files that must be downloaded and processed before the page can render are called render-blocking. Defer non-critical scripts and inline critical CSS to get content on screen faster.

Improving INP

Reduce JavaScript execution time. The main thread of the browser can only do one thing at a time. If a massive JavaScript file is executing, it can’t respond to your clicks. Break up long tasks, remove unnecessary scripts, and defer what you can.

Audit your third-party scripts. Every chat widget, analytics tool, social media embed, and marketing pixel adds JavaScript to your page. Each one competes for the main thread. Be ruthless — if a third-party script isn’t providing clear business value, remove it.

Use web workers for heavy computation. If you need to do complex calculations in the browser, move them off the main thread using web workers. This keeps the page responsive while the work happens in the background.

Debounce rapid interactions. If your page responds to scroll, resize, or input events, make sure the event handlers are debounced or throttled so they don’t fire hundreds of times per second.

Improving CLS

Always include width and height on images and videos. This tells the browser how much space to reserve before the media loads. Without dimensions, the browser doesn’t know how tall the image will be, so everything below it shifts when it loads.

Reserve space for ads and embeds. If you have ads or third-party embeds, use CSS to set a minimum height for their containers. This prevents the page from jumping when they load.

Use font-display: swap wisely. While font-display: swap prevents invisible text while fonts load, it can cause layout shifts when the custom font replaces the fallback. Use size-adjusted fallback fonts or preload your fonts to minimise this.

Avoid inserting content above existing content. If you’re dynamically adding banners, notifications, or other elements, add them below the viewport or use fixed positioning so they don’t push existing content around.

How Core Web Vitals Affect Rankings

Let me be straightforward: Core Web Vitals are a ranking factor, but they’re not the most important one. Relevant, high-quality content will always outweigh performance metrics. A slow page with exactly the right answer will still rank above a fast page with mediocre content.

That said, when multiple pages are competing for the same keywords with similar content quality, performance becomes a tiebreaker. And in competitive local markets, those tiebreakers matter.

More importantly, Core Web Vitals correlate directly with user behaviour. Faster, more stable, more responsive pages keep visitors engaged longer, reduce bounce rates, and lead to more conversions. Even if Google didn’t use them as ranking factors, they’d still be worth improving because they make your website better for your customers.

The Real-World Impact

I recently rebuilt a client’s website that was scoring in the red across all three Core Web Vitals. The old site was a WordPress theme loaded with plugins, unoptimised images, and half a dozen third-party scripts. After the rebuild using a modern stack with properly optimised assets, all three metrics went green.

The result? Their bounce rate dropped by 35%, average time on page increased by 40%, and they started seeing a steady climb in organic search traffic over the following months. The improved rankings were nice, but the real win was that visitors were actually staying and engaging instead of bouncing.

Don’t Chase Perfect Scores

A word of caution: don’t become obsessed with getting a perfect 100 on PageSpeed Insights. The goal is to pass Core Web Vitals — to be in the green zone for all three metrics. Beyond that, there are diminishing returns.

A score of 95 vs 100 makes virtually no difference to rankings or user experience. But a score of 35 vs 90 makes an enormous difference. Focus your energy where it matters: getting out of the red and into the green.

Where to Start

If you’re not sure where your website stands, run it through PageSpeed Insights right now. If your Core Web Vitals are in the green, brilliant — focus on other areas of improvement. If they’re in the red or amber, addressing them should be a priority.

If you need help improving your site’s performance, get in touch. I build fast, modern websites that pass Core Web Vitals out of the box, and I can audit existing sites to identify exactly what’s holding them back. Fast websites win more customers — it’s as simple as that.