Skip to content
QualityWordPress

How to Improve Core Web Vitals on WordPress

Learn how to improve Core Web Vitals on WordPress: what LCP, INP, and CLS mean, how to measure them, and practical fixes for each metric.

QualityWordPress 7 min read
Laptop screen displaying website performance scores and Core Web Vitals metrics

Core Web Vitals are Google’s set of real-world performance metrics that measure how users experience your pages — not just how fast your server responds, but how quickly content appears, how smoothly it loads, and how responsive the page is when someone interacts with it. They’re a confirmed ranking signal, and they appear directly in Google Search Console, making them one of the clearer feedback loops available for site owners.

If your WordPress site is failing Core Web Vitals, it’s worth understanding what each metric measures before reaching for fixes, because the causes — and solutions — differ significantly between them.

The Three Core Web Vitals

LCP — Largest Contentful Paint

LCP measures loading performance: specifically, how long it takes for the largest visible element on the page to render. That element is usually a hero image, a large heading, or a background image in a banner section.

Good score: under 2.5 seconds Needs improvement: 2.5–4 seconds Poor: over 4 seconds

LCP is typically the most impactful metric for WordPress sites because heavy hero images and unoptimized hosting are common.

INP — Interaction to Next Paint

INP replaced the older FID (First Input Delay) metric in March 2024. Where FID only measured the delay before the browser began processing the first interaction, INP measures the full duration of every interaction throughout the page’s lifecycle — clicks, taps, keyboard input — and reports the worst-case result.

Good score: under 200 milliseconds Needs improvement: 200–500 ms Poor: over 500 ms

INP failures on WordPress sites are often caused by heavy JavaScript from plugins — sliders, chat widgets, tracking scripts — that block the main thread during user interactions.

CLS — Cumulative Layout Shift

CLS measures visual stability: how much page content unexpectedly moves around as the page loads. A layout shift happens when an element (image, ad, font, embedded widget) loads and pushes other content out of position.

Good score: under 0.1 Needs improvement: 0.1–0.25 Poor: over 0.25

On WordPress, CLS is most often caused by images without explicit width and height attributes, late-loading web fonts, and ads or embeds that don’t have reserved space.

How to Measure Core Web Vitals

There are two types of Core Web Vitals data: lab data (simulated tests) and field data (real user measurements from Chrome users, collected via the Chrome User Experience Report / CrUX).

Google’s ranking signal uses field data. Lab data from tools is useful for diagnosing problems, but passing a lab test doesn’t guarantee you pass in the field if real users on slower devices and networks have worse experiences.

Key measurement tools:

  • PageSpeed Insights: Shows both lab and field data for any URL. Free and requires no account. Start here.
  • web.dev/measure: Runs a Lighthouse audit with actionable recommendations grouped by impact.
  • Google Search Console: The Core Web Vitals report shows field data grouped by URL clusters, split by mobile and desktop. This is the authoritative source for your site’s status.
  • GTmetrix: Detailed waterfall charts useful for identifying which specific resources are slow.

Always check mobile scores separately from desktop. Google’s mobile-first indexing means mobile performance matters more for rankings, and mobile scores are almost always lower.

Fixing LCP on WordPress

LCP failures are nearly always image or hosting related. Work through these fixes in order of impact:

1. Optimize your hero image The hero image is the LCP element on most WordPress pages. Compress it aggressively, convert it to WebP format, and make sure it’s sized correctly for each breakpoint. Tools like Imagify or ShortPixel handle this automatically for WordPress media.

2. Preload the LCP image The browser needs to discover and fetch the LCP image as early as possible. Add a <link rel="preload"> tag for your hero image, or use a caching plugin that does this automatically. WP Rocket and LiteSpeed Cache both include LCP preload options.

3. Upgrade your hosting A slow Time to First Byte (TTFB) inflates every other metric. If your server takes over 600ms to respond, no amount of front-end optimization will fully compensate. Managed WordPress hosting from providers with data centers close to your audience makes a measurable difference.

4. Enable caching Page caching serves pre-built HTML to visitors instead of generating it dynamically on each request. WP Rocket, W3 Total Cache, and LiteSpeed Cache are the most capable options. Most quality hosts also offer server-level caching.

5. Use a CDN A content delivery network (CDN) serves static assets — images, CSS, JavaScript — from servers geographically close to the visitor. Cloudflare offers a capable free tier. Most managed hosts bundle CDN access.

