Core Web Vitals Explained – What Affects Your Google Ranking

Google uses three Core Web Vitals metrics as part of its ranking signal. They measure how a real visitor experiences your site loading and reacting — not server response time, not synthetic benchmarks. If your scores are poor, your search rankings suffer. This guide explains what each metric measures, what causes bad scores, and the changes that actually improve them.

The three metrics

INP replaced FID (First Input Delay) in March 2024. If you see old guides referencing FID, the principles transfer.

Pass thresholds at the 75th percentile of real visits — meaning 75% of your visitors must have a “good” experience, not just lab tests.

Where to check your scores

• PageSpeed Insights (pagespeed.web.dev) — single-page lab test. Quick, easy.
• Search Console → Core Web Vitals report — actual visitor data from your site. The ranking-relevant one.
• Chrome DevTools → Lighthouse — local testing while you work.
• Web Vitals Chrome extension — see scores as you browse your own site.

Search Console takes 28 days to gather data after major changes; PageSpeed shows results immediately. Use PageSpeed for quick checks; Search Console for what Google actually uses for ranking.

LCP — Largest Contentful Paint

“How long before the visitor sees the main content?” Usually a hero image, large headline, or video poster.

Common LCP killers:

• Huge unoptimized hero images. 5MB JPEG when 100KB WebP would look identical.
• Slow server response (TTFB). Heavy plugins, no caching, database bottlenecks.
• Render-blocking CSS/JS. Massive stylesheets and scripts blocking display.
• Fonts loading before paint. Custom fonts delaying text appearance.
• External resources. Google Fonts, third-party widgets blocking critical render.

Fixes:

• Compress hero images aggressively. Convert to WebP. Image optimization guide.
• Enable LiteSpeed Cache or equivalent. LiteSpeed guide.
• Preload critical hero image: <link rel="preload" as="image" href="hero.webp">.
• Add font-display: swap to font CSS to prevent invisible text during load.
• Defer non-critical JavaScript with defer or async attributes.

CLS — Cumulative Layout Shift

“Does the page jump around as it loads?” If you click a button just as an ad loads above it and accidentally click the ad — that’s bad CLS in action.

Common CLS killers:

• Images without dimensions. Browser doesn’t reserve space; content shifts when image loads.
• Ads loading asynchronously. Especially Google AdSense without sized slots.
• Embedded videos and iframes. Same dimension issue.
• Custom fonts swapping (FOUT). Different font metrics cause text reflow.
• Content injected via JavaScript after initial render. Cookie banners that push content down.

Fixes:

• Always specify width and height on <img> tags — even if you size them with CSS.
• Reserve space for ad slots: container divs with fixed minimum height.
• For dynamically loaded content, reserve placeholder space with skeleton screens.
• Use font-display: optional for fonts where minor FOUT is acceptable.
• Position notification banners as overlays (position: fixed) rather than reflowing content.

INP — Interaction to Next Paint

“How quickly does the page respond when I click or tap?” Measures the latency between user action and visible response.

Common INP killers:

• Heavy JavaScript blocking the main thread. Long-running scripts make every interaction slow.
• Too many third-party scripts. Analytics, chat widgets, marketing tags all compete for thread time.
• Inefficient event listeners. Code that runs on every scroll or mousemove.
• Large React/Vue/Angular bundles. Framework hydration time blocks interaction.

Fixes:

• Audit and remove unnecessary JavaScript. WordPress: deactivate plugins you don’t need.
• Defer non-essential scripts with defer attribute.
• Use requestIdleCallback for non-urgent work.
• Code-split frameworks so only needed code loads.
• Replace heavy plugins with lighter alternatives (e.g. Elementor → Bricks Builder, JetEngine → custom).

Quick wins ranked by typical impact

1. Enable LiteSpeed Cache with QUIC.cloud — biggest single LCP improvement on iWebVault.
2. Convert images to WebP + lazy load below-fold images.
3. Add width/height to all images. Single biggest CLS fix.
4. Audit and remove unused plugins. Each one ships JS and CSS that hurts INP.
5. Use a CDN. CDN basics.
6. Preload critical resources. Hero image, primary font.
7. Minimize third-party tags. Live chat, analytics, marketing pixels.

Measuring real visitor experience (Field Data)

PageSpeed Insights shows two sections:

• Field Data (CrUX) — Real Chrome users over past 28 days. What Google uses for ranking.
• Lab Data (Lighthouse) — Simulated test in a controlled environment.

These often disagree. A site might score 95 in Lighthouse but fail field data because real users have older devices or slower connections.

Focus on Field Data when it’s available. New or low-traffic sites don’t have enough data and only show Lab metrics.

WordPress-specific tips

• Theme matters. GeneratePress, Astra, Kadence — built for performance. Avoid heavy multipurpose themes.
• Builder choice matters. Bricks < Gutenberg < Elementor < Divi by performance impact.
• Use a few quality plugins, not many average ones. 10 plugins is usually fine; 50 plugins is rarely fine.
• Image plugins help. ShortPixel, Imagify, EWWW automate WebP conversion.
• Disable jQuery if your theme doesn’t need it. Major INP win on modern themes.

Common questions

“My Lighthouse score is 90+. Why am I still failing Core Web Vitals?” Lab vs Field. Lighthouse simulates a fast device on fast network. Real users have variety. Field data wins for ranking.

“How long after changes before scores update?” PageSpeed Lab — instant. Field data (Search Console) — 28 days rolling window. Be patient after fixes.

“Mobile passes but desktop fails — or vice versa?” Google ranks based on mobile data primarily. Focus mobile first.

“Can I just buy a ‘pagespeed plugin’ to fix everything?” No single plugin fixes everything. Some help (caching, image optimization). Others claim to fix Core Web Vitals via JS deferral that breaks your site. Audit carefully.

“How much does Core Web Vitals affect ranking actually?” Google calls it a “tiebreaker signal” — between two equally relevant pages, faster page wins. Don’t expect ranking miracles from pure speed; do expect penalties for being notably slow.

What’s next

• Image optimization in depth: Image optimization.
• Caching headers and browser cache: Browser caching.
• CDN setup: CDN basics for site owners.
• LiteSpeed for WordPress: LiteSpeed Cache setup.

Core Web Vitals reward sites built thoughtfully and punish sites bloated with plugins and unoptimized media. The fixes aren’t exotic — image optimization, caching, and removing what you don’t need — but they require deliberate attention. Sites that work on them see Field Data move from yellow to green within a 28-day window.