Core Web Vitals: What LCP, INP, and CLS Actually Measure — and How to Fix Them
Core Web Vitals matter less for rankings than expected — but improving them still makes sites faster and better for users. Here's what LCP, INP, and CLS actually measure, what causes failures in each, and how to prioritise improvements.
By sadiqbd · June 8, 2026
Core Web Vitals failed to be a major ranking factor — and still improved the web anyway
When Google announced Core Web Vitals as a ranking factor in 2021, the SEO industry braced for significant ranking disruptions. The anticipated upheaval didn't materialise — Google later confirmed the signal has a relatively small weight in rankings compared to content relevance, backlinks, and other established factors.
What Core Web Vitals did accomplish: they gave developers and SEOs a shared vocabulary and measurement framework for page experience. Sites that invested in improvement got faster, and faster sites genuinely serve users better regardless of the ranking impact. Understanding the three metrics — what they measure, what causes failures, and how to fix them — is practical knowledge independent of any ranking calculation.
LCP: Largest Contentful Paint
What it measures: the render time of the largest visible element in the viewport when the page loads. This is typically a hero image, a large heading, or a full-width video thumbnail.
Good threshold: under 2.5 seconds Needs improvement: 2.5–4 seconds Poor: over 4 seconds
Why it matters: LCP is the best single measure of how quickly the page appears to load from a user's perspective. When the largest element appears, users perceive the page as "loaded."
What typically causes slow LCP
Slow server response (TTFB): if the server takes 1.5 seconds to respond, LCP can't be under 2.5 seconds even with perfect front-end optimisation. Fix: switch to a faster hosting tier, implement a CDN, enable server-side caching.
Render-blocking resources: CSS and JavaScript in the <head> that must execute before the browser renders. Fix: defer non-critical JavaScript (<script defer> or <script async>), move non-critical CSS to load asynchronously.
Unoptimised LCP resource: the hero image is 4MB and uncompressed. Fix:
- Serve images in WebP or AVIF format (30–50% smaller than JPEG)
- Size images correctly — don't serve a 3000px image in a 600px container
- Add
fetchpriority="high"to the LCP image element to preload it - Use a CDN to serve the image from nodes close to users geographically
Client-side rendering: the LCP element is rendered via JavaScript, so the browser must download, parse, and execute JavaScript before rendering the element. Fix: server-side render the LCP content or use server-side rendering for the critical above-fold content.
INP: Interaction to Next Paint
What it measures: the time between a user interaction (click, tap, keyboard press) and the next time the browser repaints in response. INP replaced FID (First Input Delay) as a Core Web Vitals metric in March 2024.
Good threshold: under 200ms Needs improvement: 200–500ms Poor: over 500ms
INP measures responsiveness across the entire page session (the worst interaction), not just the first interaction like FID did.
What causes slow INP
Long tasks on the main thread: JavaScript that runs continuously for more than 50ms blocks the browser from responding to interactions. Fix: break long tasks into smaller chunks using scheduler.postTask() or setTimeout().
Excessive JavaScript execution: large JavaScript bundles take time to parse and execute, competing with user interaction handling. Fix: code splitting (loading only the JS needed for the current page), tree shaking (removing unused code), deferred loading of third-party scripts.
Third-party scripts: analytics, chat widgets, advertising scripts, and A/B testing tools often add significant main thread work. Fix: audit third-party script load times, load non-critical third parties with defer or after user interaction.
Large DOM: browsers with tens of thousands of DOM nodes take longer to update in response to interactions. Fix: virtualise large lists (render only visible items), simplify DOM structure.
CSS animations and transitions: some CSS animations force browser layout and paint work that contends with interaction handling. Fix: use transform and opacity for animations (these run on the compositor thread, not the main thread).
CLS: Cumulative Layout Shift
What it measures: the sum of all unexpected layout shifts throughout the page's lifespan. A layout shift is when visible content moves position unexpectedly — not from a user action like scrolling or clicking, but because something loaded and pushed other content.
Good threshold: under 0.1 Needs improvement: 0.1–0.25 Poor: over 0.25
The score is calculated as impact fraction × distance fraction for each shift. A large element shifting a large distance scores higher than a small element shifting slightly.
Common CLS causes
Images without dimensions: when an image loads and the browser doesn't know its dimensions in advance, the layout collapses when the image arrives. Fix: always include width and height attributes on <img> elements:
<img src="hero.jpg" width="1200" height="630" alt="..." />
Or in CSS, use the aspect-ratio property for flexible-width images.
Web fonts causing text shifts: custom fonts loading after the page renders cause text to repaint in the new font, potentially shifting layout. Fix: font-display: optional prevents the shift by only using the custom font if it loads before first paint; font-display: swap maintains the performance benefit but can cause shifts. Preloading critical fonts reduces the window for shifts.
Dynamically injected content: banners, ads, cookie consent dialogs, and notifications inserted above existing content push that content down. Fix: reserve space for these elements before they load using CSS placeholders.
Ads and iframes without reserved space: ads are a major CLS source — they load dynamically and displace surrounding content. Fix: use the min-height CSS property to reserve space for ad slots before the ad loads.
Measuring Core Web Vitals
Lab data (simulated):
- PageSpeed Insights (pagespeed.web.dev) — measures from Google's servers using Lighthouse
- Lighthouse in Chrome DevTools — measures on your machine in a throttled environment
- WebPageTest — detailed waterfall analysis
Field data (real users):
- Google Search Console → Core Web Vitals report — shows real user data aggregated from Chrome users
- CrUX (Chrome User Experience Report) — the same data, accessible via API
- Real User Monitoring (RUM) tools — analytics platforms that measure CWV from actual visitors
Lab data identifies issues; field data confirms what real users experience. A good lab score doesn't guarantee a good field score if real users have slower devices or connections.
Prioritising improvements
Not all Core Web Vitals issues have equal impact. Prioritise:
- LCP issues on high-traffic pages — the most visited pages with the largest improvement potential
- CLS issues on any page — layout shifts are among the most frustrating user experiences, especially on mobile
- INP issues on interaction-heavy pages — particularly landing pages, product pages, and forms
Use the Search Console Core Web Vitals report to identify which URL groups are in "Poor" or "Needs Improvement" — these are the pages where real users are experiencing problems.
Frequently Asked Questions
How much do Core Web Vitals affect rankings? Google has confirmed it's a "tiebreaker" signal — used when other signals (relevance, backlinks, content quality) are relatively equal between competing pages. In practice, a page with excellent content and mediocre Core Web Vitals will typically outrank a page with poor content and perfect Core Web Vitals.
Do Core Web Vitals affect mobile rankings more than desktop? Google's mobile-first indexing means pages are evaluated based on their mobile version. Core Web Vitals scores are reported separately for mobile and desktop in Search Console. Mobile scores are generally more impactful.
What's the fastest improvement for CLS?
Adding width and height attributes to all images is often the fastest fix with the most CLS impact. Many sites have significant CLS from images without dimensions — it's a one-line fix per image that can dramatically improve the score.
Is the SEO Checklist free? Yes — completely free, no sign-up required.
Core Web Vitals are the right metrics to care about not because of their ranking weight but because they measure things that genuinely affect whether users stay on or abandon a page. Improving them serves users first, rankings second.
Try the SEO Checklist free at sadiqbd.com — audit any page against the complete set of technical, on-page, and performance SEO factors.
