Core Web Vitals: Measure and Improve Web Performance

Your users are impatient. If your site takes more than a few seconds to load, they leave. Search engines notice too: Core Web Vitals are ranking signals. But improving them feels like a maze of metrics and tools. This guide cuts through the noise. You'll learn what each metric means, how to measure it accurately, and concrete steps to improve it.

What Are Core Web Vitals?

Core Web Vitals are three metrics that quantify real-world user experience:

• Largest Contentful Paint (LCP): How long until the main content loads. Target: under 2.5 seconds.
• Interaction to Next Paint (INP): How quickly the page responds to user input. Target: under 200 milliseconds.
• Cumulative Layout Shift (CLS): How much the layout jumps around during loading. Target: under 0.1.

These metrics are measured from real user sessions (field data) and synthetic tests (lab data). Field data is what matters for ranking.

How to Measure Core Web Vitals

You need both lab and field data. Lab data helps you debug; field data reflects actual user experience.

Lab Tools

• Lighthouse in Chrome DevTools: Run an audit to get scores and opportunities.
• PageSpeed Insights: Combines lab and field data for a URL.
• WebPageTest: Advanced waterfall analysis.

Field Tools

• Chrome User Experience Report (CrUX): Real-user data from Chrome, available via PageSpeed Insights or BigQuery.
• web-vitals JavaScript library: Collect metrics from your own users and send to your analytics.

To collect field data, add the web-vitals library to your site:

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);

This gives you a continuous stream of real-user metrics.

Improving LCP

LCP is usually the largest image, video, or block of text. To improve it, focus on the critical path.

1. Optimize images: Compress images, use modern formats like WebP or AVIF, and set explicit width and height. Tools like the Image Compressor can help reduce file size without visible quality loss.
2. Preload the LCP resource: Add <link rel="preload"> for the hero image or font.
3. Reduce server response time: Use a CDN, enable caching, and optimize backend queries.
4. Eliminate render-blocking resources: Inline critical CSS, defer non-critical JavaScript.
5. Use responsive images: Serve appropriately sized images with srcset.

Example of preloading an LCP image:

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

Improving INP

INP measures responsiveness. Long tasks block the main thread, delaying visual feedback.

• Break up long tasks: Use setTimeout or requestIdleCallback to yield to the main thread.
• Optimize event handlers: Debounce or throttle expensive handlers.
• Reduce JavaScript: Remove unused code, code-split, and lazy-load non-critical modules.
• Use web workers for heavy computations.
• Avoid large DOM sizes: Keep the DOM under 1,500 nodes.

Example of yielding to the main thread:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Improving CLS

CLS happens when elements shift unexpectedly. Common causes: images without dimensions, ads, embeds, and dynamically injected content.

• Always set width and height on images and videos.
• Reserve space for ads and embeds using CSS aspect-ratio or fixed containers.
• Avoid inserting content above existing content unless triggered by user interaction.
• Use font-display: optional to avoid font swap shifts, or preload fonts.
• Apply transform animations instead of properties that trigger layout.

Example of reserving space for an image:

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

Tools and Workflow

Integrate performance checks into your development workflow:

• Run Lighthouse in CI to catch regressions.
• Use web-vitals to monitor field data and set up alerts.
• Analyze server logs to identify slow endpoints. The Nginx Log Analyzer can help you spot slow requests and errors.
• Test on real devices and throttled networks.

Comparison of Metrics and Targets

FAQ

What are Core Web Vitals?

Core Web Vitals are three metrics—LCP, INP, and CLS—that measure loading, interactivity, and visual stability. They are used by Google as ranking signals.

How do I measure Core Web Vitals?

Use lab tools like Lighthouse for debugging and field tools like the web-vitals library or CrUX for real-user data. Both are important.

What is a good LCP score?

A good LCP is under 2.5 seconds. Anything above 4 seconds is poor. Optimize images, preload critical resources, and reduce server response time.

Ready to speed up your site? Start by compressing your images with our free Image Compressor to instantly improve LCP.