Core Web Vitals & Performance — IndxQ SEO

08 // Performance

Core Web
Vitals

LCP, CLS, INP, and TTFB — the four performance signals Google uses as ranking factors. Real diagnostic workflows, per-metric fix guides, field vs lab data explained, and a prioritised action table ranked by effort-to-impact ratio.

15 in-depth guides

Updated March 2026

INP replaces FID

Core Web Vitals — Pass Thresholds

LCP Largest Contentful Paint

4.8s

CLS Cumulative Layout Shift

0.18

INP Interaction to Next Paint

140ms

TTFB Time to First Byte

820ms

Good

Pass

Needs Work

Improve

Poor

Fail

// Snapshot of a typical unoptimised site. LCP and TTFB are the most common failures — and the highest-leverage fixes for organic ranking recovery.

Thresholds

The Exact Thresholds
Google Uses to Score You

Core Web Vitals are measured at the 75th percentile of real user sessions — meaning 75% of your visitors must pass the threshold for your page to get a “Good” rating. Lab tools show one data point; field data shows how real users experience your site.

Metric	Good ✓	Needs Improvement	Poor ✗	Ranking Signal
LCP Largest Contentful Paint — how fast the main content loads	≤ 2.5s	2.5–4.0s	> 4.0s	Direct ranking factor — most impactful CWV for SEO
CLS Cumulative Layout Shift — visual stability as page loads	≤ 0.1	0.1–0.25	> 0.25	Ranking factor — also directly damages UX and conversions
INP Interaction to Next Paint — responsiveness to user inputs	≤ 200ms	200–500ms	> 500ms	Replaced FID in March 2024 — measures all interactions not just first
TTFB Time to First Byte — server response speed	≤ 800ms	800ms–1.8s	> 1.8s	Not a direct CWV but a prerequisite — high TTFB makes LCP impossible to pass

Metric Deep-Dives

Per-Metric Causes
and Fixes

Every metric has a distinct set of root causes and corresponding fixes. Treating them as one problem leads to wasted effort. Here’s the targeted playbook for each.

LCP

Largest Contentful Paint

How fast the largest visible element renders — typically a hero image or H1

≤2.5s ≤4s >4s

Root Causes

Unoptimised hero image — large JPEG/PNG served without compression or WebP conversion
Render-blocking resources — JS/CSS in <head> delaying first paint
No LCP image preload — browser discovers hero image too late in waterfall
Slow server TTFB — hosting too slow before any content can load
CSS background-image for LCP element — not preloadable, discovered later
Third-party scripts (chat widgets, ad scripts) blocking render

Fixes (Priority Order)

Add <link rel=”preload” as=”image”> for hero image in <head>
Convert hero to WebP and serve at correct display dimensions
Add fetchpriority=”high” attribute to the LCP <img> element
Move hero image to <img> tag (not CSS background) so it’s preloadable
Defer all non-critical JS — use async/defer attributes
Upgrade hosting or add CDN to reduce TTFB below 800ms first

CLS

Cumulative Layout Shift

Visual stability — how much page elements unexpectedly shift during load

≤0.1 ≤0.25 >0.25

Root Causes

Images without explicit width and height attributes — browser can’t reserve space
Web fonts causing FOUT/FOIT — text reflows when font loads
Dynamically injected content (ads, banners, cookie notices) pushing content down
Animations that change layout properties (top, left, margin, width)
Lazy-loaded content above the fold without reserved dimensions

Fixes (Priority Order)

Add explicit width and height to every <img> tag — single largest CLS fix
Add font-display: optional or swap and preload critical fonts
Reserve space for ads with min-height on ad containers before they load
Use transform: translate() for animations instead of top/left/margin
Set aspect-ratio CSS on image containers as fallback for older browsers

INP

Interaction to Next Paint

Responsiveness to all user interactions — clicks, taps, keyboard input

≤200ms ≤500ms >500ms

Root Causes

Long JavaScript tasks (>50ms) blocking the main thread during interactions
Heavy event handlers running synchronously on click/tap
Excessive DOM size (>1,500 nodes) slowing style recalculation
Third-party tag managers firing scripts on every interaction
Unoptimised React/Vue rendering causing unnecessary component re-renders

