Core Web Vitals in Plain English: What Actually Slows Your Site

Google's Core Web Vitals are three measurements of how a page feels to a real visitor. They influence search rankings, but the better reason to care is simpler: slow, jumpy pages lose visitors and sales.

The names are technical. The ideas aren't.

The three measurements

Largest Contentful Paint (LCP): "When does the main thing appear?"

LCP measures how long it takes for the biggest visible element — usually a hero image, a video poster or a large heading — to show up. Good: 2.5 seconds or less.

If your LCP is slow, visitors stare at a half-empty page and wonder whether it's working.

Interaction to Next Paint (INP): "When I click, does it respond?"

INP replaced the older First Input Delay metric in 2024. It looks at how quickly the page visibly reacts after someone taps, clicks or types — across the whole visit, not just the first interaction. Good: 200 milliseconds or less.

Poor INP is the feeling of tapping a menu button and nothing happening, so you tap again.

Cumulative Layout Shift (CLS): "Does stuff jump around?"

CLS measures unexpected movement of content while the page loads. Good: 0.1 or less.

You know bad CLS: you go to tap a link, an ad loads above it, and you tap the wrong thing.

How to check your site

• PageSpeed Insights shows both lab results and, for sites with enough traffic, real-user data from Chrome. Real-user data is what counts.
• Search Console has a Core Web Vitals report that groups your pages by problem.
• Your browser's developer tools include a Performance panel that shows exactly what happened during a load.

Always test on a mid-range phone over a normal mobile connection. Your laptop on office Wi-Fi is not your typical visitor.

The fixes that solve most problems

For slow LCP

1. Serve images at the right size and format. A 4,000-pixel photo scaled down in the browser is the most common culprit. Use modern formats like WebP or AVIF and size images for the space they fill.
2. Don't lazy-load the hero image. Lazy-loading is great for images further down the page, but the main image should load immediately — and can be marked as high priority.
3. Cut server response time. Use caching and a CDN. If your HTML takes a second to arrive, nothing else can start.
4. Reduce render-blocking resources. Large CSS files and scripts in the page head delay everything after them.

For poor INP

1. Audit third-party scripts. Chat widgets, tag managers, heatmaps and ad scripts all compete for the browser's attention. Remove what you don't use; delay what you can.
2. Break up long tasks. If your own JavaScript runs for hundreds of milliseconds at a time, the page can't respond to clicks during that time.
3. Respond first, work second. Update the interface immediately on click (open the menu, show a spinner), then do the heavy work.

For high CLS

1. Give images and videos dimensions. Set width and height (or an aspect ratio) so the browser reserves space before they load.
2. Reserve space for ads and embeds. Give them a fixed-size container.
3. Load web fonts carefully. Use font-display settings and size-matched fallbacks so text doesn't jump when the custom font arrives.
4. Don't insert content above existing content unless the user asked for it.

What not to obsess over

A perfect lab score of 100 is not the goal. Real-user measurements passing the thresholds on your most important pages is. Prioritise templates that get the most traffic — your homepage, product pages and top articles — before tuning a rarely visited page.

A fifteen-minute action plan

1. Run your three most important pages through PageSpeed Insights.
2. Note which of the three metrics fails on each.
3. Pick the single biggest fix from the lists above for each failing metric.
4. Ship those, then measure again in a few weeks, once real-user data has caught up.

Performance work is rarely one heroic rewrite. It's a few unglamorous fixes, made consistently, on the pages that matter most.