Core Web Vitals: The Complete Guide (LCP, CLS, INP)

What are Core Web Vitals?

Three UX metrics created by Google that directly influence SEO rankings. A poor score equals lost visibility.

1. LCP – Largest Contentful Paint

What it measures: How long it takes for the largest element (usually a hero image or heading) to appear.

Goal: < 2.5 seconds

Common reasons for a poor score: - Large unoptimised hero images - Slow server response (TTFB > 600ms) - Render-blocking CSS/JS files - Web fonts loading late

Solutions: - Preload the critical hero image: <link rel="preload" as="image"> - Use WebP/AVIF formats - Implement a CDN - Use font-display: swap

2. CLS – Cumulative Layout Shift

What it measures: How much the page "jumps" during loading. It is frustrating when a button moves just as you try to click it.

Goal: < 0.1

Common causes: - Images without width/height attributes - Ads that load later - Web fonts (FOUT) - Dynamic content

Solutions: - Add width and height to all images - Reserve space for advertisements - Use font-display: optional or swap with size-adjust - Implement CSS aspect-ratio

3. INP – Interaction to Next Paint

Replaced FID in 2024. Measures how quickly the page responds to a user's click, tap, or keypress.

Goal: < 200ms

Common causes: - Heavy JavaScript tools - Excessive event listeners - Third-party scripts (chat, analytics) - Unoptimised React/Vue pages

Solutions: - Code splitting - Debounce and throttle techniques - Use requestIdleCallback() for heavy tasks - Remove unused third-party scripts

How to measure?

1. PageSpeed Insights – pagespeed.web.dev
2. Google Search Console → Core Web Vitals report
3. Chrome DevTools → Performance tab
4. CrUX (Chrome User Experience Report) – real user data

Summary

Core Web Vitals are technical but essential. The good news: proper maintenance improves all three simultaneously. The bad news: without maintenance, they tend to degrade with every new plugin update.