In 2021, Google made Core Web Vitals an official ranking factor. That means how fast your site feels — not just how fast it loads — now directly affects your position in search results. If you’ve been ignoring Core Web Vitals, you’re likely losing rankings to competitors who haven’t.
This guide explains what Core Web Vitals are, how to measure them, and exactly how to improve them on a WordPress site.
What Are Core Web Vitals?
Core Web Vitals are three specific metrics Google uses to measure real-world user experience on your website:
1. Largest Contentful Paint (LCP)
Measures how long it takes for the largest visible element on the page (usually the hero image or headline) to load. Good: under 2.5 seconds. Needs Improvement: 2.5–4 seconds. Poor: over 4 seconds.
2. Interaction to Next Paint (INP)
Replaced First Input Delay in March 2024. Measures responsiveness — how quickly your page responds when a visitor clicks or taps. Good: under 200ms. Needs Improvement: 200–500ms. Poor: over 500ms.
3. Cumulative Layout Shift (CLS)
Measures visual stability — whether page elements move unexpectedly as the page loads (like a button jumping right as you’re about to tap it). Good: under 0.1. Needs Improvement: 0.1–0.25. Poor: over 0.25.
How to Check Your Core Web Vitals
- Google Search Console → Core Web Vitals report (real user data from your actual visitors)
- PageSpeed Insights (pagespeed.web.dev) — lab data plus real-world Field Data
- Web.dev/measure — detailed per-metric breakdown
- GTmetrix — waterfall analysis to identify specific slow elements
Always check mobile scores — these are weighted more heavily by Google and are typically 20-30 points lower than desktop.
How to Improve LCP (Largest Contentful Paint)
LCP is usually your biggest challenge. The most common causes and fixes:
Slow server response (TTFB)
If your server takes over 600ms to respond, LCP will be poor regardless of other optimisations. Fix: upgrade hosting, enable server-level caching (LiteSpeed Cache or WP Rocket).
Large hero image
The most common LCP element is your homepage banner image. Fix it by:
- Converting to WebP format (use Smush or ShortPixel)
- Serving it at the exact display dimensions (don’t upload 4000px wide images for a 1400px container)
- Adding
fetchpriority="high"attribute to the hero image tag — tells the browser to load it first - Preloading it in your theme header
Render-blocking resources
CSS and JavaScript that loads before the main content delays LCP. Enable CSS delivery optimisation and JavaScript defer in WP Rocket or LiteSpeed Cache.
How to Improve INP (Interaction to Next Paint)
INP issues are usually caused by heavy JavaScript execution blocking the browser’s main thread.
- Remove unused JavaScript — audit plugins and remove any that inject JS you don’t need
- Defer third-party scripts (chat widgets, analytics, social embeds) — they often cause INP failures
- Use WP Rocket’s “Delay JavaScript Execution” feature to load heavy scripts only after user interaction
How to Improve CLS (Cumulative Layout Shift)
CLS is caused by elements that load and then move. Common culprits:
Images without dimensions
Always add width and height attributes to <img> tags. This reserves space before the image loads so nothing shifts. WordPress 5.5+ does this automatically for new uploads.
Web fonts causing text shift
Custom fonts loading late cause visible text to shift from fallback font to the real font. Fix: use font-display: swap in your CSS, or use Google Fonts with display=swap parameter. WP Rocket’s “Optimise Google Fonts” handles this automatically.
Ads and embeds without reserved space
If you use Google AdSense or embedded content, always define their container dimensions in CSS before they load to prevent layout shifts.
Dynamically injected content
Banners, notifications, or cookie consent bars that appear above the fold without reserved space cause CLS. Ensure these have fixed heights or appear below main content.
WordPress Plugins That Help Core Web Vitals
- WP Rocket — addresses LCP, INP, and CLS comprehensively
- LiteSpeed Cache — excellent free option for LiteSpeed servers
- Smush — image optimisation for LCP
- Cloudflare — CDN and server response time improvement
Realistic Expectations
After optimisation, most WordPress sites achieve:
- Mobile PageSpeed score: 70-85 (up from 30-50)
- LCP: under 2.5 seconds (from 4-8 seconds)
- CLS: under 0.1 (from 0.2-0.5)
Perfect 100 scores are unrealistic for most sites — aim for “Good” in all three metrics, not perfection.
Professional Core Web Vitals Optimisation
At debrajx, we provide measurable Core Web Vitals improvements backed by real data. We audit your site, identify every issue, and fix it properly. Contact us for a free Core Web Vitals audit.
INP (Interaction to Next Paint): The Newest Core Web Vital
In March 2024, Google replaced FID (First Input Delay) with INP (Interaction to Next Paint) as a Core Web Vital. INP measures how quickly your page responds to user interactions — clicking buttons, typing in forms, selecting menu items.
Good INP: Under 200ms | Needs Improvement: 200–500ms | Poor: Over 500ms
INP issues are almost always caused by heavy JavaScript. Common culprits on WordPress sites:
- Elementor or Divi page builders — they add significant JavaScript
- Chat widgets (Tawk.to, Drift) that run expensive JavaScript on click
- WooCommerce add-to-cart animations
- Social sharing plugins that load multiple external scripts
Fix: Audit your plugins, disable unused ones, and switch to a lighter page builder (Kadence Blocks or core Gutenberg blocks have much lower INP).
Core Web Vitals for Indian Mobile Users
India’s internet speeds vary significantly. While metro users on Jio 5G may experience your site in under a second, users on 4G in tier-2/3 cities may take 3–5x longer to load the same page. Google measures actual user experience (field data) from Chrome users visiting your site.
This means your Core Web Vitals scores in Google Search Console reflect real Indian user experiences — including users on slower connections. A site that scores well in desktop lab tests may still fail Core Web Vitals in the field. Always check your Search Console → Core Web Vitals report alongside lab tools.
How to Check Your Core Web Vitals in Google Search Console
- Go to search.google.com/search-console
- Select your property (debrajx.com)
- In the left sidebar, click Core Web Vitals
- You’ll see Mobile and Desktop reports with URL groups
- Click any failing URL group to see specific pages and which metric is failing
- Click “Open Report” to see the affected URLs
Note: Field data requires at least 25 page views per URL in the past 28 days. New sites won’t have enough data yet — use PageSpeed Insights for lab data while your traffic builds.
Quick Core Web Vitals Fix Checklist for WordPress
- ✅ LCP fix: Add
<link rel="preload">for your hero image (WP Rocket does this automatically) - ✅ LCP fix: Switch to a LiteSpeed server + LiteSpeed Cache plugin for significantly faster TTFB
- ✅ CLS fix: Add explicit width and height attributes to all images in your content
- ✅ CLS fix: Avoid inserting ads, banners, or embeds above the fold that load after the page renders
- ✅ INP fix: Audit and remove heavy JavaScript plugins
- ✅ All metrics: Enable aggressive browser caching (1 year for static assets)
- ✅ All metrics: Enable Cloudflare for CDN and edge caching
Core Web Vitals directly impact your Google rankings. A site that passes all three metrics gets a ranking boost. Need help improving your Core Web Vitals scores? Contact us for a detailed technical audit.