Performance Auditing with Core Web Vitals

Why lab data isn't enough

Lighthouse scores are useful for development, but they run on a simulated mid-tier device with a throttled connection. Your real users are on a spectrum of devices and networks that lab tools can't fully replicate. That's where field data from the Chrome User Experience Report (CrUX) comes in.

The three Core Web Vitals (Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift) give you a focused lens on the metrics that actually correlate with user satisfaction. Optimizing for these beats chasing a Lighthouse score.

A practical audit workflow

• ›Start with CrUX data to identify which pages and metrics need attention
• ›Use Lighthouse and DevTools Performance tab to diagnose root causes
• ›Prioritize fixes by impact: LCP images, render-blocking scripts, layout shifts
• ›Deploy fixes behind feature flags and measure field data before/after

// Measure CLS in the field with the web-vitals library:
import { onCLS } from 'web-vitals';

onCLS((metric) => {
  analytics.send({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // "good" | "needs-improvement" | "poor"
    entries: metric.entries,
  });
});

Common wins

In every audit I've done, the same patterns account for 80% of the improvement: properly sizing and lazy-loading images, deferring non-critical JavaScript, adding explicit dimensions to media elements to prevent layout shifts, and preconnecting to critical third-party origins.

Performance isn't a one-time fix. Set up a Web Vitals dashboard, add performance budgets to your CI pipeline, and make it part of the team's regular review cycle. The sites that stay fast are the ones that measure continuously.