Core Web Vitals Explained
Understanding LCP, CLS, INP and how to improve them.
Core Web Vitals Explained#
Google's Core Web Vitals are the three critical metrics that determine user experience and search ranking impact.
LCP — Largest Contentful Paint#
What: How long until the biggest visible element (hero image, heading) loads.
| Rating | Threshold |
|---|---|
| 🟢 Good | ≤ 2.5 seconds |
| 🟡 Needs work | 2.5–4.0 seconds |
| 🔴 Poor | > 4.0 seconds |
How to fix: Optimise images (WebP/AVIF), use a CDN, preload critical resources, reduce server response time.
CLS — Cumulative Layout Shift#
What: How much the page layout shifts unexpectedly while loading.
| Rating | Threshold |
|---|---|
| 🟢 Good | ≤ 0.1 |
| 🟡 Needs work | 0.1–0.25 |
| 🔴 Poor | > 0.25 |
How to fix: Set explicit width/height on images and videos, avoid inserting content above existing content, use CSS aspect-ratio.
INP — Interaction to Next Paint#
What: How quickly the page responds to user interactions (clicks, taps, key presses).
| Rating | Threshold |
|---|---|
| 🟢 Good | ≤ 200ms |
| 🟡 Needs work | 200–500ms |
| 🔴 Poor | > 500ms |
How to fix: Break up long JavaScript tasks, defer non-critical scripts, use web workers for heavy computation.
How LemWatch Tracks These#
LemWatch runs Lighthouse audits on both mobile and desktop viewports. You can compare scores side-by-side on any site's Performance tab, with 7/30/90-day trend charts.
Why Both Mobile and Desktop Matter#
Google uses mobile-first indexing, so mobile scores directly impact your search ranking. Desktop scores matter for user experience on larger screens. LemWatch tracks both independently.
Related Articles
Understanding Your Dashboard
Learn what each metric, score, and indicator means.
Setting Performance Budgets
Set thresholds and get alerted when metrics exceed your limits.
Image Optimisation Checks
Identify oversized, unoptimised, and poorly formatted images on your site.
Font Loading Analysis
Analyse how fonts are loaded on your site and identify performance issues.