Fixes (Priority Order)

Break up long tasks with scheduler.yield() or setTimeout(0) between chunks
Debounce/throttle expensive event handlers (scroll, resize, input)
Reduce DOM size — consolidate elements, remove hidden/unused markup
Defer third-party scripts that don’t need to fire on every interaction
Use React.memo, useMemo, useCallback to prevent unnecessary re-renders

TTFB

Time to First Byte

Server response time — the prerequisite for every other metric to pass

≤800ms ≤1.8s >1.8s

Root Causes

Shared hosting with overloaded servers — TTFB of 1.5–4s common
No server-side caching — PHP/database runs on every request
No CDN — visitors far from origin server experience high latency
Slow database queries on large WordPress or WooCommerce installs
PHP 7.x instead of 8.1+ — significantly slower request processing

Fixes (Priority Order)

Enable full-page caching — LiteSpeed Cache, WP Rocket, or host-level cache
Add a CDN (Cloudflare free tier sufficient for most sites)
Upgrade to PHP 8.1+ — up to 47% faster than PHP 7.4
Move to managed WordPress hosting if on shared (Kinsta, WP Engine)
Add Redis object caching to reduce repeat database queries

Measurement

Field Data vs Lab Data:
Which One Actually Matters

This is the most misunderstood aspect of Core Web Vitals. Google’s ranking signal uses field data — real user measurements from Chrome users visiting your site. Lab data tools give you a reproducible diagnostic starting point, but they are not what Google sees.

Field Data (CrUX) — What Google Uses

Aggregated from real Chrome users over the past 28 days. Reflects actual visitor device speeds, network conditions, and geographic distribution. This is the signal in Google’s ranking algorithm.

🔍

Google Search Console — Core Web Vitals Report Most authoritative source. Shows field data aggregated across your pages with URL-level detail. First place to check — 28-day rolling window.

📊

PageSpeed Insights Shows both field data (CrUX, top of page) and lab data (Lighthouse, bottom). Check the field data section — “Discover what your real users are experiencing.”

🌐

CrUX Dashboard (Looker Studio) Google’s free dashboard for historical field data trends by URL or origin. Shows 75th percentile data over time — essential for measuring improvement after fixes.

Lab Data — For Diagnosis Only

Simulated single-run measurements in a controlled environment. Reproducible but not representative of real users. Use for diagnosis and verifying fixes — not for measuring ranking impact.

🔦

Lighthouse (Chrome DevTools) Built into Chrome — run via DevTools → Lighthouse tab. Best for local diagnosis. Run in incognito mode to avoid extension interference. Throttles to simulated mobile by default.

⚡

WebPageTest Most detailed waterfall view. Shows exactly which resource is blocking LCP and at what millisecond. Filmstrip view shows visual progress. Use for deep LCP diagnosis.

📱

GTmetrix Combines Lighthouse with its own waterfall. Useful for scheduled monitoring and comparing before/after optimisation. Supports multiple test locations and device types.

Critical workflow: Use GSC Core Web Vitals report to identify which pages are failing in field data → use PageSpeed Insights or WebPageTest to diagnose the specific cause in lab conditions → implement fixes → wait 28 days for field data to update → recheck GSC. Never declare victory based on a green Lighthouse score alone — field data is what moves rankings.

Diagnostic Workflow

The 7-Step CWV
Diagnostic Process

Most CWV fixes fail because people skip straight to implementation without diagnosing the actual root cause. This workflow finds the real culprit before you touch a line of code.

Check GSC Core Web Vitals Report for Failing URLs

GSC → Core Web Vitals → Mobile report. Identify which specific URL groups are “Poor” or “Needs improvement.” Don’t optimise based on your homepage score alone — category or blog post templates often have different failure modes.

GSC → Core Web Vitals

Identify Which Specific Metric is Failing

Click into a failing URL group in GSC to see which metric (LCP, CLS, INP) is the primary failure. Address the most impactful metric first — LCP failures almost always have the biggest ranking impact. Don’t try to fix everything simultaneously.

GSC → URL group detail

Run PageSpeed Insights on a Representative URL

