CodeClarityLab / Glossary
Ctrl K
← CodeClarityLab Home
Browse by Category
+ added · ✎ updated 7d
⚖ Terms of Use
← Back to glossary

Core Web Vitals

frontend ES2015 Intermediate

Also Known As

LCP INP CLS Web Vitals FID

TL;DR

Google's set of performance metrics — LCP, INP, and CLS — that measure loading speed, interactivity, and visual stability, used as a direct search ranking signal.

Explanation

Core Web Vitals are measured in the field (real users) and in the lab (Lighthouse). LCP (Largest Contentful Paint) measures loading — target under 2.5s. INP (Interaction to Next Paint, replaced FID) measures responsiveness — target under 200ms. CLS (Cumulative Layout Shift) measures visual stability — target under 0.1. Poor scores hurt SEO rankings and user conversion rates directly. Each metric has specific technical causes and fixes.

Common Misconception

✗ Core Web Vitals only matter for marketing sites — they affect any user-facing application; poor INP makes all interactive UIs feel sluggish regardless of content type.

Why It Matters

Google uses Core Web Vitals as a ranking signal since 2021 — poor scores directly reduce organic search traffic, and poor INP causes users to abandon interactions.

Common Mistakes

  • Optimising only for lab scores (Lighthouse) while field scores (CrUX) remain poor — real users have slower devices.
  • Large hero images without responsive srcset causing poor LCP — the single most common LCP issue.
  • Layout shifts from images without explicit width/height attributes — browsers cannot reserve space without dimensions.
  • Long main-thread JavaScript tasks blocking INP — break up work with scheduler.yield() or setTimeout.

Code Examples

✗ Vulnerable 
<!-- LCP killer — large unoptimised hero image:
<img src="hero.jpg">  <!-- No width/height (CLS), no srcset (LCP), not preloaded -->

<!-- CLS killer — element dimensions not specified:
<img src="avatar.jpg">  <!-- Jumps layout when loaded -->
✓ Fixed 
<!-- Optimised for Core Web Vitals:
<link rel="preload" as="image" href="hero-800.webp">  <!-- LCP preload -->
<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  width="800" height="400"   <!-- CLS prevention -->
  alt="Hero image"
  fetchpriority="high"
>
Added 15 Mar 2026
Edited 22 Mar 2026
Views 32

Curated in Warsaw under one editorial standard. 1,445 terms, single voice.  About this reference →

Rate this term
No ratings yet
🤖 AI Guestbook educational data only
| |
Last 30 days
0 pings F 0 pings S 0 pings S 0 pings M 1 ping T 0 pings W 0 pings T 0 pings F 0 pings S 1 ping S 0 pings M 0 pings T 1 ping W 0 pings T 0 pings F 2 pings S 0 pings S 0 pings M 0 pings T 0 pings W 0 pings T 1 ping F 2 pings S 0 pings S 0 pings M 0 pings T 0 pings W 0 pings T 1 ping F 2 pings S
Agents 2
Perplexity 1 Amazonbot 1
Perplexity 10 Amazonbot 8 SEMrush 3 Google 2 Unknown AI 2 Ahrefs 1 Qwen 1
Also referenced
Image Optimisation 24 Critical Rendering Path 23 Core Web Vitals & Page Performance 22 Render-Blocking Resources 21
How they use it
crawler 26 crawler_json 1
Related categories
performance 1.7k frontend 896
⚡ DEV INTEL Tools & Severity
🟠 High ⚙ Fix effort: Medium
⚡ Quick Fix
Fix LCP first (largest image not preloaded or slow server), then CLS (images without dimensions, dynamic content insertion), then INP (long tasks on main thread)
📦 Applies To
javascript ES2015 web
🔗 Prerequisites
🔍 Detection Hints
LCP >2.5s; CLS >0.1; INP >200ms; Lighthouse score <90; no preload on hero image
Auto-detectable: ✓ Yes lighthouse pagespeed-insights crux web-vitals-js
⚠ Related Problems
🤖 AI Agent
Confidence: Medium False Positives: Medium ✗ Manual fix Fix: Medium Context: File
✓ schema.org compliant