Updated April 2026

WordPress Core Web Vitals: How to Pass LCP, INP, and CLS

Check your WordPress site for sitemap and indexing issues alongside speed problemsCheck My Sitemap Free

Why WordPress Sites Often Fail Core Web Vitals

WordPress powers over 40% of the web, and a significant portion of those sites have poor Core Web Vitals. The root causes are predictable: shared hosting with insufficient resources leading to high TTFB, heavy page builders (Elementor, Divi, WPBakery) that generate bloated HTML and CSS, unoptimized images served without WebP conversion or proper sizing, and too many plugins each loading their own scripts and styles on every page.

The good news is that WordPress's ecosystem has mature, well-tested solutions for every performance problem. The challenge is configuring them correctly — there are many "performance plugins" that make the problem worse if misconfigured. Start by measuring your current state in Google Search Console (Experience > Core Web Vitals) and Google PageSpeed Insights before making any changes.

Fixing LCP on WordPress

The most impactful LCP fix on WordPress is ensuring the hero image (or main heading, if that's your LCP element) loads immediately. WordPress 6.3+ includes native lazy loading for all images — but it incorrectly applies lazy loading to above-the-fold images. The fix: manually add fetchpriority="high" and remove loading="lazy" from your theme's hero image.

For themes you can't easily edit, plugins like Perfmatters or WP Rocket have options to automatically detect and prioritize the LCP image. Enable "Preload LCP Image" in WP Rocket's Media settings to add a preload hint in the document head automatically.

Image format optimization is also critical. Install ShortPixel, Imagify, or EWWW Image Optimizer to automatically convert JPEG and PNG uploads to WebP. These plugins can batch-process your existing media library. WebP images are typically 30-50% smaller than JPEG at equivalent quality — a major LCP improvement for image-heavy sites.

Caching Plugins and Their CWV Impact

Full-page caching is the single highest-impact WordPress performance improvement — it reduces TTFB from 500-2000ms down to 50-150ms, which cascades into better LCP. The main options:

WP Rocket is the most comprehensive and easiest to configure correctly. It handles page caching, CSS/JS minification and deferral, image lazy loading with LCP protection, and CDN integration. At $59/year, it's worth it for most sites. Enable its "Delay JavaScript Execution" for non-critical scripts to improve INP.

W3 Total Cache is free and powerful but complex. Common misconfiguration can cause bugs. If using it, focus on enabling Page Cache (disk enhanced) and Browser Cache — don't enable all features at once.

LiteSpeed Cache is the highest-performing option but requires a LiteSpeed or OpenLiteSpeed server (available on many managed WordPress hosts). Its integration with the server-level cache is significantly faster than PHP-based caching solutions.

CDN Setup for WordPress

A CDN improves TTFB for users geographically distant from your server, and serves static assets (images, CSS, JS) from edge locations worldwide. For WordPress, the best-value options are Cloudflare (free tier available, proxies your entire site) and BunnyCDN (pay-as-you-go, excellent value for asset delivery).

Cloudflare's free plan includes global CDN, DDoS protection, and the Rocket Loader feature (which can help or hurt performance — test carefully). Enable Cloudflare's Automatic Platform Optimization (APO) for WordPress ($5/month) to cache your WordPress pages at the edge, dramatically reducing TTFB globally. This is equivalent to a CDN-level full-page cache.

Fixing CLS on WordPress

Image dimensions: Every image in your WordPress media library should have explicit width and height attributes in its HTML. WordPress generates these automatically from the media library metadata — but images inserted without going through the media library (e.g., manually uploaded and embedded) may be missing dimensions. Check your CLS audit in PSI to identify which elements are shifting and add explicit dimensions.

Elementor layout shifts: Elementor's responsive CSS is loaded asynchronously on some configurations, causing content to reflow as styles load. Ensure Elementor's CSS is not deferred. In Elementor settings: set CSS Print Method to "Internal Embedding" for above-the-fold sections or use the "Improved Asset Loading" feature in Elementor Pro to load only section-specific CSS.

Ad placement: Ads inserted between content paragraphs without reserved space cause significant CLS. Always define a minimum height container for ad slots, even before the ad loads: min-height: 250px; on the ad container prevents content jumping when the ad appears.

Fixing INP on WordPress and Recommended Fast Themes

Poor INP on WordPress is typically caused by too many JavaScript events blocking the main thread. jQuery (still used by many themes and plugins) is a common culprit — it adds event listeners that run synchronously. Use WP Rocket's "Delay JavaScript Execution" or Perfmatters' Script Manager to defer non-critical scripts until user interaction.

Theme selection has the biggest long-term impact on performance. These themes are known for excellent Core Web Vitals performance: GeneratePress (lightweight, 10KB CSS, passes CWV on most installs), Astra (similar performance profile, good Elementor integration), and Kadence (slightly heavier but still fast, excellent block theme). Avoid themes that bundle sliders, animations, and custom font loaders by default — these consistently produce poor CWV scores.

For WooCommerce specifically: the cart fragment AJAX request (which runs on every page load to check cart contents) contributes to INP by keeping the main thread busy. In WP Rocket's WooCommerce settings, enable "Disable cart fragments" on pages where the cart widget isn't needed (like the homepage). This alone can improve INP by 50-100ms on WooCommerce stores.

Fix Every Technical SEO Issue on Your WordPress Site

Free analysis in 60 seconds

Check My Sitemap Free