Core Web Vitals, explained: how to pass Google's performance tests

Imagine clicking on a website and waiting… and waiting… and waiting. The page finally loads, then everything jumps around as images appear and ads pop in. Frustrating, right? Google knows it too. That’s why it created Core Web Vitals — a set of measurements of how real people experience a website.

This guide explains each metric in plain terms, how to measure them, and how to improve them for better performance and search visibility.

What are Core Web Vitals, and why should you care?

Core Web Vitals are Google’s way of measuring three parts of the user experience. Think of them as a report card for how your site performs in the real world. They answer three questions:

1. How fast does the main content load? (Largest Contentful Paint — LCP)
2. How quickly does the site respond when people interact with it? (Interaction to Next Paint — INP)
3. How stable is the page while it loads? (Cumulative Layout Shift — CLS)

We like a restaurant analogy. You want your food to arrive quickly (loading), the waiter to respond when you need something (responsiveness), and your table not to move while you’re eating (stability). Website visitors expect the same.

The three metrics, explained simply

Largest Contentful Paint (LCP): loading speed

LCP measures how long the biggest, most important piece of content takes to appear — usually the hero image, the main headline or a video.

Business owners often obsess over total load time, but LCP focuses on what matters to visitors: when they can actually see the main content. Google considers under 2.5 seconds good.

Common LCP problems:

• Oversized hero images
• Slow hosting
• Images in outdated formats
• CSS and JavaScript files that block rendering

How to improve LCP:

• Compress images and serve modern formats like WebP
• Load the CSS needed for the top of the page first
• Move to faster, more reliable hosting
• Preload key resources such as the hero image
• Use a content delivery network (CDN) to serve files from locations closer to visitors

Interaction to Next Paint (INP): responsiveness

INP measures how quickly your site responds when people click buttons, tap links or fill in forms. Unlike the older First Input Delay (FID) metric, which only measured the first interaction, INP considers responsiveness across the whole visit.

Think of INP as your site’s reaction time. When someone clicks “Contact us”, how long before something happens? Google considers under 200 milliseconds good.

Common INP problems:

• Heavy JavaScript blocking the main thread
• Poorly optimised event handlers
• An oversized DOM (Document Object Model) that makes interactions sluggish
• Third-party scripts getting in the way

How to improve INP:

• Break long JavaScript tasks into smaller chunks
• Streamline event handlers and remove unnecessary work
• Clean up bloated HTML to shrink the DOM
• Schedule tasks so user interactions come first
• Defer JavaScript that isn’t needed straight away

Cumulative Layout Shift (CLS): visual stability

CLS measures how much the page moves around unexpectedly while it loads. You’ve experienced it: you’re about to tap a button when an ad loads and pushes everything down, and you tap the wrong thing.

CLS is a score where 0 is perfectly stable. Google considers under 0.1 good.

Common causes of layout shift:

• Images and videos without set dimensions
• Ads that push content around
• Web fonts that make text jump when they load
• Content that appears without space reserved for it

How to fix it:

• Give every image and video width and height attributes
• Reserve space for ads and dynamic content
• Load fonts in a way that prevents text shifting
• Use the CSS aspect-ratio property for responsive elements
• Use placeholder containers for content that loads later

How Core Web Vitals affect your business

Search visibility. Core Web Vitals are part of Google’s page experience signals. Great content still matters most, but when you’re competing with similar businesses, better performance helps.

Conversions. Speed affects whether people stay. A 2020 study by Deloitte and Google, Milliseconds Make Millions, found that a 0.1-second improvement in mobile site speed was associated with measurable increases in conversions across the customer journey.

User experience. Fast, stable, responsive sites keep people engaged, reduce bounce rates and encourage return visits — and a site that works smoothly is easier to trust.

Mobile. Performance problems show up most on phones, where connections and processors are slower. Optimising for Core Web Vitals means optimising for mobile.

Measuring your Core Web Vitals

Google PageSpeed Insights gives you both lab data (simulated tests) and field data (real visitors). Focus on the field data — that’s what Google uses.

Google Search Console has a Core Web Vitals report covering your whole site, which helps you find site-wide issues and track improvements.

Chrome DevTools helps pinpoint the exact elements causing problems.

Real user monitoring (RUM) tools collect data from actual visitors, showing how devices, locations and connection speeds affect performance.

Our optimisation process

Step 1: audit

We analyse current performance with several tools and scenarios — desktop and mobile, different connection speeds and locations.

Step 2: prioritise

Not every issue matters equally. We rank fixes by their impact on Core Web Vitals and how hard they are, and start with the ones that deliver the biggest improvement.

Step 3: optimise

Typical work includes:

• Image optimisation and conversion to modern formats
• CSS and JavaScript minification
• Faster server response times
• Caching
• Content delivery network setup

Step 4: test and validate

We re-test to confirm the improvements are working and nothing else has broken.

Step 5: monitor

Core Web Vitals aren’t a one-time fix. Ongoing monitoring keeps performance healthy as you add content and features.

Common mistakes

Chasing the PageSpeed score. A high score looks good, but the real Core Web Vitals metrics from actual visitors are what matter.

Ignoring mobile. Many sites are optimised for desktop and neglected on phones, where performance problems are most noticeable.

Over-optimising. Some techniques can break functionality. Performance improvements have to be balanced against keeping everything working.

Ignoring real user data. Lab tests are useful, but real visitor data gives the most accurate picture.

Advanced techniques

Critical CSS. Inlining just the CSS needed for the top of the page lets it display quickly while the rest loads.

Resource prioritisation. Preload, prefetch and preconnect make sure important resources load first.

JavaScript delivery. Code splitting, lazy loading and efficient bundling keep JavaScript from slowing interactions.

Third-party scripts. Poorly implemented third-party scripts are a common culprit; auditing them often brings quick wins.

What’s changed recently

Google continues to evolve Core Web Vitals. In March 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID), reflecting a focus on responsiveness throughout a visit rather than just the first interaction.

Getting started

Improving Core Web Vitals doesn’t have to be complicated. Test your site with Google PageSpeed Insights to get a baseline, fix the biggest issues first, and don’t try to fix everything at once.

Better performance means happier visitors, better search visibility and more conversions. If you’d like help — whether that’s a full performance overhaul or fine-tuning one metric — that’s exactly the kind of thing we do, and we’ll explain what we’re changing and why.