Core Web Vitals: Performance and SEO Guide - Ighenatt Blog

Three metrics. That is what Google uses to decide whether your site offers an acceptable experience. LCP, INP and CLS — not a comprehensive usability audit, not a survey, just three numbers measured from real Chrome users. Understanding what each one measures, and why it matters, is the starting point for any realistic performance strategy.

In practice, we see two failure modes: sites that ignore Core Web Vitals entirely until rankings drop, and sites that chase Lighthouse scores without looking at field data. Neither approach works. What works is measuring from the Chrome UX Report and fixing the right things in the right order.

Core Web Vitals are a set of specific metrics Google uses for measuring user experience on a website:

Largest Contentful Paint (LCP) - Loading

LCP measures the time it takes to load the main visible content of a page. To provide a good user experience, LCP must occur within the first 2.5 seconds from when the page begins to load.

<!-- Example of image optimisation to improve LCP -->
<img src="optimised-image.webp" alt="Description" loading="eager" fetchpriority="high">

Interaction to Next Paint (INP) - Interactivity

INP measures the latency of all user interactions throughout the entire page visit, evaluating the overall responsiveness of the website. A good INP should be 200 milliseconds or less, while values between 200-500ms need improvement and more than 500ms are considered poor.

Note: Google officially replaced the FID metric with INP in March 2024, as INP provides a more complete measurement of responsiveness throughout the entire user experience.

Cumulative Layout Shift (CLS) - Visual Stability

CLS measures the sum of all unexpected layout changes that occur during page loading. A good CLS score is 0.1 or less.

/* Reserve space for images and ads to prevent layout shifts */
.image-container {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

Impact on Rankings and Measurement Tools

Direct effects on ranking:

Since May 2021, Google has officially incorporated these metrics as ranking signals:

1. Greater visibility in mobile searches: Pages that meet the recommended thresholds are more likely to appear in the top results, especially in searches from mobile devices.

2. “Fast Page” badge: Google is experimenting with visual labels in search results to indicate sites that offer a strong user experience.

3. Competitive advantage: In competitive niches, offering a better user experience can be the differentiating factor between your site and the competition.

Main measurement tools:

Google PageSpeed Insights provides both laboratory and field performance data, offering a comprehensive view of your website’s performance. It also offers specific recommendations for improving each metric.

Lighthouse integrated into Chrome developer tools, offers detailed audits of performance, accessibility, best practices and web optimisation.

Chrome User Experience Report (CrUX) provides real performance data based on how real users experience your website.

Optimisation Strategies for Core Web Vitals

LCP improvement:

1. Optimise your images: Use modern formats such as WebP or AVIF, compress your images and consider implementing responsive images.

2. Implement lazy loading techniques: Load critical content first and defer the loading of less important elements.

3. Optimise the server: Reduce server response time through the use of CDNs, caching and fast servers.

// Example of lazy loading implementation
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

INP optimisation:

1. Minimise JavaScript: Reduce the size of your JS files, remove unnecessary code and consider code splitting.

2. Use Web Workers: Move intensive processing off the main thread to keep the user interface responsive.

3. Optimise load order: Ensure critical scripts load first.

CLS optimisation:

1. Specify dimensions for media: Always include width and height attributes for images and videos.

2. Reserve space for ads: Define a fixed-size container for advertising elements.

3. Preload custom fonts: Use preload to load fonts before they are needed, avoiding text shifts.

Case Study and Expected Results

An e-commerce client was experiencing significant problems with their Core Web Vitals. After implementing a series of optimisations:

• LCP reduced from 4.2s to 1.8s
• CLS improved from 0.25 to 0.05
• INP decreased from 350ms to 180ms

These changes resulted in:

• 22% increase in organic traffic
• 17% improvement in conversion rate
• 15% reduction in bounce rate

These user experience metrics are not merely technical indicators; they mark a shift in how Google evaluates website quality, placing user experience at the centre of the ranking equation. Run PageSpeed Insights on your ten highest-traffic pages right now. If any return an LCP above 2.5 seconds or a CLS above 0.1, you have a specific problem to solve. Tell us what you found and we will tell you where to start.