What is Core Web Vitals?

Quick answer: Core Web Vitals are 3 performance metrics Google uses to measure user experience: LCP (Largest Contentful Paint, loading speed), CLS (Cumulative Layout Shift, visual stability), INP (Interaction to Next Paint, responsiveness).

Measured by Scan across 9 browsers. Good scores (green) improve SEO rankings and user satisfaction. Bad scores (red) hurt both.

Reading time: 6 minutes

What you’ll learn:

• The three Core Web Vitals with targets and user impact: LCP (Largest Contentful Paint, how fast largest element loads, target under 2.5s, slow LCP means 53% mobile users bounce before seeing content), CLS (Cumulative Layout Shift, how much content shifts while loading, target under 0.1, high CLS means accidental clicks when buttons shift), INP (Interaction to Next Paint, how quickly page responds to clicks/taps, target under 200ms, high INP means page feels sluggish and users think site is broken)
• Real-world performance impact on business metrics: 1-3s LCP = 32% bounce rate vs 3-5s LCP = 90% bounce rate, improving LCP 4s → 2s yields 20-30% conversion lift (typical), example e-commerce 2.1% conversion before fixes → 2.8% after (+33% lift) = $50K/month → $66.5K/month ($16.5K/month revenue gain from Core Web Vitals optimization alone)
• Common issues with specific fixes: LCP problems (slow hero image fixed with WebP format + proper sizing 4.8s → 2.1s, render-blocking JavaScript deferred 3.5s → 1.9s, slow server response with CDN + caching 5.2s → 2.4s), CLS problems (images without dimensions add width/height 0.42 → 0.08, web fonts with font-display swap 0.28 → 0.11, dynamic ads reserve space 0.35 → 0.09), INP problems (heavy JavaScript break into <50ms tasks 680ms → 180ms, slow event handlers debounced 450ms → 120ms)
• How Scan tests differently than Google PageSpeed Insights: Scan tests up to 100 pages (not just homepage) across 9 browsers (Chrome, Firefox, Safari iOS/macOS, Edge, Chrome Android, Brave, Instagram/Facebook in-app) and multiple devices (desktop, mid-range Android, iPhone, tablet), catches browser-specific issues (e.g., Chrome 2.1s green but Safari iOS 3.9s red = Safari-specific performance problem), provides page-level breakdown in Scan Pro showing which specific pages have issues
• Tracking improvements quarterly with realistic timelines: Q1 all red baseline (LCP 4.8s, CLS 0.42, INP 520ms), Q2 all yellow after optimizing images + adding dimensions (LCP 2.8s, CLS 0.18, INP 280ms), Q3 all green after implementing CDN + deferring JS (LCP 2.2s, CLS 0.09, INP 150ms), Q4 fine-tuned green (LCP 1.9s, CLS 0.06, INP 120ms) = all red → all green in 9 months typical timeline with bounce rate dropped 42% and conversion rate up 28%

Targets: LCP under 2.5s, CLS under 0.1, INP under 200ms

---

The Three Core Web Vitals

1. LCP (Largest Contentful Paint)

What it measures: How fast the largest element on your page loads.

Target: Under 2.5 seconds (green)

Common culprits:

• Slow hero image loading
• Unoptimized images (wrong format or too large)
• Render-blocking JavaScript
• Slow server response

Example:

• Good LCP (1.8s): Hero image loads immediately, users see content fast
• Bad LCP (5.2s): Hero image takes 5+ seconds, users see blank page

User impact: Slow LCP = users bounce before seeing content (53% of mobile users abandon if page takes >3s).

How Scan measures it: Tests across 9 browsers (Chrome, Firefox, Safari, etc.) to catch browser-specific slowdowns.

---

2. CLS (Cumulative Layout Shift)

What it measures: How much content shifts around while loading.

Target: Under 0.1 (green)

Common culprits:

• Images without dimensions (width/height)
• Ads inserting dynamically
• Web fonts loading slowly (FOUT - Flash of Unstyled Text)
• Injected content pushing existing content down

Example:

• Good CLS (0.05): Page loads smoothly, nothing jumps around
• Bad CLS (0.42): You click “Buy Now”, button shifts, you accidentally click ad instead

User impact: High CLS = frustrating experience (accidental clicks, lost reading position).

How Scan measures it: Tracks layout shifts during full page load (including fonts, images, ads).

---

3. INP (Interaction to Next Paint)

What it measures: How quickly page responds to user interactions (clicks, taps, keyboard).

Target: Under 200ms (green)

Common culprits:

• Heavy JavaScript blocking main thread
• Long tasks (>50ms)
• Slow event handlers
• Unoptimized third-party scripts

Example:

• Good INP (120ms): Click button → immediate visual feedback
• Bad INP (650ms): Click button → long delay → users click again → double submission

User impact: High INP = page feels sluggish (users think site is broken, abandon tasks).

How Scan measures it: Simulates user interactions across different devices (desktop, mobile, tablet).

---

Core Web Vitals Scoring

The Color System

Green (Good):

