Core Web Vitals: Measure and Improve Web Performance

You’ve built a fast website, but users still complain about slowness. Or maybe your SEO rankings dropped after a Google update. Core Web Vitals (CWV) are likely the culprit. These metrics measure real-world user experience, and they directly impact search rankings and conversion rates. In this guide, you’ll learn what CWV are, how to measure them accurately, and practical steps to improve each one.

What Are Core Web Vitals?

Core Web Vitals are a set of three metrics that Google uses to quantify user experience:

• Largest Contentful Paint (LCP): Measures loading performance. It marks the time when the largest content element (image, text block, or video) becomes visible. A good LCP is 2.5 seconds or less.
• Interaction to Next Paint (INP): Measures responsiveness. It records the latency of all interactions (clicks, taps, key presses) and reports the worst one (or near-worst for pages with many interactions). A good INP is 200 milliseconds or less.
• Content Layout Shift (CLS): Measures visual stability. It quantifies unexpected layout shifts during page load. A good CLS is 0.1 or less.

These thresholds are based on the 75th percentile of page loads, segmented by mobile and desktop. So you need to ensure that 75% of your users experience good values.

How to Measure Core Web Vitals

You can measure CWV in two ways: in the lab (synthetic testing) and in the field (real user monitoring). Both are valuable, but field data is what Google uses for ranking.

Field Data: Real User Monitoring (RUM)

Field data comes from actual users. The best source is the Chrome User Experience Report (CrUX), which powers the Core Web Vitals report in Google Search Console. You can also use web-vitals library to collect your own RUM data and send it to an analytics endpoint.

To view CrUX data for your site, use PageSpeed Insights or the CrUX API. These show the distribution of LCP, INP, and CLS for your origin.

Lab Data: Synthetic Testing

Lab tools simulate a page load in a controlled environment. They are great for debugging and CI/CD integration. Popular options:

• Lighthouse: Built into Chrome DevTools. Run it on the Audits tab or via CLI.
• WebPageTest: Advanced testing with filmstrips and waterfall charts.
• PageSpeed Insights: Combines lab and field data.

Remember: lab data doesn’t include real-world variability, so use it for diagnostics, not as a ranking predictor.

Improving Largest Contentful Paint (LCP)

LCP is usually the most impactful metric to fix. The largest element is often a hero image, a heading, or a video poster. To improve LCP:

1. Optimize images: Compress images, use modern formats like WebP or AVIF, and serve responsive sizes with srcset. Tools like the Image Compressor can help reduce file size without losing quality.
2. Preload the LCP resource: Add <link rel="preload"> for the hero image or font to start loading earlier.
3. Eliminate render-blocking resources: Inline critical CSS, defer non-critical CSS, and load JavaScript asynchronously.
4. Use a CDN: Serve assets from a content delivery network to reduce latency.
5. Cache aggressively: Set long cache lifetimes for static assets with Cache-Control headers.

Example of preloading an LCP 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 Interaction to Next Paint (INP)

INP measures how quickly the page responds to user input. High INP often comes from long JavaScript tasks blocking the main thread. To improve INP:

• Break up long tasks: Use setTimeout, requestIdleCallback, or the Scheduler API to yield to the main thread.
• Optimize event handlers: Debounce or throttle expensive handlers, and avoid layout thrashing.
• Reduce JavaScript size: Code-split, tree-shake, and defer non-critical scripts.
• Use web workers: Offload heavy computations to a worker thread.
• Minimize third-party scripts: Third-party scripts often cause long tasks. Load them asynchronously and audit their impact.

You can measure INP in the field with the web-vitals library:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Send to your analytics endpoint
});

Improving Content Layout Shift (CLS)

CLS occurs when elements move unexpectedly during load. Common causes: images without dimensions, ads, embeds, and web fonts causing FOIT/FOUT. To improve CLS:

• Always set width and height attributes on images and videos. This reserves space.
• Reserve space for dynamic content (ads, embeds) with CSS min-height or aspect-ratio boxes.
• Use font-display: swap and preload fonts to avoid invisible text and layout shifts.
• Avoid inserting content above existing content unless it’s in response to user interaction.

Example of reserving space with CSS aspect-ratio:

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

Tools and Workflow for Continuous Monitoring

Improving CWV is not a one-time task. Set up continuous monitoring:

• Lighthouse CI: Run Lighthouse in your CI/CD pipeline and fail builds if scores drop.
• Real user monitoring: Use the web-vitals library to send metrics to your analytics platform (e.g., Google Analytics 4, custom endpoint).
• Search Console: Monitor the Core Web Vitals report for regressions.
• Alerting: Set up alerts for when field data crosses thresholds.

For a quick check, use the HTML to Image tool to capture visual snapshots of your page at different stages, helping you spot layout shifts manually.

FAQ

What are the current Core Web Vitals thresholds?

Good: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Needs improvement: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0.25. Poor: above those values.

How often is CrUX data updated?

CrUX data is updated daily, but the 28-day rolling window means changes take time to reflect. For faster feedback, use your own RUM.

Can I improve Core Web Vitals without changing my design?

Yes. Many improvements are technical: image compression, preloading, deferring scripts, and reserving space. These often have no visual impact.

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