Core Web Vitals Explained: A Plain-English Guide for Business Owners

What Are Core Web Vitals and Why Should You Care?

In May 2021, Google officially made Core Web Vitals a ranking factor — meaning that how fast your website loads, how stable it feels, and how quickly it responds to user input now directly affects where you appear in search results.

But beyond rankings, Core Web Vitals measure something more fundamental: whether your website provides a good experience for actual human visitors. A site that fails Core Web Vitals is a site that frustrates users. And frustrated users leave.

This guide explains what each Core Web Vital metric means, how to measure them, and — crucially — what to actually do to improve them, even if you're not a developer.

---

The Three Core Web Vitals Metrics

1. Largest Contentful Paint (LCP) — Loading Performance

What it measures: How long it takes for the largest visible content element on the page to load. This is usually a hero image, a large heading, or a video thumbnail.

What "good" looks like:

🟢 Good: Under 2.5 seconds

🟡 Needs Improvement: 2.5 - 4.0 seconds

🔴 Poor: Over 4.0 seconds

Why it matters to users: LCP approximates the moment a page "feels" loaded. If the main image takes 6 seconds to appear, users assume the page is broken and abandon.

Most common causes of poor LCP:

Large, unoptimized images (a 4MB hero image instead of a 200KB optimized WebP)

Slow server response time (TTFB over 800ms)

Render-blocking JavaScript and CSS

No CDN (content delivery network)

2. Interaction to Next Paint (INP) — Interactivity

What it measures: How quickly the page responds when a user interacts with it — clicking a button, opening a menu, submitting a form. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.

What "good" looks like:

🟢 Good: Under 200 milliseconds

🟡 Needs Improvement: 200 - 500 milliseconds

🔴 Poor: Over 500 milliseconds

Why it matters to users: Clicking a button that doesn't respond immediately feels broken. Delays over 300ms are perceptible and frustrating. Over 1 second, users assume nothing will happen and click again (often causing double-submissions or errors).

Most common causes of poor INP:

Heavy JavaScript execution blocking the main thread

Unoptimized event handlers

Third-party scripts (chat widgets, analytics, ad trackers) competing for processing power

Complex animations without GPU acceleration

3. Cumulative Layout Shift (CLS) — Visual Stability

What it measures: How much the page layout shifts unexpectedly during loading. Ever clicked a button just as an image loaded above it and accidentally clicked something else? That's a CLS problem.

What "good" looks like:

🟢 Good: Under 0.1

🟡 Needs Improvement: 0.1 - 0.25

🔴 Poor: Over 0.25

Why it matters to users: Layout shifts cause accidental clicks, lost form progress, and general frustration. They're particularly damaging on mobile devices where users interact with smaller targets.

Most common causes of poor CLS:

Images without defined width and height attributes

Ads and embeds without reserved space

Web fonts that load after the fallback font and shift text

Dynamically injected content (banners, cookie notices, chat widgets) that pushes other content down

---

How to Measure Your Core Web Vitals

Google Search Console (Free)

If you have Google Search Console set up (you should), the "Core Web Vitals" report shows your site's real-world performance data for both mobile and desktop, segmented by page.

What's unique about GSC data: It uses actual Chrome user data (field data), not just lab simulations. This reflects what real users experience on your actual pages.

Google PageSpeed Insights (Free)

Enter any URL at pagespeed.web.dev and get an immediate report showing:

Your Core Web Vitals scores (if sufficient data exists)

Specific recommendations for improvement with estimated impact

Both lab and field data

Lighthouse in Chrome DevTools (Free)

Open Chrome DevTools (F12), go to the Lighthouse tab, and run an audit. This gives you a detailed breakdown with specific code-level recommendations. Requires some technical knowledge to interpret.

Web Vitals Chrome Extension (Free)

A simple browser extension that shows Core Web Vitals scores in real-time as you browse any page, including your own.

---