• LCP: 0-2.5 seconds
• CLS: 0-0.1
• INP: 0-200ms

Yellow (Needs Improvement):

• LCP: 2.5-4.0 seconds
• CLS: 0.1-0.25
• INP: 200-500ms

Red (Poor):

• LCP: Over 4.0 seconds
• CLS: Over 0.25
• INP: Over 500ms

SEO impact: Google uses Core Web Vitals as ranking factor. Red scores hurt rankings. Green scores help (especially vs competitors with red/yellow).

---

Real-World Scoring

Example site: Local HVAC company

Metric	Desktop	Mobile	Status	Impact
LCP	2.1s	3.8s	Yellow (mobile slow)	Mobile users bouncing
CLS	0.08	0.18	Yellow (mobile shift)	Accidental ad clicks
INP	95ms	340ms	Yellow (mobile lag)	Form submissions slow

Diagnosis: Desktop scores good, mobile scores poor (common pattern - mobile performance neglected).

Fix priority: Optimize for mobile first (most traffic comes from mobile).

---

Why Core Web Vitals Matter

1. SEO Rankings (Google Confirmed)

Google’s official stance (2021 Page Experience Update):

• Core Web Vitals are ranking factors
• All else equal, better Core Web Vitals = better rankings
• Especially important for competitive queries

Example impact:

• Your site: LCP 4.5s, CLS 0.3, INP 450ms (all red)
• Competitor: LCP 1.9s, CLS 0.05, INP 150ms (all green)
• Result: Competitor ranks higher for same keywords (Google favors better UX)

---

2. User Experience (Bounce Rate)

Performance = retention:

• 1-3s LCP: 32% bounce rate
• 3-5s LCP: 90% bounce rate
• 5+s LCP: 123% bounce rate (users bounce AND warn others)

Example:

• Before: LCP 5.2s → 85% bounce rate → 15% see content
• After: LCP 1.8s → 28% bounce rate → 72% see content
• Result: 4.8x more users engage with content

---

3. Conversion Rate

Fast sites convert better:

• Improving LCP from 4s → 2s = 20-30% conversion lift (typical)
• Fixing high CLS = 10-15% fewer accidental exits
• Improving INP = 15-25% better form completion

Example (e-commerce):

• Before Core Web Vitals fix: 2.1% conversion rate
• After Core Web Vitals fix: 2.8% conversion rate (+33% lift)
• Revenue impact: $50K/month → $66.5K/month = $16.5K/month gain

---

Common Core Web Vitals Issues (and Fixes)

LCP Issues

Problem 1: Slow hero image

• Symptom: LCP 4.8s, hero image is largest element
• Fix: Optimize image (WebP format, proper sizing, lazy loading for below-fold images)
• Impact: LCP 4.8s → 2.1s

Problem 2: Render-blocking JavaScript

• Symptom: LCP 3.5s, JavaScript blocks page rendering
• Fix: Defer non-critical JS, async load third-party scripts
• Impact: LCP 3.5s → 1.9s

Problem 3: Slow server response (TTFB)

• Symptom: LCP 5.2s, server takes 2s to respond
• Fix: Enable caching, use CDN, optimize database queries
• Impact: LCP 5.2s → 2.4s

---

CLS Issues

Problem 1: Images without dimensions

• Symptom: CLS 0.42, images load and push content down
• Fix: Add width and height attributes to all images
• Impact: CLS 0.42 → 0.08

Problem 2: Web fonts loading

• Symptom: CLS 0.28, text flashes when fonts load (FOUT)
• Fix: Use font-display: swap, preload critical fonts
• Impact: CLS 0.28 → 0.11

Problem 3: Dynamic ads inserting

• Symptom: CLS 0.35, ad slots push content down
• Fix: Reserve space for ads (fixed height containers)
• Impact: CLS 0.35 → 0.09

---

INP Issues

Problem 1: Heavy JavaScript on main thread

• Symptom: INP 680ms, page freezes during interactions
• Fix: Break up long tasks (>50ms), use web workers for heavy computation
• Impact: INP 680ms → 180ms

Problem 2: Slow event handlers

• Symptom: INP 450ms, click handlers run synchronously
• Fix: Debounce handlers, optimize event listener logic
• Impact: INP 450ms → 120ms

Problem 3: Third-party scripts blocking

• Symptom: INP 520ms, analytics/chat widgets slow interactions
• Fix: Defer third-party scripts, lazy load non-critical widgets
• Impact: INP 520ms → 140ms

---

How Scan Tests Core Web Vitals

Cross-Browser Testing

Scan tests 9 browsers (not just Chrome):

1. Chrome (desktop)
2. Firefox (desktop)
3. Safari (macOS)
4. Safari (iOS)
5. Edge
6. Chrome (Android)
7. Brave
8. Instagram in-app browser
9. Facebook in-app browser

Why this matters: Core Web Vitals can vary by browser.

Example:

• Chrome: LCP 2.1s, CLS 0.08, INP 95ms (all green)
• Safari iOS: LCP 3.9s, CLS 0.22, INP 340ms (all yellow/red)
• Diagnosis: Safari-specific performance issue (common with iOS rendering)

