Why Core Web Vitals still matter
Google's Page Experience signals have been part of the ranking algorithm since 2021. Four years in, the majority of sites — including many built by professional agencies — still fail on at least one metric. That's a competitive opportunity.
This guide covers what the three key signals actually measure, how to diagnose failures and the fixes that move the dial in real projects.
The three signals, plainly
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element — usually a hero image or heading — to render. Google's threshold: under 2.5 seconds. Most of the sites we audit land between 3.5s and 6s.
CLS (Cumulative Layout Shift) measures visual stability — how much content jumps around as the page loads. The classic culprit: images without declared dimensions, or web fonts causing text reflow. Threshold: under 0.1.
INP (Interaction to Next Paint) replaced FID in 2024. It measures how long the browser takes to respond to any user interaction — click, tap, keystroke. Threshold: under 200ms.
Diagnosing your site
Start with [PageSpeed Insights](https://pagespeed.web.dev). It gives you both lab data (simulated) and field data (real users via Chrome UX Report). Field data is what Google uses for ranking — don't optimise for the lab number alone.
For deeper diagnosis, use WebPageTest with a throttled mobile connection. This surfaces issues that fast developer machines hide.
LCP: the fixes that actually work
1. Preload the hero image. Add `<link rel="preload" as="image">` for the LCP element. This is the single highest-impact fix on most sites.
2. Use next-gen image formats. WebP or AVIF at the right size for the viewport. A 2400px image served to a 390px screen is a direct LCP penalty.
3. Eliminate render-blocking resources. Third-party scripts (analytics, chat widgets, A/B testing tools) loaded in `<head>` without `async` or `defer` are the primary culprit in slow LCP scores.
4. Use a CDN for static assets. Cloudflare's free tier is enough for most sites. Edge caching cuts TTFB dramatically.
CLS: the fixes that actually work
1. Set explicit width/height on all images and videos. The browser needs aspect ratio information before the image loads to hold the space.
2. Use `font-display: optional` or preload web fonts. Invisible-text flash (FOIT) causes CLS on systems that haven't cached the font.
3. Reserve space for ad slots and embeds. If something is going to appear, declare its dimensions upfront.
INP: the harder problem
INP is the signal most teams underestimate. It's not about page load — it's about runtime performance. Long JavaScript tasks block the main thread and make the page feel unresponsive.
Profile with Chrome DevTools Performance tab. Look for tasks over 50ms. Common sources: large event handlers, React re-renders triggered by scroll events, and analytics payloads processed synchronously.
Solutions:
- Break long tasks with `setTimeout(..., 0)` or `scheduler.postTask`
- Debounce scroll and resize handlers
- Use React 18's concurrent features (Suspense, useTransition) to defer non-urgent updates
The compounding effect
Fixing Core Web Vitals rarely produces a single dramatic ranking jump. The effect compounds over 3–6 months as Google's crawl re-evaluates your field data. Pair it with solid on-page SEO and the combined effect is substantial.
On a recent client project (Veative Kitchen), LCP improvements from 4.8s to 1.9s contributed to a #1 ranking for their target cuisine terms within 90 days — alongside a broader local SEO push.