Core Web Vitals: Measure and Improve Web Performance

Your users are impatient. If your page takes too long to load or jumps around as they try to read, they leave. Core Web Vitals (CWV) are Google's metrics that quantify these frustrations: Largest Contentful Paint (LCP) for loading speed, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. In this guide, you'll learn how to measure these metrics and apply practical fixes that work.

What Are Core Web Vitals?

Core Web Vitals are a set of real-world metrics that reflect user experience. They are part of Google's page experience signals and are used in ranking. Each metric has a "good" threshold:

• LCP: Should be ≤ 2.5 seconds.
• INP: Should be ≤ 200 milliseconds.
• CLS: Should be ≤ 0.1.

These thresholds are measured at the 75th percentile of page loads, meaning 75% of visits should meet the target.

How to Measure Core Web Vitals

You need both lab and field data. Lab data helps you debug; field data shows real user experience.

Field Data (Real Users)

• Chrome User Experience Report (CrUX): Provides aggregated real-user data for your origin. Access via PageSpeed Insights or the CrUX dashboard.
• web-vitals JavaScript library: Add this lightweight script to your site to send metrics to your analytics.

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

Lab Data (Synthetic)

• Lighthouse: Built into Chrome DevTools, it audits performance and gives a score.
• WebPageTest: For deeper analysis with network throttling.

Use lab data to iterate quickly, but always validate with field data.

Improving Largest Contentful Paint (LCP)

LCP measures when the largest content element (usually a hero image or heading) becomes visible. To improve it:

1. Optimize images: Compress images, use modern formats like WebP or AVIF, and serve responsive sizes with srcset.
2. Preload critical resources: Use <link rel="preload"> for the LCP image and key fonts.
3. Eliminate render-blocking resources: Defer non-critical CSS and JavaScript. Inline critical CSS.
4. Use a CDN: Serve assets from locations close to users.
5. Enable text compression: Use Brotli or gzip for text-based assets.

For image compression, you can use a tool like Image Compressor to quickly reduce file sizes without losing quality.

Improving Interaction to Next Paint (INP)

INP measures the responsiveness of your page to user interactions. A high INP means the browser is busy and can't respond quickly. To improve it:

1. Break up long tasks: Split JavaScript work into smaller chunks using setTimeout or requestIdleCallback.
2. Optimize event handlers: Debounce or throttle expensive handlers. Avoid layout thrashing.
3. Reduce JavaScript: Remove unused code, code-split, and defer non-critical scripts.
4. Use web workers: Offload heavy computations to a worker thread.

Also, ensure you're not blocking the main thread with third-party scripts. Audit them regularly.

Improving Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts. To keep it low:

1. Set size attributes: Always include width and height on images and videos.
2. Reserve space for dynamic content: Use CSS aspect-ratio or placeholders for ads and embeds.
3. Avoid inserting content above existing content: Except in response to user interaction.
4. Use transform animations: Prefer transform and opacity for animations instead of properties that trigger layout.

Tools and Workflow

Here's a simple workflow to continuously monitor and improve CWV:

Remember that improvements should be validated with real-user data over time.

FAQ

What are the current thresholds for Core Web Vitals?

LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1, measured at the 75th percentile of page loads.

How often should I check Core Web Vitals?

Monitor field data continuously and run lab audits after major changes. A monthly review is a good practice.

Can I improve Core Web Vitals without redesigning my site?

Yes. Many improvements like image optimization, deferring scripts, and setting size attributes can be done with minimal code changes.

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