---

Real Device Testing

Scan tests on actual devices (not just desktop):

• Desktop (high-end)
• Mobile (mid-range Android)
• Mobile (iPhone)
• Tablet

Why this matters: Mobile often 2-3x slower than desktop.

Example:

• Desktop: LCP 1.8s (green)
• Mobile: LCP 4.5s (red)
• Diagnosis: Images not optimized for mobile (serving desktop-sized images)

---

Core Web Vitals Monitoring

When to Test

Before launch: Catch issues before users see them

• Scan staging site
• Fix red scores before production deploy

After major changes: Verify performance didn’t regress

• New feature launch
• Design refresh
• Third-party script added

Quarterly: Monitor performance over time

• Track improvements
• Catch regressions
• Compare vs competitors

---

Tracking Improvements

Example quarterly tracking:

Quarter	LCP	CLS	INP	Actions Taken
Q1	4.8s (red)	0.42 (red)	520ms (red)	Baseline audit
Q2	2.8s (yellow)	0.18 (yellow)	280ms (yellow)	Optimized images, added dimensions
Q3	2.2s (green)	0.09 (green)	150ms (green)	Implemented CDN, deferred JS
Q4	1.9s (green)	0.06 (green)	120ms (green)	Fine-tuned font loading, removed heavy scripts

Result: All red → all green in 9 months (bounce rate dropped 42%, conversion rate up 28%).

---

Core Web Vitals vs Other Performance Metrics

What Core Web Vitals DON’T Measure

Page size: Can have small page with bad LCP (unoptimized critical path)

Total load time: Can have fast total load but bad INP (main thread blocked)

Time to Interactive (TTI): Different from INP (TTI = fully interactive, INP = responsiveness)

First Contentful Paint (FCP): Different from LCP (FCP = first pixel, LCP = largest element)

Core Web Vitals focus: User-perceived performance, not technical metrics

---

Core Web Vitals vs Lighthouse Score

Lighthouse includes 6 metrics:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Total Blocking Time (TBT)
• Cumulative Layout Shift (CLS)
• Speed Index
• Time to Interactive (TTI)

Core Web Vitals are 3 of those (LCP, CLS, INP).

Difference: Lighthouse = comprehensive performance audit. Core Web Vitals = Google ranking factors.

Priority: Fix Core Web Vitals first (they affect SEO), then optimize other Lighthouse metrics.

---

Frequently Asked Questions

What’s a good Core Web Vitals score?

All green (LCP <2.5s, CLS <0.1, INP <200ms).

Minimum for SEO: Yellow scores acceptable but not optimal. Red scores hurt rankings.

Competitive benchmark: Check competitors’ scores. If they’re all green and you’re red, you’re at disadvantage.

How quickly can I fix Core Web Vitals?

Quick fixes (1-2 weeks):

• Add image dimensions (fixes CLS)
• Optimize images (WebP, proper sizing) → fixes LCP
• Defer non-critical JavaScript → fixes INP

Longer fixes (1-3 months):

• Implement CDN (for LCP)
• Restructure JavaScript architecture (for INP)
• Remove heavy third-party scripts (for all three)

Example: All red → all green in 2-4 months (typical timeline with dedicated effort).

Do Core Web Vitals affect mobile and desktop separately?

Yes. Google tracks mobile and desktop separately.

Mobile scores matter more (Google uses mobile-first indexing).

Common pattern: Desktop green, mobile red/yellow (mobile performance neglected).

Fix priority: Optimize mobile first (most users, more SEO weight).

Can I have good Core Web Vitals but bad overall performance?

Yes. Core Web Vitals measure specific user experience aspects, not overall site health.

Example:

• LCP: 2.1s (green) - hero image optimized
• CLS: 0.08 (green) - no layout shift
• INP: 150ms (green) - responsive interactions
• But: Security issues, broken links, missing accessibility features

Scan tests beyond Core Web Vitals: 150+ checks including SEO, accessibility, security.

Why do my Core Web Vitals scores vary between tests?

Natural variability:

• Network conditions change
• Server load varies
• Browser rendering differences
• Device performance varies

Scan averages multiple tests to reduce variability.

Trend matters more than single data point: Improving from 4.5s → 2.1s is success even if next test shows 2.3s (still green).

How does Scan compare to Google PageSpeed Insights?

PageSpeed Insights: Tests single URL, single browser (Chrome), single device type

Scan: Tests up to 100 pages, 9 browsers, multiple devices

Use both:

• PageSpeed Insights: Quick check, Google’s official tool
• Scan: audit covering performance, accessibility, SEO, security, and mobile, cross-browser testing, page-level breakdown (Pro tier)

Scan advantage: See which specific pages have issues (not just homepage).

---

Want to check your Core Web Vitals? Run Scan Essential ($25) for up to 30 pages, Scan Pro ($50) for up to 100 pages with page-level breakdown. Tested across 9 browsers. Delivered in about 15-30 minutes.