Core Web Vitals: Measure and Improve for Better Web Performance

You've built a fast website, but users still complain about slowness. Or maybe your SEO rankings dropped after a Google update. The culprit might be Core Web Vitals—Google's metrics for user experience. In this guide, you'll learn what they are, how to measure them with real-user data, and practical steps to improve them.

What Are Core Web Vitals?

Core Web Vitals are three metrics that quantify key aspects of user experience:

• Largest Contentful Paint (LCP): How long it takes for the largest visible element (e.g., hero image or heading) to render. Good: ≤2.5s.
• First Input Delay (FID): The time from when a user first interacts (e.g., clicks a link) to when the browser responds. Good: ≤100ms.
• Cumulative Layout Shift (CLS): Measures visual stability—how much elements shift unexpectedly. Good: ≤0.1.

These metrics are part of Google's page experience signals and directly impact SEO. But more importantly, they reflect real user frustration.

How to Measure Core Web Vitals

You need both lab and field data. Lab data (e.g., Lighthouse) helps debug, while field data (real-user monitoring) shows actual performance.

1. Use Chrome UX Report (CrUX)

CrUX provides aggregated real-user data for millions of sites. You can view it in PageSpeed Insights or the CrUX Dashboard. It shows the distribution of LCP, FID, and CLS for your origin.

2. Set Up Real-User Monitoring (RUM)

Tools like Google Analytics 4, Vercel Analytics, or open-source libraries (web-vitals) let you collect Core Web Vitals from actual visitors. Here's how to send metrics to your analytics endpoint:

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

This snippet uses the web-vitals library to capture metrics and send them via sendBeacon without affecting page load.

3. Use Lighthouse for Lab Testing

Lighthouse (in Chrome DevTools or PageSpeed Insights) simulates a page load and reports Core Web Vitals along with opportunities for improvement. Run it on key pages and track changes over time.

Improving LCP

LCP is often the most impactful metric. To improve it:

• Optimize images: Compress images, use modern formats (WebP, AVIF), and serve responsive sizes with srcset.
• Preload critical resources: Use <link rel="preload"> for the LCP image or font.
• Reduce server response time: Use CDN, caching, and optimize backend queries.
• Eliminate render-blocking resources: Defer non-critical CSS/JS, inline critical CSS.

For example, preload your hero image:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Improving FID

FID measures input responsiveness. To improve it:

• Break up long tasks: Use setTimeout or requestIdleCallback to yield to the main thread.
• Minimize main-thread work: Reduce JavaScript execution time, avoid large bundles.
• Use web workers for heavy computations.
• Optimize event handlers: Debounce or throttle rapid events.

Also consider transitioning to Interaction to Next Paint (INP), which will replace FID in 2024. INP measures all interactions, so the same optimizations apply.

Improving CLS

CLS is about visual stability. Common causes and fixes:

• Images without dimensions: Always set width and height attributes or use CSS aspect-ratio.
• Ads, embeds, and iframes: Reserve space with a placeholder or set fixed dimensions.
• Dynamic content injection: Avoid inserting content above existing content unless in response to user interaction.
• Web fonts: Use font-display: swap and preload fonts to avoid invisible text and layout shifts.

Example: reserve space for an image:

<img src="#" width="800" height="600" alt="...">

Comparison of Core Web Vitals

Tools for Ongoing Monitoring

Improving Core Web Vitals is not a one-time task. Set up dashboards to track field data. Use:

• Google Search Console: Core Web Vitals report shows URL groups needing attention.
• PageSpeed Insights: Combines lab and field data.
• Web Vitals extension: Real-time metrics as you browse.
• RUM tools: Like SpeedCurve, Calibre, or open-source alternatives.

Regularly audit your site, especially after major changes.

FAQ

What are Core Web Vitals and why do they matter?

Core Web Vitals are three metrics (LCP, FID, CLS) that Google uses to measure user experience. They matter because they impact SEO rankings and reflect real user satisfaction.

How often should I measure Core Web Vitals?

Continuously via real-user monitoring, and after any significant code or content changes. Lab tests should be run during development and before releases.

Can I improve Core Web Vitals without a developer?

Some fixes like compressing images or setting image dimensions can be done by content editors. But deeper optimizations often require developer involvement.

Ready to optimize your images for better LCP? Try our free Image Compressor to reduce file sizes without losing quality.