WordPress Performance: A Core Web Vitals Guide

Core Web Vitals became a confirmed Google ranking signal in 2021 and most WordPress sites still fail them. After optimizing dozens of sites across different hosts and page builders, I have landed on a repeatable checklist that moves the needle every time.

LCP: Largest Contentful Paint

LCP measures how long it takes for the biggest visible element on the page to load. On most WordPress sites that is the hero image. The fastest fix is to preload it. Add this to your theme's head tag or functions.php.

function preload_hero_image() {
    echo '<link rel="preload" as="image"
          href="' . get_template_directory_uri() . '/img/hero.webp"
          fetchpriority="high">';
}
add_action('wp_head', 'preload_hero_image', 1);

INP: Interaction to Next Paint

INP replaced FID in March 2024 and it is harder to pass. It measures responsiveness across all interactions, not just the first one. The culprit on most WordPress sites is bloated JavaScript. Contact form plugins, sliders, and chat widgets loading on every page when they should not be there.

• ◆Audit loaded scripts with Chrome DevTools > Coverage tab
• ◆Defer non-critical scripts with the async or defer attribute
• ◆Load chat widgets and heavy plugins only on pages that need them
• ◆Replace heavy slider plugins with CSS-only carousels where possible

// Load contact form JS only on the contact page
function load_cf7_conditionally() {
    if ( ! is_page('contact') ) {
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'load_cf7_conditionally', 99);

CLS: Cumulative Layout Shift

Layout shift happens when elements move after the page has already rendered. The two most common causes in WordPress are images without explicit dimensions and web fonts swapping in late.

/* Always declare width and height on images */
img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Prevent font swap shift */
@font-face {
  font-family: 'YourFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* no swap = no shift */
}

Caching: The Biggest Win

No amount of image optimization beats a properly configured cache. For most shared hosting setups, WP Rocket is worth the cost. If you are on a managed host like Kinsta or WP Engine, just use their built-in cache and skip the plugin.

• ◆Enable page caching — serves static HTML, bypasses PHP entirely
• ◆Enable browser caching — returning visitors load from disk, not server
• ◆Minify and combine CSS/JS — fewer HTTP requests
• ◆Enable GZIP or Brotli compression at the server level
• ◆Use a CDN (Cloudflare free tier is enough for most sites)

Quick Audit Checklist

• ◆Hero image is WebP and preloaded with fetchpriority="high"
• ◆All images have explicit width and height attributes
• ◆Unused plugins are deleted, not just deactivated
• ◆Third-party scripts (chat, analytics, ads) are loaded asynchronously
• ◆Page cache is active and verified (check response headers for X-Cache: HIT)
• ◆Core Web Vitals pass in PageSpeed Insights on mobile

These optimizations are not a one time thing. New plugins and page updates can reintroduce issues over time. I run a PageSpeed check as part of every deployment. It takes two minutes and catches regressions before they affect rankings.