Google’s Core Web Vitals became confirmed ranking signals in 2021, and in 2023 INP (Interaction to Next Paint) replaces FID as the responsiveness metric. WordPress sites — notorious for plugin bloat and unoptimised media — frequently struggle with CWV. This guide covers the systematic approach to getting all three metrics into the green.
The Three Core Web Vitals
- LCP (Largest Contentful Paint) — how quickly the main content loads. Target: < 2.5s
- CLS (Cumulative Layout Shift) — visual stability. Target: < 0.1
- INP (Interaction to Next Paint) — responsiveness to user input. Target: < 200ms
LCP: The Hero Image is Usually the Problem
The LCP element is almost always the hero image. Fix it with:
fetchpriority="high"on the hero image tag — tells the browser to prioritise this fetch- Serve WebP (WordPress 5.8+ generates WebP automatically)
- Preload the LCP image in
<head>:<link rel="preload" as="image" href="hero.webp"> - Host images on a CDN with edge PoPs near your users
Caching Strategy
// wp-config.php — enable object caching
define( 'WP_CACHE', true );
// Recommended stack:
// Page cache: WP Rocket, W3 Total Cache, or server-level (Nginx FastCGI cache)
// Object cache: Redis via the Redis Object Cache plugin
// CDN: Cloudflare (free tier works well for most WordPress sites)CLS: Reserve Space for Everything That Loads Later
CLS is caused by elements that shift layout after the initial render. Common culprits:
- Images without width/height — always set dimensions or use
aspect-ratioin CSS - Web fonts — use
font-display: swapand preload critical fonts - Ads and embeds — reserve explicit height containers
- Dynamically injected content — avoid inserting content above existing content
INP: Reduce JavaScript Main Thread Blocking
INP measures how quickly the page responds to every click, tap, and keyboard interaction. Long JavaScript tasks (>50ms) block the main thread and inflate INP:
- Defer or remove non-critical scripts
- Break up long tasks with
scheduler.yield()orsetTimeout(fn, 0) - Audit your plugin stack — many plugins load JavaScript on every page
- Use
loading="lazy"anddecoding="async"on all non-hero images
Measurement
Use Chrome User Experience Report (CrUX) data via Google Search Console for real-user metrics. PageSpeed Insights provides both lab and field data. Chrome DevTools Performance panel shows long tasks and rendering bottlenecks.
Core Web Vitals optimisation is not a one-time project — each new plugin, page, or feature is a potential regression. Build CWV monitoring into your deployment workflow.
