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.