How to Fix Common Core Web Vitals Issues

Improving LCP (Loading Speed)

Optimize images — this fixes 80% of LCP problems:

Images should be:

Served in WebP or AVIF format (30-40% smaller than JPEG at the same quality)

Compressed appropriately (a hero image rarely needs to be over 300KB)

Sized correctly for each viewport (not a 2000px image displayed at 600px)

Lazy-loaded (defer loading images below the fold until needed)

The hero/LCP image should explicitly NOT be lazy-loaded (add loading="eager" and fetchpriority="high")

Improve server response time:

Use a content delivery network (CDN) like Cloudflare (free tier is excellent)

Consider upgrading hosting if TTFB is consistently over 800ms

Enable server-side caching

Eliminate render-blocking resources:

Defer non-critical JavaScript: <script defer src="...">

Use CSS properly (avoid @import, critical CSS inline)

Remove unused CSS and JavaScript

Improving INP (Interactivity)

Reduce JavaScript execution time:

Audit third-party scripts. Every chat widget, analytics tag, A/B testing tool, and ad script runs JavaScript that competes with your page's responsiveness. Remove or defer non-essential scripts.

Break long tasks into smaller chunks (technical implementation, but your developer can handle this)

Use requestAnimationFrame for visual updates

Optimize event handlers:

Avoid expensive computations in click/tap handlers

Debounce inputs (especially search fields that query APIs)

Improving CLS (Visual Stability)

Always define image dimensions:

Every <img> tag should have explicit width and height attributes:

<img src="hero.webp" width="1200" height="630" alt="..." />

This lets the browser reserve the correct space before the image loads, preventing layout shift.

Reserve space for ads and embeds:

Use CSS min-height to reserve space for dynamically loaded content:

.ad-container { min-height: 250px; }

Handle web fonts carefully:

Use font-display: swap or font-display: optional to prevent invisible text during font loading

Preload critical fonts in the <head>

Match font metrics closely to your fallback system font

Control cookie banners and notifications:

Position overlays at the bottom of the viewport rather than inserting them into the content flow

Avoid banners that push content down when they appear

---

Core Web Vitals and Mobile vs. Desktop

Google prioritizes your mobile Core Web Vitals for ranking purposes, since mobile now represents 60-70% of web traffic. It's common to see a site that passes on desktop but fails on mobile.

Mobile-specific considerations:

Network conditions are slower and more variable on mobile

Processing power is more limited on mobile devices

Touch targets must be at least 44x44px for usability (which also affects INP)

Viewport-specific image sizes matter more on mobile

Always test your Core Web Vitals on a throttled mobile connection (Lighthouse has "Mobile" mode for this purpose).

---

The Business Impact of Core Web Vitals

Real-world data on the business impact of page speed and Core Web Vitals:

Vodafone improved LCP by 31% and saw an 8% increase in sales

Tokopedia (Indonesia's largest e-commerce platform) reduced LCP by 55% and saw a 23% reduction in bounce rate

Google found that for every 100ms improvement in load time, mobile sessions increase by 8%

Walmart found that a 1-second improvement in page load time improved conversions by 2%

For a site generating €50,000/month in revenue, a 5% conversion rate improvement from better Core Web Vitals represents €2,500/month — or €30,000/year.

The ROI on technical web performance work is often faster and higher than any marketing campaign.

---

Prioritization: What to Fix First

If your Core Web Vitals are poor across the board, tackle in this order:

Image optimization: Highest impact, often fixable without developer involvement (use tools like Squoosh, ImageOptim, or ShortPixel)

Hosting and CDN: If TTFB is over 1 second, no amount of optimization will get you to "Good" LCP

Render-blocking resources: Work with your developer to defer non-critical scripts

Third-party script audit: Remove anything non-essential

CLS fixes: Image dimensions and font handling — usually a one-time fix

→ Get a Core Web Vitals audit and fix plan from Flowify