PSI shows field data (CrUX) at top — check this matches GSC. Then scroll to lab data (Lighthouse) for diagnosis. Look at the Opportunities and Diagnostics sections — these map directly to fixes. Always test mobile, not just desktop.

PageSpeed Insights

Use WebPageTest to Find the Specific Blocking Resource

For LCP failures: WebPageTest’s waterfall view shows exactly which resource is the LCP element and what’s delaying it. The filmstrip view shows visual progress frame-by-frame. Look for the longest horizontal bar before the LCP marker — that’s your primary fix target.

WebPageTest.org

Identify and Measure the LCP Element Specifically

In Chrome DevTools: Performance tab → record page load → find the LCP marker in the timeline. Or run this in Console: new PerformanceObserver(list => console.log(list.getEntries())).observe({type:’largest-contentful-paint’, buffered:true}). This shows exactly which element is LCP and its render time.

Chrome DevTools → Performance

Implement Fixes in Priority Order (See Impact Table)

Implement one fix at a time and re-test in lab tools after each change. This lets you attribute improvement to specific changes. Bundling multiple fixes together makes it impossible to know what moved the needle — critical knowledge if field data doesn’t improve.

Wait 28 Days — Then Recheck Field Data in GSC

Field data is a rolling 28-day aggregate. Green Lighthouse scores appear immediately after fixes but field data takes up to 28 days to reflect improvements. Request indexing of fixed pages in GSC to accelerate crawling. Monitor CrUX Dashboard weekly for trend direction.

GSC → CrUX Dashboard

Code Reference

LCP Optimisation
Code Snippets

These are the three highest-impact LCP fixes that can be implemented directly in HTML or a WordPress functions.php — no plugin required.

<!– 1. Preload LCP hero image — add to <head> BEFORE any CSS –>
<link
  rel=“preload”
  as=“image”
  href=“/img/hero.webp”
  type=“image/webp”
  fetchpriority=“high”
/>

<!– 2. LCP image markup — use <img> not CSS background, set fetchpriority –>
<img
  src=“/img/hero.webp”
  alt=“Hero description”
  width=“1200”
  height=“600”
  fetchpriority=“high”
  decoding=“async”
/>

<!– 3. Defer all non-critical scripts (add defer to every non-essential <script>) –>
<script src=“/js/analytics.js” defer></script>
<script src=“/js/chat-widget.js” defer></script>

/* 4. Fix CLS — always set width + height on every img */
img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height); /* modern browsers */
}

/* 5. Font loading — prevent FOUT causing CLS */
@font-face {
  font-family: ‘MyFont’;
  src: url(‘/fonts/myfont.woff2’) format(‘woff2’);
  font-display: optional; /* or ‘swap’ — ‘optional’ prevents CLS best */
}
      

Prioritisation

CWV Fixes Ranked by
Effort vs Impact

Use this table to prioritise your implementation order. Start with high-impact, low-effort fixes. Don’t spend days on a fix that moves the needle 5ms when a 10-minute image optimisation would drop LCP by 1.5 seconds.

Fix	Metric	Typical LCP Improvement	Effort
Add LCP image preload link	LCP	0.5–1.5s reduction	Low — 10 min
Add fetchpriority=”high” to LCP img	LCP	0.3–0.8s reduction	Low — 5 min
Convert hero image to WebP	LCP	0.5–2.0s reduction	Low — plugin/CDN
Add width + height to all images	CLS	Eliminates most CLS	Low — template edit
Enable full-page server caching	TTFB + LCP	0.5–2.5s TTFB reduction	Low — plugin config
Add CDN (Cloudflare free)	TTFB + LCP	40–80% TTFB reduction	Low — DNS change
Defer all non-critical JS	LCP	0.3–1.0s reduction	Medium — test carefully
Self-host Google Fonts	LCP + CLS	0.2–0.5s + CLS fix	Medium — 30 min
Remove unused CSS per page	LCP	0.1–0.4s reduction	Medium — Asset CleanUp
Upgrade PHP to 8.1+	TTFB	20–47% TTFB reduction	Medium — host setting
Migrate to managed WP hosting	TTFB + LCP	1–3s total reduction	High — migration
Break up long JS tasks (>50ms)	INP	100–300ms INP reduction	High — dev work

