GUARDLABS
GuardLabs ยท Technical note

How to Fix Core Web Vitals on WordPress (LCP, CLS, INP)

Optimizing Core Web Vitals on WordPress requires addressing three distinct performance pillars: loading performance (LCP), visual stability (CLS), and responsiveness (INP). Here is the technical roadmap to optimize each metric.

1. Fixing Largest Contentful Paint (LCP)

LCP measures when the main content of a page has likely loaded. In WordPress, this is typically the featured image or the main heading (H1).

  • Preload the LCP Image: Prevent the browser from waiting for the CSS file to discover the featured image. Add a preload link to your <head>:
<link rel="preload" fetchpriority="high" as="image" href="https://example.com/wp-content/uploads/lcp-image.webp" type="image/webp">
  • Exclude LCP Images from Lazy Loading: Ensure your optimization plugin (e.g., WP Rocket, LiteSpeed Cache, or Perfmatters) excludes the first 1-2 images from lazy loading.
  • Implement Server-Level Caching: Use Redis, Memcached, or Nginx FastCGI caching to lower Time to First Byte (TTFB). Aim for a TTFB under 200ms.
  • Optimize Images: Convert images to WebP or AVIF format and compress them to 70-80% quality.

2. Fixing Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts. This is caused by elements changing position after the initial render.

  • Set Explicit Dimensions: Always define width and height attributes on images, video elements, and iframes to reserve space:
<img src="image.webp" width="800" height="450" alt="Optimized Image">
  • Reserve Space for Dynamic Elements: For ads or late-loading widgets, wrap them in a container div with a min-height matching the expected ad size:
.ad-container {
  min-height: 250px;
  display: block;
}
  • Optimize Custom Fonts: Avoid Flash of Unstyled Text (FOUT). Use font-display: swap; and preload critical local font files:
<link rel="preload" href="/wp-content/themes/theme/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

3. Fixing Interaction to Next Paint (INP)

INP measures page responsiveness by tracking the latency of all user interactions (clicks, taps, key presses) on the page.

  • Delay Non-Essential JavaScript: Postpone execution of third-party scripts (Google Tag Manager, Analytics, chat widgets) until first user interaction (scroll, click, or mouse movement).
  • Identify and Break Up Long Tasks: Any JS task taking longer than 50ms blocks the main thread. Use Chrome DevTools (Performance tab) to locate long tasks.
  • De-bloat Plugins: Disable unused scripts on a per-page basis using a plugin asset manager like Perfmatters.
  • Optimize DOM Size: Keep total DOM nodes under 1,000. Avoid deeply nested divs often generated by complex page builders (Elementor, Divi). Switch to Gutenberg blocks where possible.

Recommended Optimization Stack

Achieving passing Core Web Vitals scores requires a streamlined plugin stack. Avoid stacking multiple caching plugins.

  • All-in-One Caching: WP Rocket, FlyingPress, or LiteSpeed Cache (if on a LiteSpeed server).
  • Asset Management: Perfmatters (for script manager, disabling XML-RPC, localizing Google Fonts).
  • Image CDN: Bunny.net or Cloudflare Polish for automated on-the-fly optimization.

Need this done fast? order a speed audit on Kwork.

Published 2026-06-22 2 min read All articles EN / RU / ES
Need help with this?

I take on freelance fixes and builds in this area.