Core Web Vitals: Improving LCP, INP, and CLS

6 min read|SEO
Website performance metrics and Core Web Vitals dashboard

Google uses Core Web Vitals to rank pages. Here’s how to diagnose and fix each one — with the wins that matter most.

What Core Web Vitals Are

Core Web Vitals are three real-user performance metrics Google uses as a ranking signal: Largest Contentful Paint (LCP) — how fast the main content loads. Interaction to Next Paint (INP) — how responsive the page feels to interactions. Cumulative Layout Shift (CLS) — how stable the layout is while loading. All three must be ‘Good’ for the page to pass, measured as the 75th percentile of real users.

LCP: Under 2.5 Seconds

LCP measures when the largest visible element finishes rendering — usually a hero image, video, or heading. The fixes, in order of impact: (1) compress the LCP image to WebP/AVIF and preload it, (2) inline above-the-fold CSS, (3) defer non-critical JavaScript, (4) use a CDN (edge caching), (5) optimize server response time. The single biggest LCP win on most sites is resizing a 2MB hero image to 200KB.

INP: Under 200 Milliseconds

INP replaced FID in March 2024. It measures the longest interaction delay on the page — clicks, taps, key presses. Bad INP comes from long main-thread tasks: heavy JavaScript, unoptimized React renders, third-party scripts. Fixes: code-split large bundles, use React.memo and useMemo appropriately, defer analytics scripts, and audit third-party scripts ruthlessly. One bad third-party script can blow every page’s INP score.

CLS: Under 0.1

CLS measures unexpected layout shifts during load. Most common causes: images and videos without width/height attributes, ads or embeds injected without reserved space, and fonts that cause reflow when they load (FOUT). Fixes: always include width and height on images, reserve space for ads with min-height, use font-display: optional to avoid reflow, and avoid inserting content above already-visible content.

Measuring CWV Correctly

Two data sources: lab data (PageSpeed Insights Lighthouse) and field data (Chrome UX Report). Lab data is a single synthetic test — useful for debugging. Field data is aggregated real-user measurements from real Chrome users — this is what Google actually uses for ranking. Check field data in Search Console’s Core Web Vitals report, not lab tools. A page that scores 98 in Lighthouse but fails CWR for real users is what Google actually ranks against.

Which Pages to Fix First

Don’t try to fix CWV site-wide at once. Pull your top 20 pages by organic traffic and fix those. A single template fix (hero image component) often improves CWV on hundreds of pages at once. Monitor Search Console’s CWV report — it groups URLs by template, so when you fix one page you’ll see the whole group shift from ‘Poor’ to ‘Needs Improvement’ to ‘Good’ over 28 days as the field data rolls in.

Need help with seo?

Get a free audit of your seo setup. We’ll show you exactly where the opportunities are.

Get Free Audit →
Get ProposalInstant SEO Audit