Full Checklist

Core Web Vitals
Optimisation Checklist

Run this before and after any optimisation work. Use field data in GSC to track real improvement — not lab scores.

LCP — Largest Contentful Paint

▸Identify the LCP element on your key page templates using Chrome DevToolsPerformance tab → record → find LCP marker. Or use PerformanceObserver in console. Know exactly what you’re optimising before starting.

▸LCP element is an <img> tag — not a CSS background-imageCSS background images are not preloadable and are discovered late in the rendering waterfall. Convert to <img> tag immediately.

▸LCP image has <link rel=”preload”> in <head> before all stylesheetsPreload order matters — the link must appear before any CSS that might delay it. Test with WebPageTest to confirm early discovery.

▸LCP image has fetchpriority=”high” attribute on the img elementfetchpriority=”high” tells the browser to prioritise this over all other image requests. Supported in all modern browsers since 2022.

▸LCP image is WebP, served at correct display dimensions, under 150KBAn uncompressed 2.4MB hero image vs 120KB WebP is the single most common LCP failure cause. Use Squoosh.app to benchmark before/after.

▸TTFB is under 800ms — confirmed in PSI field data, not just LighthouseLCP cannot pass if TTFB is failing. Fix TTFB first (caching, CDN, hosting upgrade) before optimising images or preloads.

CLS — Cumulative Layout Shift

▸All <img> and <video> elements have explicit width and height attributesThis single fix eliminates CLS for the majority of content sites. Missing dimensions = browser can’t reserve space = layout shift when image loads.

▸Web fonts use font-display: optional or swap — no FOUT causing text reflowFOUT (Flash of Unstyled Text) causes text blocks to reflow when fonts load, shifting content below them. font-display: optional prevents this entirely.

▸Ad containers have a minimum height reserved before ads loadAds injecting above content without reserved space is a classic CLS trigger. Set min-height on ad wrapper elements equal to the smallest expected ad size.

▸Cookie banners and notification bars use position: fixed — not pushing contentBanners that push content down when they appear after load cause significant CLS. Use fixed/sticky positioning so they overlay rather than displace.

INP — Interaction to Next Paint

▸Run Chrome DevTools Performance Profiler on key interactions (clicks, form submits)Record → interact → look for long tasks (red bars) in the main thread. Any task over 50ms is a long task and a potential INP contributor.

▸Total Blocking Time (TBT) in Lighthouse under 200ms — proxy for INP in lab dataTBT is the lab-data proxy for INP. High TBT = long tasks blocking main thread = slow interaction response. Aim for TBT < 200ms in Lighthouse.

▸Third-party scripts (Tag Manager, chat, ads) deferred and not firing on every interactionGoogle Tag Manager firing on every click event is a common INP killer. Audit what GTM is firing and remove/delay unnecessary triggers.

Measurement & Monitoring

▸GSC Core Web Vitals report checked monthly — field data only, not Lighthouse scoresGSC → Core Web Vitals. Field data is what affects rankings. A green Lighthouse score with red field data still means ranking is affected.

▸CrUX Dashboard (Looker Studio) set up for historical field data trackingGoogle’s free dashboard at bit.ly/crux-dash — shows 75th percentile data by metric over time. Essential for proving improvement after fixes.

▸WebPageTest run monthly on key page templates — waterfall reviewed for new regressionsPerformance regressions are common after plugin updates, theme changes, or new ad scripts. Monthly WPT runs catch them before field data degrades.

Failing Core Web Vitals?

We’ll Diagnose Your CWV and
Send a Prioritised Fix List.

Request Free CWV Audit →

Top Core Web Vitals Guides

Where our readers start when Lighthouse scores don’t match GSC field data — or when LCP just won’t budge.

🔥 Most Read · Core Web Vitals

Why Your Lighthouse Score Is Green But Your CWV Report Is Red — Field Data vs Lab Data Explained

The most common Core Web Vitals confusion we see: a perfect 100 Lighthouse score alongside a GSC report full of “Poor” URLs. This guide explains exactly why these diverge, which one Google actually uses for ranking, and the correct workflow for measuring real-world improvement.

