Core Web Vitals: Measure and Improve Web Performance

Your users expect fast, smooth experiences. If your site feels slow, they leave—and search engines notice. Core Web Vitals are the metrics that quantify real-world user experience: loading speed, interactivity, and visual stability. This guide shows you how to measure them and make practical improvements.

What Are Core Web Vitals?

Core Web Vitals are a set of three metrics defined by Google to capture key aspects of user experience:

• Largest Contentful Paint (LCP): measures loading performance. It marks the time when the largest content element (often a hero image or heading) becomes visible. Aim for LCP under 2.5 seconds.
• Interaction to Next Paint (INP): measures responsiveness. It records the time from a user interaction (click, tap, keypress) to the next visual update. Aim for INP under 200 milliseconds.
• Cumulative Layout Shift (CLS): measures visual stability. It quantifies unexpected layout shifts during loading. Aim for CLS under 0.1.

These thresholds are based on field data from real users (75th percentile). Lab data helps diagnose issues, but field data reflects actual experience.

How to Measure Core Web Vitals

You need both field and lab data. Field data shows real-user performance; lab data lets you debug and test changes.

Field Data Tools

• Chrome UX Report (CrUX): aggregated real-user data for millions of sites. Access via PageSpeed Insights, Search Console, or the CrUX API.
• web-vitals JavaScript library: collect your own field data by sending metrics to your analytics endpoint.

Lab Data Tools

• Lighthouse: built into Chrome DevTools, runs audits and provides opportunities to improve.
• WebPageTest: advanced testing with network throttling and filmstrips.
• Chrome DevTools Performance panel: deep dive into runtime performance.

Start with PageSpeed Insights: it shows both field and lab data for a URL. Then use Lighthouse locally to iterate.

Improving LCP

LCP is often the most impactful metric to fix. The largest element is usually an image or a text block. Optimize these areas:

1. Optimize the LCP image: compress it, serve modern formats like WebP or AVIF, and set explicit dimensions.
2. Preload the LCP resource: use <link rel="preload"> for images or fonts used above the fold.
3. Eliminate render-blocking resources: inline critical CSS, defer non-critical CSS and JavaScript.
4. Use a CDN: serve assets from locations close to users.
5. Reduce server response time: optimize backend, use caching, and consider edge rendering.

Example: preload a 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 INP

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

• Break up long tasks: use setTimeout or scheduler.yield() to yield to the main thread.
• Optimize event handlers: debounce or throttle rapid events, avoid heavy synchronous work.
• Reduce JavaScript: code-split, tree-shake, and defer non-critical scripts.
• Use web workers for CPU-intensive tasks.
• Avoid large DOM updates: batch DOM changes and use requestAnimationFrame.

Measure INP with the web-vitals library and identify slow interactions in the Performance panel.

Improving CLS

Layout shifts happen when elements change position unexpectedly. Prevent them by:

• Setting size attributes on images and videos (width and height).
• Reserving space for ads and embeds with CSS aspect-ratio or fixed containers.
• Avoiding inserting content above existing content unless in response to user interaction.
• Using font-display: swap and preloading fonts to minimize FOIT/FOUT shifts.
• Animating with transform instead of properties that trigger layout.

Quick Comparison: Metrics and Targets

Monitor and Iterate

Performance is not a one-time fix. Set up continuous monitoring:

• Use the web-vitals library to send metrics to your analytics.
• Set up alerts for regressions in your CI/CD pipeline using Lighthouse CI.
• Regularly review field data in Search Console.

Remember that improvements should be validated with real-user data, not just lab scores.

FAQ

What are Core Web Vitals and why do they matter?

Core Web Vitals are user-centric performance metrics (LCP, INP, CLS) that measure loading, interactivity, and visual stability. They matter because they correlate with user experience and are used as a ranking signal by Google.

How often should I check Core Web Vitals?

Check field data monthly and after major releases. Use lab tools during development to catch regressions early. Continuous monitoring with real-user metrics is ideal.

Can I improve Core Web Vitals without rebuilding my site?

Yes. Many improvements—like image optimization, preloading key resources, deferring scripts, and setting element dimensions—can be applied incrementally without a full redesign.

Need to quickly compress images for better LCP? Try our free Image Compressor to reduce file sizes without losing quality.