Core Web Vitals Explained (LCP, INP, CLS — in Plain English)

Core Web Vitals is Google's three-number report card for how fast and stable your site feels. They're part of the ranking algorithm, they show up in Google Search Console, and they're surprisingly easy to understand once you strip away the acronyms.

Here's what each one means and what to do about it.

LCP — Largest Contentful Paint

What it measures: How long it takes for the biggest visible element on the page (usually your hero image or main headline) to appear.

Goal: under 2.5 seconds on mobile.

Common causes of bad LCP:

• Huge uncompressed hero images
• Slow hosting
• Render-blocking CSS or JavaScript
• No CDN

Quick fixes:

• Compress the hero image to under 200KB and serve it as WebP or AVIF
• Add fetchpriority="high" to the hero <img> tag
• Move to a CDN (Cloudflare's free tier works)

See our full website speed checklist for the deeper list.

INP — Interaction to Next Paint

What it measures: How quickly the page responds when you tap, click, or type. Replaced FID (First Input Delay) in 2024.

Goal: under 200ms.

Common causes of bad INP:

• Heavy JavaScript blocking the main thread
• Too many third-party scripts (chat widgets, analytics, A/B testing)
• Big synchronous tasks running on click

Quick fixes:

• Audit and remove plugins/scripts you don't actively use
• Defer non-critical JavaScript (<script defer>)
• Break long-running tasks into smaller chunks (a job for your developer)

CLS — Cumulative Layout Shift

What it measures: How much the page jumps around as it loads. Ever tried to tap a button and an ad popped in and pushed it down? That's a high CLS.

Goal: under 0.1.

Common causes of bad CLS:

• Images and videos without width and height attributes
• Web fonts that swap in late
• Ads or embeds injected after the page has rendered
• Cookie banners that push content down

Quick fixes:

• Always set width and height (or use CSS aspect-ratio) on images
• Reserve space for ads and embeds with a fixed-size container
• Use font-display: swap with size-adjust to prevent font-swap shifts

How to check your scores

Free tools, in order of usefulness:

1. [PageSpeed Insights](https://pagespeed.web.dev) — type your URL, get a full report with field data (real users) and lab data (simulated). Use the mobile tab. 2. Google Search Console → Core Web Vitals report — shows scores across every page of your site, updated every few days. 3. Chrome DevTools → Performance / Lighthouse tabs — for deeper debugging.

Always test on the mobile setting. Google ranks based on mobile experience first.

Why this matters for ranking

Core Web Vitals are part of Google's "page experience" signals. They won't push a bad page to #1, but they will *break ties* — and at the top of competitive search results, that matters. They also affect bounce rate, which indirectly affects ranking.

What to do this week

1. Run PageSpeed Insights on your home page (mobile). 2. Note your three numbers. 3. Tackle the biggest red one first. (For most small business sites, it's LCP from a giant hero image.) 4. Re-test after each fix. 5. Open Search Console's Core Web Vitals report and confirm the improvement is showing up in real-user data after 2–3 weeks.

You don't need perfect scores. You need green. Green is enough.