Back to Blog

How to Improve Core Web Vitals: A Complete Guide for 2026

How to Improve Core Web Vitals: A Complete Guide for 2026

What Are Core Web Vitals?

Core Web Vitals are a set of real-world performance metrics that Google uses as ranking signals. Since 2021, they are an official part of Google's Page Experience ranking system.

The three metrics are:

  • LCP (Largest Contentful Paint) — measures loading performance. Target: under 2.5 seconds.
  • CLS (Cumulative Layout Shift) — measures visual stability. Target: under 0.1.
  • INP (Interaction to Next Paint) — measures interactivity. Target: under 200ms.

How to Improve LCP

LCP is most commonly the hero image or the largest heading visible on screen. To improve it:

  • Serve images in WebP or AVIF format
  • Add fetchpriority="high" to your LCP image
  • Use a CDN close to your users
  • Enable server-side compression (gzip or brotli)
  • Preload critical resources with <link rel="preload">

How to Fix CLS

Layout shifts happen when elements move unexpectedly. The most common causes:

  • Images without explicit width and height attributes
  • Ads or embeds without reserved space
  • Web fonts that cause FOUT (Flash of Unstyled Text)

Fix: always add width and height to every <img> tag. Use font-display: swap for web fonts.

How to Improve INP

INP replaced FID in March 2024. It measures how fast the page responds to all user interactions. To improve it:

  • Break up long JavaScript tasks (over 50ms)
  • Defer non-critical scripts
  • Use requestIdleCallback for non-urgent work
  • Minimize third-party script impact

How to Measure Core Web Vitals

Use these tools to audit your scores:

  • Google PageSpeed Insights — shows real-user data (CrUX) and lab data
  • Google Search Console — Core Web Vitals report by page group
  • Chrome DevTools — Performance panel for local testing
  • Optyxo SEO Audit — instant audit including performance score and CWV data

Quick Wins Checklist

  • ✅ Add width and height to all images
  • ✅ Convert images to WebP
  • ✅ Add loading="lazy" to below-fold images
  • ✅ Add fetchpriority="high" to the hero image
  • ✅ Minify CSS and JavaScript
  • ✅ Enable gzip/brotli compression
  • ✅ Use a CDN
  • ✅ Defer render-blocking scripts

Run a free audit on Optyxo to see your current Core Web Vitals score and get specific recommendations for your website.

Analyzing...
This may take a few seconds