Core Web Vitals in WordPress: Plugins and Step-by-Step Configuration

WordPress has a reputation for being slow, but with the right configuration it can pass Core Web Vitals thresholds without issue. The problem is that most WordPress installations have plugins adding unnecessary scripts, unoptimized images, and no active page caching. This guide covers the highest-impact measures, ordered from greatest to least effect.

Pre-optimization: measure before changing anything

Before installing any plugin or changing any configuration, measure the current state of your Core Web Vitals with iRankly's Monitor. Enter your WordPress site's most important URLs (homepage, main categories, highest-traffic posts) to establish a baseline to compare against after each optimization.

Step 1: Page caching plugin (impact on LCP)

Page caching is the highest-impact optimization for LCP. Without caching, WordPress executes PHP and queries the database for every request — TTFB can be 1–3 seconds. With page caching, it serves pre-compiled static HTML — TTFB drops to 50–200ms.

Step 2: Image optimization (impact on LCP and CLS)

Unoptimized images are the most common cause of high LCP in WordPress. The current standard is serving images in WebP format with adaptive compression and correct dimensions.

1. 1.Install Imagify, ShortPixel, or Smush to automatically convert images to WebP when they are uploaded.
2. 2.Enable "aggressive" or "lossy" compression — the visual difference is imperceptible but file size is reduced by 50–70%.
3. 3.In the plugin settings, enable "automatically add width and height" to images — this eliminates CLS caused by images without dimensions.
4. 4.Enable native lazy loading for all images except the hero image (the LCP element) — that one must load with fetchpriority="high".

Step 3: LCP image preload

The largest image visible in the initial viewport — usually the post's featured image or the hero banner — must load with maximum priority. WordPress does not preload any image by default.

WP Rocket has a "Preload LCP Image" option that automatically detects the LCP image and adds the preload. If you use another plugin, you can add it manually in functions.php:

// Add preload for the featured image on single posts
add_action('wp_head', function() {
    if (is_singular() && has_post_thumbnail()) {
        $thumbnail_url = get_the_post_thumbnail_url(null, 'large');
        if ($thumbnail_url) {
            echo '<link rel="preload" as="image" href="' . esc_url($thumbnail_url) . '" fetchpriority="high">';
        }
    }
}, 1);

Step 4: Remove unused CSS and JavaScript (impact on LCP and INP)

Each WordPress plugin can add its own CSS and JS files on every page, even when only needed on a few. WP Rocket and LiteSpeed Cache have options to remove unused CSS and JS and to load scripts in a deferred manner.

• •In WP Rocket: enable "Remove Unused CSS" and "JavaScript Optimization" → "Defer JavaScript Execution".
• •In LiteSpeed Cache: enable "CSS/JS Minify" and "Load JS Deferred".
• •After enabling these options, verify the site works correctly — they can break plugins that depend on synchronously loaded JS.
• •Use the "Asset CleanUp" plugin to disable specific plugin scripts and styles on pages where they are not needed.

Step 5: CDN for serving static assets

A CDN (Content Delivery Network) serves static files (images, CSS, JS) from servers located near the user. It reduces resource download latency and improves LCP especially for users geographically distant from the main server.

• •Cloudflare (free plan): protects the server and acts as a CDN. Enable "Speed → Optimization → Auto Minify" for CSS, JS, and HTML.
• •Bunny.net or KeyCDN: cheaper paid CDNs than AWS CloudFront, with good coverage in Europe and Latin America.
• •WP Rocket + RocketCDN: native integration if you already use WP Rocket.
• •If you use Cloudflare, also enable "Rocket Loader" with caution — it can improve INP but sometimes breaks third-party scripts.

Step 6: Remove unnecessary plugins (impact on INP)

Every active plugin can add JavaScript to the frontend that executes on the main thread and increases INP. Audit your active plugins and deactivate those that are not essential for the site's operation.

1. 1.Use the "Query Monitor" plugin to identify which plugins add scripts to the frontend and how much they weigh.
2. 2.Temporarily deactivate plugins one by one and measure the impact in PageSpeed Insights after each deactivation.
3. 3.Replace plugins that add a lot of JS with lighter alternatives or custom code in functions.php when possible.
4. 4.Social sharing plugins, sliders, and live chat widgets add the most weight to the frontend — evaluate whether they are truly essential.

CWV optimization checklist for WordPress

• •☐ Page caching plugin active and configured.
• •☐ Images converted to WebP with defined width/height dimensions.
• •☐ Preload active for the LCP image on each page type.
• •☐ Lazy loading enabled for below-the-fold images.
• •☐ CSS and JS minified and loaded in deferred manner.
• •☐ CDN active for static files.
• •☐ Unnecessary plugins deactivated.
• •☐ Web fonts with font-display: swap and preload.
• •☐ Results verified with iRankly's Core Web Vitals Monitor.