Core Web Vitals: What They Are & How to Improve Them (Step-by-Step)

Core Web Vitals (LCP, FID, CLS) are essential metrics for website performance, affecting SEO, user experience, and conversions. This guide explains each metric, shows how to measure them, and provides actionable steps to optimise loading speed, interactivity, and visual stability for better engagement.

Graphic with text ‘Core Web Vitals: What They Are & How to Improve Them’ on a green background with website performance visuals

Executive Summary

Core Web Vitals (CWVs) are essential website performance metrics that affect user experience, SEO, and conversions. They measure loading speed, interactivity, and visual stability — key factors in keeping visitors engaged. In this guide, we’ll explain LCP, FID, and CLS in simple terms, show you how to measure them, and provide actionable steps to improve each metric so your site performs at its best.

Why Core Web Vitals Matter

Google now considers CWVs as part of its ranking algorithm. A site with poor performance can:

  • Lose search rankings
  • Frustrate users and increase bounce rates
  • Reduce conversions and revenue

Key takeaway: Optimising CWVs improves both SEO and user satisfaction.

The Three Core Web Vitals

1. Largest Contentful Paint (LCP)

What it measures:

  • The time it takes for the largest visible element (image, video, or text block) to load.
  • Target: ≤ 2.5 seconds.

Common causes of slow LCP:

  • Large, unoptimised images
  • Slow server response times
  • Heavy CSS or JavaScript blocking rendering

How to improve LCP:

  • Compress images and use modern formats (WebP, AVIF
  • Preload key resources
  • Upgrade hosting or use a CDN
  • Minimise render-blocking scripts
  1. First Input Delay (FID)

What it measures:

  • The time between a user’s first interaction (click, tap, or keypress) and when the browser responds.
  • Target: ≤ 100ms

Common causes of poor FID:

  • Heavy JavaScript execution
  • Long tasks blocking the main thread

How to improve FID:

  • Reduce JavaScript payloads
  • Use async or defer for non-critical scripts
  • Split code into smaller chunks

Note: Google is transitioning from FID to Interaction to Next Paint (INP), but the principles are the same.

  1. Cumulative Layout Shift (CLS)

What it measures:

  • Visual stability — how much page elements shift during loading.
  • Target: ≤ 0.1

Common causes of high CLS:

  • Images without dimension
  • Ads, embeds, or iframes that dynamically resize
  • Font swaps or dynamic content insertion

How to improve CLS:

  • Set explicit width and height for images and videos
  • Reserve space for ads and dynamic content
  • Use font-display: swap for custom fonts

How to Measure Core Web Vitals

You don’t need to guess your site’s performance. Use these tools:

  • Google PageSpeed Insights: Provides scores and suggestions.
  • Google Search Console: Shows CWVs per URL.
  • Lighthouse (Chrome DevTools): Audit performance locally.
  • Web Vitals Chrome Extension: Real-time monitoring while browsing.

Tip: Measure both desktop and mobile performance — mobile is often the weaker link.

Step-by-Step Improvements

  1. Audit Your Site: Identify slow LCP, high CLS, or delayed FID.
  2. Optimise Images & Media: Compress, resize, and use modern formats.
  3. Minimise JavaScript: Remove unused scripts, defer loading, and split code.
  4. Improve Server Response: Upgrade hosting, enable caching, use a CDN.
  5. Stabilise Layouts: Reserve space for dynamic content and ads.
  6. Monitor & Iterate: CWVs change with updates — continuous monitoring is key.

Real-World Example

On a recent 2Cubed client project:

  • LCP improved from 5.2s → 2.3s after image optimisation and script deferral.
  • FID reduced from 250ms → 90ms with code splitting.
  • CLS dropped from 0.25 → 0.05 by setting image dimensions and reserving ad space.

Result: Faster loading, improved UX, and higher engagement metrics.

Summary

Optimising Core Web Vitals is essential for:

  • SEO: Higher Google rankings
  • User Experience: Faster and more stable pages
  • Conversions: Reduced friction increases sales and leads

Key Actions:

  • Focus on LCP, FID, CLS.
  • Use tools like PageSpeed Insights and Search Console.
  • Optimise images, scripts, and layouts continuously.

With simple, consistent improvements, even non-technical teams can significantly boost performance.

FAQs

Q1. What are Core Web Vitals in simple terms?
 They are Google’s key metrics for page speed, interactivity, and visual stability: LCP, FID, and CLS.

Q2. How do Core Web Vitals affect SEO?
 Google uses them as part of its ranking algorithm; better scores improve visibility in search results.

Q3. Can non-technical users improve CWVs?
 Yes — image compression, caching, and layout fixes are accessible steps for business owners or marketing managers.

Q4. How often should I check Core Web Vitals?
 Regularly — monthly audits or after major website updates are recommended.

Q5. Do Core Web Vitals differ on mobile vs desktop?
 Yes — mobile often has slower speeds and higher CLS due to device and network differences.

You might also like