Core Web Vitals: Measure and Improve for Better Web Performance

You've built a modern web app, but users complain it feels slow. Search rankings dip. You check your code—nothing obvious. The issue might be Core Web Vitals (CWV), Google's metrics for user experience. This guide shows you how to measure and improve them practically.

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. Aim for ≤2.5s.
• First Input Delay (FID): Time from first user interaction to response. Aim for ≤100ms.
• Cumulative Layout Shift (CLS): Visual stability—how much elements move unexpectedly. Aim for ≤0.1.

These metrics are part of Google's page experience signals and directly impact SEO. But more importantly, they reflect real user frustration.

How to Measure Core Web Vitals

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

Lab Tools

• Lighthouse (in Chrome DevTools or online) – quick audit with scores and opportunities.
• WebPageTest – advanced waterfall analysis and filmstrip.
• Chrome DevTools Performance panel – deep dive into runtime.

Field Tools

• Chrome User Experience Report (CrUX) – public dataset of real-user metrics.
• PageSpeed Insights – combines lab and field data.
• Search Console Core Web Vitals report – groups URLs by status.
• web-vitals JavaScript library – collect your own field data.

Start with PageSpeed Insights to get a baseline. Then use the web-vitals library to instrument your site and send metrics to your analytics.

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

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Improving LCP

LCP is often the biggest culprit. Optimize the critical path:

1. Identify the LCP element – usually a hero image, heading, or video poster.
2. Optimize images – compress, use modern formats (WebP/AVIF), and set explicit dimensions.
3. Preload the LCP resource – use <link rel="preload"> for images or fonts.
4. Reduce server response time – use caching, CDN, and efficient backend.
5. Eliminate render-blocking resources – defer non-critical CSS/JS.

For images, tools like Image Compressor can help you shrink files without quality loss.

Improving FID

FID measures input responsiveness. Long JavaScript tasks block the main thread.

• Break up long tasks – use setTimeout or requestIdleCallback to yield.
• Code-split – load only necessary JS.
• Optimize event handlers – debounce or throttle expensive operations.
• Use web workers for CPU-intensive work.

// Example: yield to main thread
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  for (const item of items) {
    // process item
    await yieldToMain();
  }
}

Improving CLS

Layout shifts annoy users. Prevent them by reserving space:

• Set width/height on images and videos – or use CSS aspect-ratio.
• Don't inject content above existing content – unless in response to user interaction.
• Use transform animations instead of properties that trigger layout.
• Preload fonts and use font-display: swap to avoid invisible text.

Comparison of Metrics and Tools

Practical Workflow

1. Measure – Run PageSpeed Insights on key pages. Note field data (if available) and lab scores.
2. Prioritize – Focus on metrics that are poor and affect the most users.
3. Fix – Apply the techniques above, starting with biggest wins (e.g., image optimization).
4. Verify – Re-run lab tests and monitor field data via web-vitals.
5. Iterate – Performance is ongoing; set budgets and monitor regressions.

Remember: field data is the ground truth. Lab tools help you debug but may not reflect real user conditions.

FAQ

How often should I measure Core Web Vitals?

Monitor continuously in production using the web-vitals library. Run lab audits before major releases and periodically (e.g., monthly) for key pages.

Does improving Core Web Vitals really affect SEO?

Yes, page experience is a ranking signal, but content relevance remains primary. Good CWV improves user experience, which indirectly helps SEO.

What's the difference between lab and field data?

Lab data is collected in a controlled environment with simulated conditions; field data comes from real users on various devices and networks. Use both: lab for debugging, field for truth.

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