Core Web Vitals: Page Speed and SEO Guide

Core Web Vitals are the three core performance metrics Google uses to measure the real-world experience of a page: loading speed (LCP), responsiveness to interaction (INP) and visual stability (CLS). These metrics shape both how a page feels to the user and — as a small but genuine factor — your search ranking. In this guide I explain what each metric means, which thresholds to target and how to improve them in practice.

What are Core Web Vitals and why do they matter?

To assess page experience, Google relies on real field data collected from Chrome users (CrUX — the Chrome User Experience Report). That means your scores aren't measured in a lab but on the devices and connections of your actual visitors. The three metrics are:

• LCP (Largest Contentful Paint) — the time it takes for the largest visible content element (usually an image or heading) to render. It represents loading speed.
• INP (Interaction to Next Paint) — the delay before the page visually responds to a click, tap or key press. It replaced the older FID metric in March 2024 and is now the official measure of interaction responsiveness.
• CLS (Cumulative Layout Shift) — how much elements move unexpectedly while the page loads; it measures visual stability.

For SEO, these metrics are a ranking factor, but they don't carry as much weight as content quality. Even so, between two equally good pages the faster one wins, and a poor experience already hurts conversions and bounce rate, which indirectly affects ranking.

Target thresholds

Google defines "good", "needs improvement" and "poor" thresholds for each metric. Measurement is based on the value seen by 75% of visitors (the 75th percentile):

• LCP: good ≤ 2.5 s — poor > 4 s
• INP: good ≤ 200 ms — poor > 500 ms
• CLS: good ≤ 0.1 — poor > 0.25

Your goal is to stay in the "good" zone on all three. Mobile and desktop are evaluated separately; mobile is usually harder, so make it your priority.

How to improve LCP

LCP usually stems from either a slow server response or a large, late-loading image. Steps to improve it:

• Load the most important image early. If the LCP element is a hero image, don't lazy-load it and pull it forward with fetchpriority="high".
• Use modern image formats (WebP/AVIF) and serve them at the right size; oversized images inflate LCP.
• Preconnect critical resources.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="hero.avif" fetchpriority="high" width="1200" height="630" alt="...">

To lower server response time (TTFB), caching (for example php artisan optimize in Laravel, page cache, a CDN) usually delivers the biggest win.

How to improve INP

INP is directly tied to how busy the main thread is. If JavaScript is still running heavy work when the user clicks, the browser delays the response. Solutions:

• Reduce the amount of JavaScript and strip out unused code; third-party scripts (chat widgets, analytics, ads) are the source of most INP problems.
• Break up long tasks. Split heavy computation into smaller chunks or defer it with requestIdleCallback / setTimeout.
• Prioritize visual feedback. After a click, update the UI first and leave the heavy work for later.

button.addEventListener('click', () => {
  showSpinner();              // instant visual feedback
  requestAnimationFrame(() => {
    doExpensiveWork();        // heavy work on the next frame
  });
});

How to improve CLS

CLS happens when an element shifts position during load and pushes other content — for example a late-loading ad bumping the text down. The most effective measures:

• Always set width and height on images and videos (or CSS aspect-ratio) so the browser reserves the space in advance.
• Use placeholders for dynamic content; reserve fixed space for ads and embeds.
• Load web fonts with font-display: swap and preload them where possible to reduce text reflow.

Measurement tools

You work with two kinds of data: lab (controlled tests) and field (real users). You need both:

• PageSpeed Insights — shows both CrUX field data and the Lighthouse lab score together; the most practical place to start.
• Search Console > Core Web Vitals report — lists URL groups across your whole site as "good / needs improvement / poor".
• Chrome DevTools (Lighthouse + Performance panel) — for analysing a single page in depth.
• The web-vitals library — for collecting metrics from real visitors and sending them to analytics.

Important note: metrics like INP and CLS accumulate across interactions and scrolling, so a lab test won't always reflect the real experience. Base your decisions on field data.

Frequently Asked Questions

Is FID still used?

No. FID (First Input Delay) was officially retired in March 2024 and replaced by INP. Because INP measures the response of every interaction on the page rather than just the first, it's a more comprehensive metric.

Will Core Web Vitals directly boost my ranking?

Don't expect a big jump on their own. These metrics are a ranking signal, but content relevance and quality carry far more weight. The best approach is to combine good content with a fast page.

Why do my PageSpeed scores fluctuate?

The Lighthouse lab test can vary on each run depending on network and device conditions. When making decisions, rely on the 28-day CrUX field data rather than a single test.

Is your page slow or your Core Web Vitals report in the red? I can audit your site and produce a concrete improvement plan to bring LCP, INP and CLS into target. Get in touch.