How to Improve Core Web Vitals in WordPress: Complete Guide

Core Web Vitals are Google’s user experience metrics — and they’re a ranking factor. Sites that pass Core Web Vitals thresholds get a boost in Google rankings. Sites that fail don’t get penalized directly, but they’re at a competitive disadvantage.

This guide explains each metric and gives you specific, actionable fixes for WordPress.

Understanding Core Web Vitals

Google measures three Core Web Vitals:

LCP (Largest Contentful Paint)

What it measures: How fast the largest visible element loads — usually your hero image or main heading. Target: Under 2.5 seconds Common WordPress causes: Unoptimized hero images, slow hosting, render-blocking resources

CLS (Cumulative Layout Shift)

What it measures: How much the page layout shifts while loading — elements moving around unexpectedly. Target: Under 0.1 Common WordPress causes: Images without dimensions, ads loading and pushing content, web fonts causing layout shift

INP (Interaction to Next Paint) — replaces FID

What it measures: How quickly the page responds to user interactions (clicks, taps, keyboard input). Target: Under 200ms Common WordPress causes: Heavy JavaScript from plugins or page builders, slow event handlers

Check Your Current Scores

Before fixing anything, measure your current scores:

1. Google PageSpeed Insights — run for both mobile and desktop
2. Google Search Console → Core Web Vitals report — real-world data from your actual visitors
3. GTmetrix — waterfall analysis to identify specific bottlenecks

Always optimize for mobile first — that’s what Google’s mobile-first indexing uses.

Fixing LCP: Largest Contentful Paint

1. Optimize Your Hero Image

The LCP element is usually the hero image. Fix it with:

• Compress the image — use WebP format and a tool like ShortPixel or Imagify
• Correct size — serve the image at the actual display size, not 4000px for a 1200px container
• Preload the image — add a preload link tag or enable it in your caching plugin: <link rel="preload" as="image" href="/hero.webp">
• Use a CDN — Cloudflare or BunnyCDN serve the image from a server near the visitor

2. Upgrade Your Hosting

TTFB (Time to First Byte) — how fast your server responds — directly affects LCP. Slow shared hosting is often the root cause. See our guide to choosing fast WordPress hosting.

3. Implement Caching

A caching plugin (WP Rocket, LiteSpeed Cache) serves pre-built pages instantly rather than generating them dynamically. This dramatically reduces TTFB and LCP.

4. Use a Lightweight Theme

Heavy themes with multiple render-blocking CSS and JS files delay LCP. See our lightweight WordPress themes guide.

Fixing CLS: Cumulative Layout Shift

1. Add Dimensions to All Images

The most common CLS cause is images without specified dimensions. The browser doesn’t know how much space to reserve, so the layout shifts when the image loads.

Fix by always adding width and height to <img> tags. Modern themes and page builders do this automatically, but check older content.

2. Reserve Space for Ads and Embeds

If you run display ads, use ad slots with defined minimum heights. Without reserved space, ads push content down when they load.

3. Avoid Dynamically Injected Content Above Existing Content

If a plugin injects a cookie banner, notification bar, or popup above existing content without reserving space, it causes CLS. Set fixed heights or use min-height on containers.

4. Use Font-Display: Swap

Web font loading can cause CLS as the browser switches from the fallback font to the custom font. Use font-display: swap in your CSS to minimize this. Google Fonts includes this automatically when you use their recommended embed code.

Fixing INP: Interaction to Next Paint

INP issues are typically caused by heavy JavaScript.

1. Audit Your JavaScript

Use PageSpeed Insights or Chrome DevTools to identify long tasks — JavaScript that runs for more than 50ms on the main thread. Common culprits:

• Page builder JavaScript (Elementor can be heavy)
• Analytics scripts loading synchronously
• Social share plugins with real-time counters
• Heavy slider/animation plugins

2. Defer Non-Critical JavaScript

Your caching plugin should defer or delay JavaScript that doesn’t need to run immediately. WP Rocket’s “delay JavaScript execution” feature is particularly effective.

3. Remove Unnecessary Plugins

Each plugin adds JavaScript overhead. See our guide on too many plugins and WordPress performance.

WordPress-Specific CWV Optimization Tools

• WP Rocket — handles most LCP and CLS fixes automatically
• Imagify / ShortPixel — image optimization
• Cloudflare (free) — CDN + performance optimization
• Query Monitor — identifies slow database queries

Expected Score Improvements

With the fixes above:

• Before: PageSpeed mobile 45–60 (typical unoptimized WordPress)
• After: PageSpeed mobile 80–95 (with caching, image optimization, good hosting)

Core Web Vitals Quick Win Summary

1. Compress and preload your hero image (biggest LCP impact)
2. Install WP Rocket (caching, minification, lazy loading)
3. Upgrade hosting if you’re on cheap shared
4. Add image dimensions to fix CLS
5. Defer JavaScript to improve INP

For the full picture, combine with our WordPress speed guide and technical SEO guide.

Useful resources:

• Google PageSpeed Insights
• Core Web Vitals documentation
• WP Rocket caching plugin
• Google Search Console CWV report