The three metrics and what they measure
LCP (Largest Contentful Paint) measures how long it takes for the largest content element on the page to become visible. This is typically a hero image, a large text block, or a video thumbnail. Google's threshold is under 2.5 seconds for a Good rating. A site scoring Poor on LCP (above 4 seconds) will face a Page Experience ranking penalty.
INP (Interaction to Next Paint) replaced FID (First Input Delay) as the second Core Web Vitals metric in March 2024. It measures how quickly the page responds to user interactions โ clicks, taps, key presses. A site that loads quickly but feels sluggish to interact with โ common on JavaScript-heavy pages โ will fail INP even if LCP is excellent. The Good threshold is under 200 milliseconds.
CLS (Cumulative Layout Shift) measures visual stability โ how much the page layout moves unexpectedly after the initial render. Ads loading and displacing content, images without declared dimensions causing reflow, and web fonts swapping after initial render are the most common CLS sources. The Good threshold is under 0.1.
Why CWV failures are often invisible
The counter-intuitive aspect of Core Web Vitals is that failures are frequently invisible to site owners and developers. The page loads correctly in a desktop browser on a fast office WiFi connection. The developer who built the site and the account manager who visits it to check updates are both experiencing the site under conditions that are typically far better than the median user.
Google measures CWV from real user data (the Chrome User Experience Report, or CrUX) rather than from lab measurements. The real user data reflects users on mobile devices, on 4G connections, in geographic locations where latency is higher, with older device hardware. A page that scores 90+ in Lighthouse โ the lab-based measurement tool โ can score Poor in the CrUX field data because the lab environment does not replicate real-world conditions.
LCP failures: diagnosis and fixes
The most common LCP failure is an unoptimised hero image. A full-width hero image uploaded directly from a camera or design tool, without compression or WebP conversion, can easily be 3โ5MB. Loading a 4MB image on a mobile connection with latency guarantees a Poor LCP score.
The fix hierarchy for LCP: first, compress all images using ShortPixel, Imagify, or a similar tool. Target under 200KB for full-width hero images and under 100KB for section images. Convert to WebP or AVIF format โ both provide 30โ50% file size reduction over JPEG at equivalent visual quality. Second, preload the LCP element: add a `<link rel="preload" as="image">` tag for the hero image in the document head, so the browser begins loading it immediately rather than discovering it during HTML parsing. Third, serve images through a CDN (Cloudflare's free tier provides this) to reduce the latency between the server and the user.
INP failures: diagnosis and fixes
INP failures are almost always caused by excessive JavaScript execution on the main thread. When the browser is busy executing JavaScript, it cannot respond to user interactions โ the click or tap is queued until the JavaScript finishes executing. The result is a page that feels unresponsive even though it loaded quickly.
The primary diagnostic tool for INP is Chrome DevTools โ Performance tab. Record a page session with user interactions. Look for Long Tasks โ tasks that take over 50 milliseconds on the main thread. These are the INP bottlenecks.
The most effective fix for INP is reducing the JavaScript that runs on page load. Perfmatters โ a WordPress plugin designed specifically for script management โ allows specific scripts to be disabled on specific page templates. Disabling WooCommerce scripts on non-shop pages, comment scripts on pages without comments, and analytics scripts until user interaction are each small gains that collectively move INP significantly. WordPress caching plugins (WP Rocket, FlyingPress, etc.) provide script delay and defer functionality that achieves similar results.
CLS failures: diagnosis and fixes
CLS failures are typically caused by one of three things. Images without declared dimensions shift the layout when they load, because the browser cannot reserve space for an image whose dimensions are unknown until the image itself arrives. Web fonts cause layout shift when the fallback font (displayed while the web font loads) has different dimensions than the final font. Ads and dynamic content injected after the initial render push existing content down the page.
The fixes: always declare width and height on `<img>` tags โ WordPress does this automatically for images added through the media library, but custom theme development often omits it. Preload critical web fonts using `<link rel="preload" as="font">` and use `font-display: optional` or `font-display: swap` in the CSS to reduce the visual impact of font swapping. For ads and dynamic content, reserve space with a fixed-height container before the content loads.
The measurement cadence
Rank Math Pro surfaces Core Web Vitals data from GSC directly in the WordPress dashboard under Analytics โ Core Web Vitals. This is the weekly check โ open the dashboard, review the three metrics for each client site, flag any that have moved from Good to Needs Improvement or from Needs Improvement to Poor.
For more detailed diagnosis, Google Search Console โ Core Web Vitals โ URLs with Poor experience provides a page-level view. PageSpeed Insights (pagespeed.web.dev) provides the Lighthouse lab score alongside the field data CrUX score for any URL.
The monthly rhythm: check Rank Math dashboard weekly. Run PageSpeed Insights on the top 5 highest-traffic pages monthly. When a metric fails, create a Web Dev Delivery task in ClickUp for Krishna or Ranjeet with the specific URL, the specific metric, and the diagnostic from PageSpeed Insights. The fix is a web development task, not an SEO task โ but identifying the failure and creating the task is part of the SEO delivery system.
Senior Editor ยท Revenue desk
