Core Web Vitals: Measure and Improve Web Performance

You've built a modern web app, but users complain it feels slow. Search rankings are slipping, and bounce rates are climbing. The culprit might be poor Core Web Vitals—Google's metrics for real-world user experience. In this guide, you'll learn what they are, how to measure them accurately, and practical steps to improve each one.

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 content element (image or text block) to become visible. Good: ≤ 2.5s.
• Interaction to Next Paint (INP): Measures responsiveness—the time from a user interaction (click, tap, key press) to the next visual update. Good: ≤ 200ms.
• Cumulative Layout Shift (CLS): Quantifies unexpected layout shifts. Good: ≤ 0.1.

These metrics are part of Google's page experience signals and directly impact SEO and user satisfaction.

How to Measure Core Web Vitals

You need both lab and field data. Lab data helps debug; field data reflects real users.

Lab Tools

• Lighthouse in Chrome DevTools: Run an audit to get LCP, CLS, and TBT (a proxy for INP).
• WebPageTest: Advanced testing with filmstrips and waterfall charts.
• PageSpeed Insights: Combines lab and field data.

Field Tools

• Chrome UX Report (CrUX): Public dataset of real-user metrics.
• web-vitals library: Send metrics to your analytics.

Example: Using the web-vitals library to log metrics:

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

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

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Improving LCP

LCP is often the most impactful metric to fix. Common causes: slow server response, render-blocking resources, and unoptimized images.

1. Optimize images: Compress, use modern formats (WebP/AVIF), and set dimensions. For quick compression, try our Image Compressor.
2. Preload critical resources: Use <link rel="preload"> for hero images and fonts.
3. Reduce server response time: Use caching, CDN, and optimize backend queries.
4. Eliminate render-blocking resources: Inline critical CSS, defer non-critical JS.

Example: Preload LCP image:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Improving INP

INP measures responsiveness. Long tasks block the main thread and delay visual feedback.

1. Break up long tasks: Use setTimeout or scheduler.yield to yield to the main thread.
2. Optimize event handlers: Debounce and throttle where appropriate; avoid heavy synchronous work.
3. Reduce JavaScript: Code-split, tree-shake, and defer non-critical scripts.
4. Use web workers for CPU-intensive tasks.

Example: Yielding with scheduler.yield (where supported):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

Improving CLS

CLS is about visual stability. Layout shifts occur when elements change position unexpectedly.

1. Set size attributes on images and videos (width/height).
2. Reserve space for ads and embeds: Use CSS aspect-ratio or fixed dimensions.
3. Avoid inserting content above existing content unless triggered by user interaction.
4. Use transform animations instead of properties that trigger layout.

Example: Reserve space with aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Comparison of Core Web Vitals

Tools and Workflow

Integrate performance monitoring into your CI/CD pipeline. Use Lighthouse CI to catch regressions. For field data, set up a dashboard with web-vitals and your analytics.

When optimizing images, you can quickly compress them with our Image Compressor before uploading to your site.

FAQ

What are Core Web Vitals?

Core Web Vitals are three metrics—LCP, INP, and CLS—that Google uses to measure user experience on web pages.

How often should I measure Core Web Vitals?

Continuously in the field via analytics, and on each deploy in the lab using Lighthouse CI to catch regressions.

Can I improve Core Web Vitals without redesigning my site?

Yes. Many improvements like image optimization, preloading, and setting dimensions can be done incrementally without a full redesign.

Start by measuring your current scores with Lighthouse, then tackle the metric with the biggest impact. Small, consistent optimizations lead to significant gains in user experience and SEO.