Core Web Vitals

A practical guide for improving LCP (loading), CLS (stability), and INP (responsiveness). Learn what to measure, how to find root causes, and how to ship fixes without regressions.

Start the path Use the audit plan
  • ⚡ LCP quick wins
  • 🧱 CLS prevention
  • 🖱️ INP responsiveness
  • 🧪 Lab + field measurement

Why Core Web Vitals matter

Core Web Vitals are a simple way to measure whether your site feels fast and stable to real users. Improving them usually reduces bounce, increases engagement, and helps your pages feel “instant”.

What you’ll learn here

  • How LCP, CLS, and INP are affected by real-world issues
  • How to measure correctly (lab vs field)
  • How to prioritize fixes (highest impact first)
  • How to ship changes safely and track improvements

Recommended reading path

Start with quick wins, then go deeper into images and repeatable audits.

3) Performance Audit Kit

A repeatable workflow to audit, prioritize, and track results across releases.

Process • Team-ready

Suggested companion guide

  • SEO Foundations — how performance fits into indexing, metadata, and site health

Core Web Vitals, explained

What each metric means and what usually breaks it.

LCP (Loading)

What it measures: how fast the main content becomes visible.

Common causes: slow server/TTFB, unoptimized hero images, render-blocking CSS/JS.

Typical first fix: optimize the LCP element (often hero image).

CLS (Stability)

What it measures: unexpected layout movement.

Common causes: images without dimensions, late banners, font swaps, ads/embeds with no reserved space.

Typical first fix: reserve space for images/embeds.

INP (Responsiveness)

What it measures: how quickly the page responds to user input.

Common causes: long tasks on main thread, heavy hydration, slow event handlers, too much JS.

Typical first fix: reduce long tasks and defer non-critical JS.

One-page audit plan

A repeatable process you can run every release.

  1. Pick target pages: homepage + top landing page + top content/product page.
  2. Measure baseline: record LCP/CLS/INP symptoms (lab + field if available).
  3. Find root causes: identify LCP element, CLS sources, and long tasks.
  4. Prioritize: fix the highest-impact issues first (usually hero image + layout shifts).
  5. Ship in small batches: avoid regressions and keep rollbacks ready.
  6. Validate: compare before/after and keep a per-route log.

Want a full template? Use: Performance Audit Kit.

Quick wins that usually work

  • Optimize hero image (format + sizing + not lazy-loaded)
  • Reserve space for images/embeds (stop CLS)
  • Defer heavy scripts and reduce long tasks (better INP)
  • Cache static assets (faster repeat visits)

Common mistakes

  • Lazy-loading the LCP element
  • Shipping “quick fixes” without measuring before/after
  • Adding more third-party scripts during optimization
  • Ignoring layout shifts from banners and fonts

FAQ

Short answers to common Core Web Vitals questions.

What are Core Web Vitals?

LCP (loading), CLS (stability), and INP (responsiveness) metrics focused on real user experience.

What should I fix first?

Start with the LCP element (often the hero image), then fix CLS sources, then reduce long tasks for INP.

Lab vs field data?

Use lab tools to debug fast, but validate with field data because real-user metrics determine CWV.

Do CWV affect SEO?

They’re part of page experience signals and improvements usually help engagement and conversions.

Want a repeatable workflow?

Use Performance Audit Kit to document findings, prioritize fixes, and track before/after results across releases.

Open Performance Audit Kit Read quick wins