Back Home
2025-03-28 • Web Development

Web Performance: The Metrics That Matter

A field guide to Core Web Vitals and beyond — which metrics actually affect user experience, how to measure them, and what numbers to aim for.

Why Performance Matters

Every 100ms of delay costs Amazon 1% in sales. Google found that a 500ms delay in search results dropped traffic by 20%. Performance isn’t a luxury — it’s the foundation of user trust.

Core Web Vitals

Google’s trio of metrics that measure real-world user experience:

Largest Contentful Paint (LCP)

What it measures: When the largest content element becomes visible.

Good: ≤ 2.5 seconds. Poor: > 4.0 seconds.

How to improve:

  • Optimize images (WebP/AVIF, responsive sizes, lazy loading).
  • Preload critical resources with <link rel="preload">.
  • Use a CDN.
  • Avoid client-side rendering for above-the-fold content.

Interaction to Next Paint (INP)

What it measures: Responsiveness to user interactions throughout the page lifecycle.

Good: ≤ 200ms. Poor: > 500ms.

How to improve:

  • Break up long JavaScript tasks.
  • Use requestIdleCallback for non-critical work.
  • Debounce scroll and input handlers.
  • Minimize main thread work during interactions.

Cumulative Layout Shift (CLS)

What it measures: Visual stability — how much elements shift after initial render.

Good: ≤ 0.1. Poor: > 0.25.

How to improve:

  • Always set width and height on images and videos.
  • Reserve space for dynamic content (ads, embeds).
  • Avoid inserting content above the viewport after load.
  • Use font-display: swap for web fonts.

Beyond Core Vitals

Time to First Byte (TTFB)

The time from request to first byte of response. Affects everything downstream.

  • Use edge deployment (Vercel, Cloudflare Workers).
  • Cache at the CDN level.
  • Keep server logic fast.

Total Blocking Time (TBT)

Sum of time between FCP and TTI where the main thread is blocked for > 50ms.

  • Code-split aggressively.
  • Defer non-critical scripts.
  • Use web workers for heavy computation.

Measurement Tools

  • Lighthouse — Lab data, great for CI/CD.
  • Chrome User Experience Report (CrUX) — Real user data.
  • Web Vitals library — Collect field data in production.
  • WebPageTest — Deep waterfall analysis.

The Performance Budget

Define a budget and enforce it:

MetricBudget
JavaScript< 200KB (compressed)
Images< 100KB per image
LCP< 2.5s
INP< 200ms
CLS< 0.1

Track these in CI. If a PR exceeds the budget, it doesn’t ship.