Skip to main content
SEO

The Complete Guide to Core Web Vitals: How to Improve Your Website Performance

4 min read
seo core-web-vitals performance google lighthouse
Table of contents

Since 2021, Google has used Core Web Vitals as a ranking factor. If your website loads slowly, shifts around while users try to click or takes too long to respond to interactions, you're losing positions in search results. And worse still: you're losing customers.

In this guide we explain exactly what Core Web Vitals are, how to measure them and what you can do to improve them.

What are Core Web Vitals?

Core Web Vitals are three metrics that Google considers essential for user experience:

  1. LCP (Largest Contentful Paint): measures how long it takes for the largest visible element on screen to load. The target is under 2.5 seconds.
  2. INP (Interaction to Next Paint): measures the latency of user interactions (clicks, taps, keyboard input). It replaced FID in March 2024. The target is under 200 milliseconds.
  3. CLS (Cumulative Layout Shift): measures unexpected layout changes while the page loads. The target is under 0.1.

Don't confuse Core Web Vitals with the Lighthouse score. Lighthouse measures performance in a simulated environment. Core Web Vitals are based on real user data (Chrome UX Report). You can have a 95 on Lighthouse and still fail CWV if your users are on slow connections.

How to measure Core Web Vitals

There are several tools to measure them:

  • PageSpeed Insights: Google's official tool. Shows field data (real users) and lab data (simulation).
  • Google Search Console: in the "Page Experience" section you can see which URLs have problems.
  • Lighthouse: built into Chrome DevTools. Useful for diagnostics, but remember these are lab data.
  • Web Vitals Extension: Chrome extension that shows LCP, INP and CLS in real time.

Example: measuring with Lighthouse from the terminal

You can run Lighthouse from the command line to automate audits:

npx lighthouse https://your-website.com --output=json --output-path=./report.json

This command generates a complete JSON report that you can analyse programmatically.

How to improve LCP

LCP is usually affected by heavy images, fonts that block rendering or a slow server. These are the most effective optimisations:

  • Optimise images: use modern formats like WebP or AVIF, with srcset to serve sizes adapted to the device.
  • Preload the hero image: if your LCP is a large image, add a <link rel="preload"> in the <head>.
  • Use font-display: swap: prevents custom fonts from blocking text rendering.
  • Reduce TTFB: good hosting and CDN-level caching reduce the time to first byte.

If you use WordPress, the WP Rocket plugin with its "Remove Unused CSS" option can reduce LCP by 30% to 50% on many sites. Combined with a CDN like Cloudflare, the results are immediate.

How to improve INP

INP measures responsiveness. If your site takes too long to react when someone clicks a button or opens a menu, INP will be high.

Common causes of high INP

  • Heavy JavaScript blocking the main thread
  • Inefficient event listeners
  • Complex DOM renders after an interaction
  • Third-party scripts (analytics, chat widgets, ad trackers)
optimisation-example.js 
// Bad: synchronous listener blocking the main thread
document.querySelector('.menu-btn').addEventListener('click', () => {
  // Heavy synchronous processing
  renderCompleteMenu();
  calculateAnimations();
  updateState();
});

// Better: split the work with requestAnimationFrame
document.querySelector('.menu-btn').addEventListener('click', () => {
  // Immediate visual feedback
  toggleActiveClass();

  // Defer heavy work
  requestAnimationFrame(() => {
    renderCompleteMenu();
  });
});

How to improve CLS

CLS spikes when page elements change position while the user is already interacting. The most common causes:

  • Images without dimensions: if you don't specify width and height, the browser doesn't reserve space and the content "jumps" when the image loads.
  • Fonts that change size: when a custom font loads, text can change size and shift the layout.
  • Dynamically injected content: cookie banners, ads or notifications inserted without reserved space.
  • iframes without dimensions: YouTube embeds, Google Maps, etc.

CLS checklist

  1. Add width and height to all images
  2. Use aspect-ratio in CSS for media containers
  3. Reserve space for ads and embeds with min-height
  4. Use font-display: swap with similar fallback fonts
  5. Avoid injecting content above the fold after page load

Tools for continuous monitoring

It's not enough to optimise once. Core Web Vitals change with every content update, plugin change or server modification. We recommend:

  • Setting up Search Console alerts to detect regressions
  • Running Lighthouse CI on every deploy to prevent issues
  • Reviewing PageSpeed Insights monthly as part of maintenance

Performance Optimisation Service

We improve your Core Web Vitals so Google ranks you higher.

Conclusion

Core Web Vitals aren't a passing trend. They're Google's standard for measuring whether a website offers a good user experience. Optimising them doesn't just improve your rankings: it improves conversion, reduces bounce rates and shows your visitors that your business takes its digital presence seriously.

Not sure where to start? At Desatranques WEB we carry out performance audits with measurable results. We tell you exactly what's failing and we fix it.