Google Core Web Vitals are the three performance metrics that directly influence your search rankings and user experience scores. In 2026, with INP replacing FID as an official metric, getting these right is no longer optional for any serious web project.
The targets: LCP ≤ 2.5s | INP ≤ 200ms | CLS ≤ 0.1. Miss these on mobile and you will lose ranking positions to competitors who hit them.
What Are Core Web Vitals?
- LCP (Largest Contentful Paint) - How fast does the main content load?
- INP (Interaction to Next Paint) - How quickly does the page respond to user input? Replaced FID in March 2024.
- CLS (Cumulative Layout Shift) - How stable is the layout during load?
Optimising LCP
- Preload the LCP image:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high"> - Use WebP/AVIF formats - AVIF is 30-50% smaller than WebP at equivalent quality
- Set explicit width and height on images to prevent layout recalculation
- Self-host fonts or use
font-display: swap - Use a CDN - Cloudflare free tier alone cuts TTFB by 200-400ms for Indian traffic
Optimising INP
INP measures the delay between a user interaction and the next visual update. Common causes of poor INP: long JavaScript tasks blocking the main thread, synchronous XHR, heavy event handlers on every keystroke, and third-party scripts competing for main thread time.
Fixes: break long tasks with scheduler.yield(), debounce input handlers, and load third-party scripts after user interaction.
Fixing CLS
CLS is caused by elements that shift after initial render. Common culprits: images without explicit dimensions, ads loaded without reserved space, web fonts causing text reflow, and dynamically injected banners.
Measurement Tools
- Google Search Console - Real-user CrUX data. Ground truth for rankings.
- PageSpeed Insights - Lab and field data with actionable recommendations.
- Lighthouse in Chrome DevTools - Lab simulation, great for CI checks.
- WebPageTest - Advanced waterfall analysis and filmstrips.
Quick Wins Checklist
- ✓ Compress and convert all images to WebP/AVIF
- ✓ Add explicit width/height to every image
- ✓ Preload LCP image with fetchpriority="high"
- ✓ Defer all non-critical JavaScript
- ✓ Enable gzip/Brotli compression
- ✓ Enable HTTP/2 or HTTP/3
- ✓ Use a CDN
- ✓ Self-host Google Fonts
Ready to apply these strategies?
Want a Lighthouse 90+ score? Our team handles full Core Web Vitals audits and optimisation.
Get a Free Consultation →