WordPress Core Web Vitals: How to Measure and Improve LCP, CLS, and INP
A practical guide to improving Core Web Vitals on WordPress sites — covering Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint with actionable fixes.
Want the fastest WordPress hosting?
Rocket.net delivers 83ms average TTFB - up to 153% faster than competitors. Try it risk-free.
Google’s Core Web Vitals are a set of real-world performance metrics that measure how users actually experience your site. They’re also ranking signals — meaning poor scores can hurt your visibility in search results.
For WordPress sites, Core Web Vitals are one of the most actionable performance areas. The underlying issues — slow server response, render-blocking resources, unstable layouts — are well-understood, and most of them can be fixed without custom development.
This guide covers each of the three Core Web Vitals metrics, how to measure them, and the most effective fixes for WordPress specifically.
The Three Core Web Vitals
Google defines three metrics as Core Web Vitals:
- LCP (Largest Contentful Paint) — How long it takes for the main content to appear on screen. Target: under 2.5 seconds.
- CLS (Cumulative Layout Shift) — How much visible content shifts unexpectedly during page load. Target: under 0.1.
- INP (Interaction to Next Paint) — How quickly the page responds to user interactions (clicks, taps, keyboard input). Target: under 200ms.
Google replaced FID (First Input Delay) with INP in March 2024. INP measures the full lifecycle of interactions, not just the first one, making it a more complete picture of responsiveness.
How to Measure Core Web Vitals
Before optimizing, measure where you actually stand.
Google Search Console
Search Console’s Core Web Vitals report shows field data — real measurements from Chrome users on your site. It separates results by mobile and desktop and flags which URLs are failing. This is the most important data source because it reflects your actual visitors.
PageSpeed Insights
PageSpeed Insights combines field data (from the Chrome User Experience Report) with lab data from Lighthouse. It shows per-URL scores and specific recommendations.
Chrome DevTools
The Performance panel in Chrome DevTools lets you record a page load and see exactly where time is spent — useful for diagnosing specific bottlenecks.
Web Vitals Extension
Google’s Web Vitals Chrome extension shows real-time LCP, CLS, and INP values as you browse your site. Fast feedback during development.
Improving LCP on WordPress
LCP measures how quickly the largest visible element loads — usually a hero image, featured image, or large heading block.
1. Start with a Fast Server
LCP is partly determined by Time to First Byte (TTFB). If the server takes 800ms to respond, that’s already 800ms before the browser has downloaded anything. Fast managed hosting with server-level page caching dramatically reduces TTFB and gives LCP a head start.
2. Preload the LCP Image
If your LCP element is an image, tell the browser to fetch it as early as possible using a preload hint in the <head>:
<link rel="preload" as="image" href="/wp-content/uploads/hero-image.webp">
Some WordPress performance plugins (LiteSpeed Cache, WP Rocket) can add this automatically for hero images they detect.
3. Avoid Lazy-Loading the LCP Image
WordPress 5.5+ applies loading="lazy" to images automatically. For most images this is correct — but not for the LCP image. If your hero image is lazy-loaded, the browser deliberately delays fetching it.
To override:
// In your theme's functions.php or a plugin
add_filter('wp_lazy_loading_enabled', function($default, $tag_name, $context) {
// Theme-specific: disable lazy loading on the featured image in singular views
if ($tag_name === 'img' && is_singular() && in_the_loop() && has_post_thumbnail()) {
return false; // Use with caution — apply only to the hero/featured image
}
return $default;
}, 10, 3);
Most themes expose this differently — check your theme’s template for fetchpriority="high" support, which is the preferred modern approach.
4. Use Modern Image Formats
WebP images are typically 25–35% smaller than equivalent JPEG or PNG files at comparable quality. Smaller images load faster, which improves LCP. The Imagify or ShortPixel plugins can convert existing uploads to WebP and serve them to compatible browsers automatically.
5. Use a CDN
If your visitors are geographically spread out, a CDN serves images from edge nodes close to the user. Reducing the physical distance content has to travel lowers latency and speeds up LCP for remote visitors.
Improving CLS on WordPress
CLS measures layout instability — visible elements shifting position after initial render. It’s annoying for users and penalized by Google.
1. Set Explicit Dimensions on Images
The most common cause of CLS is images without explicit width and height attributes. When the browser encounters an <img> without dimensions, it has no way to reserve space before the image loads. When it does load, surrounding content gets pushed around.
WordPress has set width and height attributes on images since version 5.5. If your theme or a plugin is stripping these, that’s the first thing to fix.
2. Reserve Space for Ads and Embeds
Ad slots, YouTube embeds, and iframes that load asynchronously frequently cause CLS. Reserve the space they’ll occupy before they load using explicit dimensions or CSS aspect-ratio:
.ad-slot {
min-height: 250px; /* Match the ad unit height */
}
.video-embed-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
3. Avoid Injecting Content Above Existing Content
Banners, cookie notices, and newsletter popups that push content down after load contribute to CLS. If you use these, configure them to overlay content rather than push it, or ensure space is reserved before they appear.
4. Use font-display: swap Carefully
Custom fonts that use font-display: swap can cause text to jump as the fallback font is replaced by the loaded font — especially if the fonts differ in size. Use font-display: optional (which skips swap if the font isn’t ready) or size your fallback font to closely match your custom font’s metrics.
Improving INP on WordPress
INP measures responsiveness to user interactions. A high INP (above 500ms) means the page feels sluggish when users click, type, or tap. This is often caused by JavaScript blocking the main thread.
1. Audit What JavaScript Is Running
Use Chrome DevTools’ Performance panel to record an interaction and inspect the main thread activity. Look for long tasks — any task over 50ms can delay the browser’s response to user input.
2. Defer or Remove Unnecessary Scripts
WordPress themes and plugins frequently enqueue JavaScript that isn’t needed on every page. Plugins like Asset CleanUp or Perfmatters let you disable specific scripts per page type (e.g., only load WooCommerce scripts on shop pages).
For scripts you can’t remove, defer them so they don’t block the main thread during initial load:
add_filter('script_loader_tag', function($tag, $handle, $src) {
$defer = ['my-plugin-script', 'another-script']; // Handles to defer
if (in_array($handle, $defer)) {
return '<script defer src="' . esc_url($src) . '"></script>';
}
return $tag;
}, 10, 3);
3. Break Up Long JavaScript Tasks
If your theme or a required plugin runs long synchronous tasks, the browser can’t respond to input during that time. Long tasks should be broken up using setTimeout or the Scheduler API to yield between chunks. This typically requires code-level changes — flag it to your theme developer or plugin author.
4. Minimize Third-Party Scripts
Analytics, chat widgets, social embeds, and marketing pixels all add JavaScript that runs on the main thread. Each one contributes to INP. Audit which third-party scripts are actually providing value and remove the rest.
Google Tag Manager helps consolidate scripts, but a GTM container that loads many tags can itself become a bottleneck — audit what’s firing in the container.
WordPress Plugins That Help With Core Web Vitals
Several plugins address multiple Core Web Vitals issues in one place:
- WP Rocket — Page caching, preloading, lazy loading, defer JS, CLS fixes for images, and more. Commercial plugin with broad support.
- LiteSpeed Cache — Free, comprehensive plugin that includes image optimization, CSS/JS minification, and object caching. Works best on LiteSpeed servers but functions on others.
- Perfmatters — Lightweight script manager for disabling unnecessary code per page. Pairs well with a full-featured cache plugin.
- Imagify / ShortPixel — Dedicated image optimization with WebP conversion.
No plugin fixes everything automatically. They reduce the manual effort but still require testing after configuration — plugin settings interact with themes and other plugins in ways that can introduce new problems.
How Hosting Affects Core Web Vitals
Hosting performance has a direct effect on LCP through TTFB, and an indirect effect on INP through slower server-side rendering times.
A server that responds in 200ms leaves more of the 2.5-second LCP budget for network and rendering. A server that takes 1.5 seconds to respond leaves almost nothing.
Rocket.net is built specifically for WordPress performance. Their infrastructure includes:
- Server-level page caching that delivers cached pages without executing PHP or querying the database
- Redis object caching built-in on every plan
- Global CDN with edge nodes worldwide to minimize latency for images and static assets
- HTTP/3 support for faster connection setup
These are the hosting-level factors that directly reduce TTFB and speed up LCP — improvements no client-side plugin can replicate. If your Core Web Vitals work is being held back by a slow host, that’s the highest-leverage change available.
Putting It Together: A Practical Checklist
LCP
- TTFB is under 600ms (check with PageSpeed Insights)
- LCP image is not lazy-loaded
- LCP image has a
fetchpriority="high"attribute or preload hint - Images are served in WebP format
- A CDN is in use for static assets
CLS
- All images have explicit width and height attributes
- Ad slots and embeds have reserved space
- No content injected above the fold after load
- Custom fonts don’t cause significant text shift
INP
- No long JavaScript tasks on critical pages (check in DevTools)
- Unnecessary scripts are deferred or disabled per page
- Third-party scripts are audited and minimized
Core Web Vitals aren’t a one-time fix — they’re an ongoing measurement and improvement practice. The metrics are based on real user data, so changes in your content, plugins, or hosting will affect them. Setting up regular monitoring via Google Search Console ensures you catch regressions before they become ranking issues.
Looking for WordPress hosting that gives your Core Web Vitals a strong foundation? Rocket.net delivers fast TTFB, built-in CDN, and Redis caching on every managed WordPress plan — the server-side performance baseline that makes everything else work better.
Performance tip: Your hosting provider has a bigger impact on WordPress speed than any plugin or optimization. We've tested dozens of hosts - Rocket.net consistently delivers the best results.
View Rocket.net Pricing →Ready to switch to faster WordPress hosting?
Join thousands who've made the switch to Rocket.net. Try any plan for just $1.
Start Your $1 Trial30-day money-back guarantee • Free migrations • No contracts
Related Articles
10 Best WordPress Caching Plugins for 2026 (Speed Test Results)
Comprehensive testing of the top WordPress caching plugins. Real performance data, pros/cons, and our honest recommendations for faster loading times.
How to Reduce Time to First Byte (TTFB) in WordPress
TTFB is one of the most impactful performance metrics for WordPress sites. Learn what causes slow TTFB and the most effective ways to fix it.
WordPress Image Optimization: A Complete Guide to Faster Load Times
Images are often the largest assets on a WordPress page. Learn how to compress, resize, convert to modern formats, and deliver images efficiently to dramatically improve page speed.