Core Web Vitals for WordPress: a practical guide

Core Web Vitals are three measurements Google uses to judge real-world page experience. They are measured on real visits in Chrome and reported in Search Console and PageSpeed Insights.

The three metrics and their thresholds

A page passes when at least 75% of visits meet the “good” threshold for each metric. These thresholds come from web.dev’s explanation of how they were defined. INP replaced the older First Input Delay metric in 2024.

Field data vs lab data

• Field data comes from real Chrome users visiting your site. It’s what Google uses. You’ll find it at the top of PageSpeed Insights and in Search Console under Core Web Vitals.
• Lab data comes from a single simulated load (Lighthouse). It’s useful for debugging but it isn’t your score.

If your site doesn’t have enough traffic for field data, use lab data on a mobile profile as your guide.

Fixing LCP on WordPress

LCP is usually the hero image or the main heading. To make it appear sooner:

1. Don’t lazy-load the hero image. Lazy loading is great below the fold, but it delays the image that matters most. Give it fetchpriority="high" instead.
2. Serve the right size. Use srcset and sizes so phones don’t download a 2,000-pixel image. WordPress does this for images in content; make sure your builder does too.
3. Cut render-blocking CSS and JavaScript. Every stylesheet and synchronous script in the <head> delays the first paint.
4. Self-host fonts and use font-display: swap so text shows immediately.
5. Improve server response with page caching and good hosting. Aim for a time to first byte under 800 ms.

Fixing INP

INP is about how busy the browser’s main thread is when someone interacts.

1. Ship less JavaScript. This is the biggest lever. Every script has to be parsed and run, and long tasks block taps.
2. Defer what you can. Scripts that aren’t needed for the first view should load with defer.
3. Audit third-party scripts. Chat widgets, heatmaps and ad tags often cost more than your whole theme.
4. Avoid heavy scroll and mouse effects on mobile. They run constantly while the visitor is trying to use the page.

Fixing CLS

CLS happens when something loads late and pushes content around.

1. Always set image dimensions. width and height attributes let the browser reserve space.
2. Reserve space for embeds and ads. Give them a fixed aspect ratio.
3. Load fonts carefully. Self-hosted fonts with similar fallback metrics shift less.
4. Don’t insert banners above existing content after the page loads. Cookie notices should overlay, not push.

Where page builders fit in

Your page builder affects all three metrics. It decides how much JavaScript is sent (INP), how images are output (LCP and CLS), and how many stylesheets block rendering (LCP).

Akram handles these by default. Pages are rendered on save, scripts load per widget, images get srcset, dimensions and priority hints automatically, and fonts are self-hosted. On our benchmark page, that meant a 1.54 s LCP and 0 ms of blocking time on a throttled mobile profile.

A quick checklist

• Test on mobile, not desktop.
• Hero image: not lazy, right size, high priority.
• Under 100 KB of JavaScript on content pages if you can.
• Dimensions on every image and embed.
• Two font families at most, self-hosted.
• Re-check Search Console 28 days after changes, since field data is a rolling window.