Google’s Core Web Vitals have been a ranking signal since 2021, and in 2025 they’ve only become more influential. But the conversation online is full of generic advice that doesn’t help anyone actually improve their scores.

This is the practical version.

The Metrics That Actually Matter Right Now

Largest Contentful Paint (LCP): How long until the biggest visible element loads. Target: under 2.5 seconds. This one moves the needle most directly for perceived performance.

Interaction to Next Paint (INP): Replaced First Input Delay in 2024. Measures responsiveness across all interactions during a page visit, not just the first one. Target: under 200ms.

Cumulative Layout Shift (CLS): How much the page jumps around while loading. Target: under 0.1. This one makes users furious even when they can’t name why.

What We Actually Do to Fix LCP

LCP is almost always an image problem or a render-blocking resource problem. In order of impact:

1. Preload the LCP image. If you know which image will be the LCP element, tell the browser:

<link rel="preload" as="image" href="/hero.webp" />

2. Serve next-gen formats. WebP is now universal. AVIF gives you another 20–30% on top of WebP for browsers that support it. Use the <picture> element to serve both.

3. Size images correctly. Serving a 3000px image in a 600px container is one of the most common LCP killers we see. Use srcset and sizes attributes properly.

4. Eliminate render-blocking resources. Use defer on scripts and font-display: swap on web fonts. Audit your <head> for anything that blocks the first paint.

What We Actually Do to Fix INP

INP problems are almost always JavaScript problems. The browser can’t respond to interactions while it’s busy executing JavaScript.

Break up long tasks. Any JS task over 50ms can cause INP problems. Use scheduler.postTask() or simply setTimeout(fn, 0) to yield to the browser between chunks of work.

Defer non-critical third-party scripts. Analytics, chat widgets, marketing tags — these are consistently the worst INP offenders. Load them after the page is interactive.

Virtualize long lists. Rendering 500 DOM nodes when the user can see 20 is expensive. Libraries like react-virtual can dramatically reduce the rendering burden.

What We Actually Do to Fix CLS

CLS is usually the easiest to fix once you understand the cause.

Set explicit dimensions on images and videos. The browser needs to know how much space to reserve:

<img src="photo.webp" width="800" height="600" alt="..." />

Reserve space for dynamic content. If you have content that appears asynchronously (ads, chat widgets, consent banners), reserve space with CSS min-height before it loads.

Don’t inject content above existing content. Banners and sticky notifications that push content down are CLS killers. Use fixed positioning or design them to not affect document flow.

The Measurement Problem

Field data vs. lab data — this distinction trips up a lot of teams.

Chrome DevTools and Lighthouse give you lab data: controlled measurements from your machine. Real User Monitoring (RUM) gives you field data: what your actual visitors experience on their actual devices.

Google uses field data for ranking. Lab data is for debugging.

Set up real user measurement with something like web-vitals.js feeding into your analytics platform, and watch the 75th percentile — that’s what Google uses to evaluate your site.

The Honest Truth About CWV

Most sites have one or two big wins that will dramatically move their scores. Finding those wins usually takes an audit rather than guessing.

If your scores are struggling and you want a systematic diagnosis of what to fix first, reach out. We do performance audits that prioritize fixes by impact-to-effort ratio — so you spend your engineering time where it actually counts.