PageSpeed Insights report showing LCP, INP, and CLS scores for a webpage

Fixing INP on WordPress

INP problems are almost always caused by JavaScript. On WordPress, the main culprits are:

Plugins that load large scripts on every page: Chat widgets, popup builders, slider plugins, social sharing toolbars, and analytics scripts all contribute to main-thread congestion. Audit which plugins load scripts site-wide and remove or replace any that aren’t earning their overhead.

Defer or delay non-critical scripts: Load JavaScript that isn’t needed for initial interactivity after the page has rendered. Most caching plugins include a “delay JavaScript execution” feature that defers scripts until the user interacts with the page. Be cautious — deferring the wrong scripts can break functionality.

Use a lightweight theme: Page builders like Elementor and Divi load substantial JavaScript. If INP is a persistent problem, consider switching to a faster, block-based theme or a lightweight starter theme. You can browse our free themes for performance-focused options.

Check for render-blocking scripts in the <head>: Scripts loaded synchronously in <head> block rendering entirely. Use the PageSpeed Insights waterfall to identify them and move them to defer or async loading.

Fixing CLS on WordPress

Always set width and height on images: Missing image dimensions are the most common CLS cause. WordPress 5.5 added automatic width and height attributes for images in the media library. If your theme or page builder overrides these, you’ll see CLS. Check with the CLS diagnostic in PageSpeed Insights.

Reserve space for ads and embeds: If you run ads (Google AdSense, Mediavine, etc.) or embedded content (YouTube, Twitter, etc.), wrap them in a container with a defined height so the layout doesn’t shift when they load.

Handle web fonts carefully: Unstyled text that swaps to a web font causes layout shifts if the fonts have different metrics. Use font-display: optional or font-display: swap strategically, and preload critical fonts. Google Fonts loaded via @import in CSS are especially prone to causing CLS.

Avoid inserting content above the fold after load: Notification bars, cookie consent banners, and sticky headers that animate in after the page loads can all cause CLS if not handled carefully.

Theme and Hosting Impact on Core Web Vitals

Your theme and hosting are upstream of everything else. Optimizing images and caching won’t get you to “Good” scores if your theme loads 500KB of JavaScript or your server TTFB is consistently over 1 second.

Theme selection: Block themes and lightweight themes (like Twenty Twenty-Four, Astra, Kadence, or GeneratePress) typically score better than page-builder-heavy themes. Test any theme with PageSpeed Insights before committing.

Hosting: Shared hosting with resource limits struggles under traffic. VPS, cloud hosting, or managed WordPress hosting with built-in caching and CDN gives you the foundation to score well. The most common hosting bottleneck is TTFB — check it specifically in PageSpeed Insights before other optimizations.

For a complete performance optimization guide, see our article on how to speed up WordPress.

Connecting CWV to the Rest of Technical SEO

Core Web Vitals are one component of a broader technical SEO picture. Fast pages help with rankings, but they need to be crawlable, properly indexed, and free of duplicate content issues before speed improvements fully pay off. Our technical SEO guide for WordPress covers the full picture — from robots.txt and sitemaps to HTTPS and crawl error fixes.

Additional reading: Google’s Core Web Vitals documentation explains exactly how each metric is collected and used as a ranking signal. web.dev’s performance section has deep-dive guides for each metric.

Core Web Vitals Quick Reference

MetricMeasuresGoodCommon WordPress Causes
LCPLargest element load time< 2.5sUnoptimized hero images, slow hosting, no caching
INPInteraction responsiveness< 200msHeavy plugin JavaScript, render-blocking scripts
CLSLayout stability< 0.1Images without dimensions, late-loading fonts, ads

Conclusion

Improving Core Web Vitals on WordPress is methodical work: measure with PageSpeed Insights and Search Console, identify which metric is failing and why, apply targeted fixes, and re-measure. Most WordPress sites can reach “Good” scores on all three metrics with the right hosting, a caching plugin, and image optimization — without radical changes to content or design.

Start with the metric furthest from “Good” and the fixes most likely to have the largest impact. LCP improvements from image optimization and caching often produce the fastest gains. INP fixes require auditing your JavaScript load, which takes more investigation but can dramatically improve the experience on interactive pages.

Related articles

Never miss a free theme

Get new free themes and practical WordPress guides in your inbox.