Core Web Vitals Explained: How to Make Your Website Fast

A slow website costs you twice: visitors leave before the page loads, and Google has less reason to rank you above faster competitors. Core Web Vitals are Google’s way of measuring how fast and stable your pages feel to real people.

In this guide I explain the three metrics in plain English, show you how to measure them and share the fixes I use most when speeding up client websites.

What are Core Web Vitals?

Core Web Vitals are three user-experience metrics. Google evaluates them using data from real Chrome users, and a page passes when at least 75% of visits meet the “good” threshold.

Metric	What it measures	Good	Poor
LCP — Largest Contentful Paint	How quickly the main content appears	2.5 s or less	More than 4 s
INP — Interaction to Next Paint	How quickly the page responds to clicks and taps	200 ms or less	More than 500 ms
CLS — Cumulative Layout Shift	How much the layout jumps while loading	0.1 or less	More than 0.25

INP replaced the older First Input Delay (FID) metric in March 2024, so any guide still talking about FID is out of date.

How to measure your Core Web Vitals

• PageSpeed Insights shows real-user data (when your site has enough traffic) plus a lab test with specific recommendations.
• Google Search Console has a Core Web Vitals report that groups your URLs into good, needs improvement and poor.
• Chrome DevTools (Performance panel) lets you see exactly what blocks rendering or delays interactions.

Lab scores are useful for debugging, but the real-user numbers are what count for Google.

How to improve LCP

LCP is usually your hero image or main headline. To make it appear sooner:

1. Reduce server response time. Use good hosting, enable caching and compression, and keep your CMS lean.
2. Optimise the hero image. Serve modern formats such as WebP or AVIF, size images correctly and give the LCP image fetchpriority="high".
3. Don’t lazy-load the LCP element. Lazy loading is great for images further down the page, but not for the first one.
4. Remove render-blocking resources. Inline critical CSS, defer non-essential JavaScript and self-host fonts so the browser doesn’t wait for third-party servers.
5. Never hide the main content behind a loader. Fancy intro screens and fade-ins that keep the headline invisible until JavaScript runs can push LCP back by seconds. Animate the elements around the headline instead.

How to improve INP

INP measures how responsive the page feels. Poor INP almost always comes from too much JavaScript running on the main thread.

• Remove plugins and scripts you don’t need — every chat widget, slider and tracking script has a cost.
• Load non-critical third-party scripts after the page is interactive.
• Break long JavaScript tasks into smaller chunks so the browser can respond between them.
• Avoid heavy work in scroll and input handlers; use passive listeners and throttle expensive updates.

How to improve CLS

Layout shifts happen when something loads late and pushes content around.

• Always set width and height (or an aspect ratio) on images and videos.
• Reserve space for ads, embeds and cookie banners before they load.
• Use font-display: swap with self-hosted, preloaded fonts so text doesn’t jump when the web font arrives.
• Don’t insert banners or notices above existing content after the page has rendered.

WordPress-specific tips

• Choose a lightweight theme; heavy page builders add a lot of CSS and JavaScript to every page.
• Use a caching plugin or server-level caching, and enable compression.
• Audit your plugins regularly — deactivate and delete what you don’t use.
• Stop loading block-editor styles, emoji scripts and other extras on pages that don’t need them.
• Optimise images on upload and serve them in WebP.

Do Core Web Vitals affect Google rankings?

Yes, but they are one signal among many. Relevant, helpful content still matters most. Think of page experience as a tie-breaker: when two pages are equally relevant, the faster, more stable one has an advantage — and it will convert more visitors either way.

Quick checklist

1. Test your key pages in PageSpeed Insights and note LCP, INP and CLS.
2. Compress and resize images; prioritise the LCP image.
3. Defer non-critical JavaScript and remove unused plugins.
4. Self-host and preload fonts.
5. Add dimensions to all media.
6. Enable caching and compression on the server.
7. Re-test, then monitor the Core Web Vitals report in Search Console.

Frequently asked questions

What is a good PageSpeed score?

Aim for the green zone (90+) on mobile for key pages, but focus on passing the three Core Web Vitals with real-user data — that is what Google uses.

Why is my mobile score lower than desktop?

PageSpeed simulates a mid-range phone on a slower network, so heavy JavaScript and large images hurt much more on mobile.

Can a fast site still rank poorly?

Absolutely. Speed supports rankings but doesn’t replace relevant content and a solid SEO strategy.

Need a faster website?

I build and optimise websites with performance in mind from the first line of code. If your site feels slow, my web development service covers speed audits, Core Web Vitals fixes and lean rebuilds. Send me your URL for a free quick review.