🕐 20 min readDefinitive guide

LCP

LCP Under 2.5s: The Complete Step-by-Step Fix Guide (With Real Before/After Data)

Every LCP fix tested across 50+ sites, ranked by average improvement. Includes the preload link setup, fetchpriority implementation, and WebP conversion workflow.

🕐 24 min read

CLS

Fixing Cumulative Layout Shift: The 5 Root Causes and How to Eliminate Each

Images without dimensions, web fonts, ad injection, late-loading content — each cause has a specific fix. This guide walks through diagnosing which one is hitting your score.

🕐 16 min read

INP

INP Explained: What Replaced FID, How to Measure It, and How to Fix Slow Interactions

INP replaced FID in March 2024 and is harder to pass. This guide covers what it measures, why it’s a better signal than FID, and the diagnostic workflow for finding long tasks.

🕐 18 min read

TTFB

TTFB Optimisation: Why Server Speed Is the Prerequisite for Every Other CWV Fix

You can’t pass LCP with a 2-second TTFB — no amount of image optimisation or preloading will compensate. This guide covers the full TTFB reduction stack from caching to hosting migration.

🕐 14 min read

Free CWV Audit

Failing CWV?
Let’s Find the Cause.

Tell us about your site and we’ll run a full Core Web Vitals audit — field data analysis from GSC, lab data diagnosis via PageSpeed Insights and WebPageTest, root cause identification, and a prioritised fix list. Free, no pitch.

GSC Core Web Vitals field data analysis — which URLs are failing and why
LCP element identification and root cause diagnosis
CLS source identification — images, fonts, ads, or injected content
INP / long task audit via Chrome DevTools Performance profile
TTFB check — hosting, caching, and CDN assessment
Platform-specific fixes: WordPress, Shopify, or custom
Prioritised fix list ranked by effort-to-impact ratio

No sales calls

Response within 48 hours

100% free

Request Your Free CWV Audit

// Reviewed by a performance engineering specialist.

First Name *

Last Name *

Email Address *

Site URL *

Which metric(s) are failing? *

Platform / CMS *

Current PageSpeed Insights mobile score (if known)

Anything else we should know?

✓

Audit Request Received

We’ll analyse your Core Web Vitals and send your prioritised fix list within 48 hours. Check your inbox — and spam, just in case.

WordPress SEO that actually ranks

Core Web
Vitals

The Exact Thresholds
Google Uses to Score You

Per-Metric Causes
and Fixes

Field Data vs Lab Data:
Which One Actually Matters

The 7-Step CWV
Diagnostic Process

LCP Optimisation
Code Snippets

CWV Fixes Ranked by
Effort vs Impact

Core Web Vitals
Optimisation Checklist

We’ll Diagnose Your CWV and
Send a Prioritised Fix List.

Top Core Web Vitals Guides

Failing CWV?
Let’s Find the Cause.

Sayed Iftekharul Haque — SEO Strategist & Web Designer

WordPress SEO that actually ranks

Core WebVitals

The Exact ThresholdsGoogle Uses to Score You

Per-Metric Causesand Fixes

Field Data vs Lab Data:Which One Actually Matters

The 7-Step CWVDiagnostic Process

LCP OptimisationCode Snippets

CWV Fixes Ranked byEffort vs Impact

Core Web VitalsOptimisation Checklist

We’ll Diagnose Your CWV andSend a Prioritised Fix List.

Top Core Web Vitals Guides

Failing CWV?Let’s Find the Cause.

Sayed Iftekharul Haque — SEO Strategist & Web Designer

Core Web
Vitals

The Exact Thresholds
Google Uses to Score You

Per-Metric Causes
and Fixes

Field Data vs Lab Data:
Which One Actually Matters

The 7-Step CWV
Diagnostic Process

LCP Optimisation
Code Snippets

CWV Fixes Ranked by
Effort vs Impact

Core Web Vitals
Optimisation Checklist

We’ll Diagnose Your CWV and
Send a Prioritised Fix List.

Failing CWV?
Let’s Find the Cause.