The Complete Guide to Core Web Vitals in 2025

Core Web Vitals are Google's attempt to put a number on something that used to be subjective: how it actually feels to use your website. Instead of vague advice like "make your site faster," Google now measures three specific things and uses them as a direct ranking signal. If you run a WordPress or BigCommerce store, understanding these three metrics — and knowing how to move them into the green — is one of the highest-leverage technical projects you can take on.

The three metrics, explained plainly

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element — usually your hero image, headline, or product photo — to finish loading. Google wants this under 2.5 seconds. Anything over 4 seconds is a failing grade. LCP is the metric most sites fail, and it's almost always caused by heavy images or a slow server response.

Interaction to Next Paint (INP) replaced the old First Input Delay metric in 2024. It measures how quickly your page responds when someone taps a button, opens a menu, or adds a product to the cart. Google wants INP under 200 milliseconds. When a page feels "laggy" or "janky," that feeling is INP. It's usually caused by heavy JavaScript blocking the main thread while the browser is trying to respond to the user.

Cumulative Layout Shift (CLS) measures visual stability — how much your content jumps around as the page loads. You've felt bad CLS when you go to tap a link and an ad loads above it, pushing the link down so you tap the wrong thing. Google wants CLS under 0.1. It's caused by images without dimensions, late-loading fonts, and injected content like banners or cookie notices.

Why this matters more than most people think

These aren't nice-to-haves. Google confirmed page experience is a ranking signal, and in competitive niches it's frequently the tiebreaker between two otherwise-equal pages. But the ranking benefit is only half the story. Core Web Vitals are a proxy for user experience, and user experience drives revenue. In our experience across dozens of stores, every 100ms of load-time improvement correlates with roughly a 1% lift in conversions. On a store doing $50K a month, that's $500 in additional monthly revenue from work you only have to do once.

Mobile is where this bites hardest. The majority of searches and a growing share of e-commerce transactions now happen on phones, and mobile devices have slower processors and flakier connections than desktops. A site that scrapes by on desktop can fail badly on a mid-range Android phone — which is exactly the device Google uses to score you.

The most common culprits

After auditing hundreds of WordPress and BigCommerce sites, the same offenders show up again and again:

• Oversized images. A 3MB hero image that displays at 800 pixels wide is the single most common cause of poor LCP. The image is often 5–10x larger than it needs to be.
• Render-blocking JavaScript. Every plugin, chat widget, analytics script, and tracking pixel adds JavaScript that the browser must process before the page becomes interactive. This wrecks INP.
• Missing image and iframe dimensions. When you don't tell the browser how tall an image will be, it reserves no space — so when the image loads, everything below it jumps. That's CLS.
• Late-loading web fonts. Custom fonts that swap in after the page renders shift your text and hurt CLS.
• Slow server response. Cheap shared hosting adds 500ms–1s of delay before the page even starts loading, which caps how good your LCP can ever be.

What a real fix looks like, step by step

Fixing Core Web Vitals is systematic, not magic. Here's the process our team runs on a typical store:

1. Measure with real tools. Start with Google's PageSpeed Insights and the Search Console Core Web Vitals report, which uses actual field data from real visitors. Lab tools like Lighthouse are useful, but field data is what Google ranks on.
2. Optimize every image. Convert to WebP or AVIF (typically 30–40% smaller than JPEG with no visible quality loss), compress aggressively, and serve each image at the exact dimensions it displays. Add lazy loading to everything below the fold so it doesn't compete with the hero for bandwidth.
3. Add explicit width and height to every image, iframe, and embed. This single change often takes CLS from failing to passing on its own.
4. Defer and minimize JavaScript. Load non-critical scripts after the page is interactive, remove plugins you're not using, and only load a plugin's assets on the pages that actually need them.
5. Implement proper caching. Page caching, browser caching, and a CDN mean returning visitors and distant users load your site nearly instantly.
6. Preload critical assets. Preload your LCP image and primary font so the browser fetches them immediately instead of discovering them late.

A common mistake to avoid

The biggest mistake we see is optimizing for the lab score instead of the field data. A site can score 95 in Lighthouse and still fail Core Web Vitals in Search Console, because Lighthouse tests a single load on a fast connection while Google scores the real experience of your actual visitors over 28 days. Always validate against field data. A related mistake is chasing a perfect 100 score — you don't need 100, you need to be in the green on all three metrics, and the effort to go from 95 to 100 is rarely worth it.

Pro tip

If you only do one thing, fix your images. Across the stores we've worked on, image optimization alone resolves the majority of LCP failures and a good share of CLS problems, and it takes a fraction of the time of a full JavaScript refactor. Start there, measure again, and then decide whether the deeper work is needed.

For most WordPress and BigCommerce stores, a complete Core Web Vitals fix takes a few focused hours and moves all three metrics into the green — and the payoff, in both rankings and revenue, shows up fast.