Understanding Web Performance

Google’s Core Web Vitals have become the standard for measuring user experience. They’re not perfect metrics, but they’re well-chosen proxies for what users actually feel.

The Three Metrics

Largest Contentful Paint (LCP)

LCP measures when the largest visible element in the viewport finishes rendering. It’s a proxy for “when does the page feel loaded?”

Good: ≤ 2.5s
Needs improvement: 2.5s – 4s
Poor: > 4s

The biggest LCP killers:

Unoptimized images — serve WebP/AVIF, use loading="lazy" for below-fold images, but don’t lazy-load the LCP element
Render-blocking resources — CSS and synchronous JS in <head> delay rendering
Slow server response — use a CDN, cache aggressively

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) in 2024. It measures the latency of all interactions, not just the first one.

Good: ≤ 200ms
Needs improvement: 200ms – 500ms
Poor: > 500ms

Common INP problems:

// ❌ Long task blocks the main thread
button.addEventListener('click', () => {
  const result = computeHeavyThing(); // blocks for 300ms
  updateUI(result);
});

// ✅ Yield to the browser between chunks
button.addEventListener('click', async () => {
  await scheduler.yield(); // yield to browser
  const result = computeHeavyThing();
  updateUI(result);
});

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much page elements shift unexpectedly as the page loads.

Good: ≤ 0.1
Needs improvement: 0.1 – 0.25
Poor: > 0.25

The most common CLS cause: images without explicit dimensions.

<!-- ❌ Browser doesn't know how much space to reserve -->
<img src="hero.jpg" alt="Hero image" />

<!-- ✅ Browser reserves space before the image loads -->
<img src="hero.jpg" width="1200" height="630" alt="Hero image" />

Measuring in the Field

Lab tools (Lighthouse, WebPageTest) measure synthetic performance. Field tools measure real users.

Use Chrome User Experience Report (CrUX) for field data. It’s available in:

PageSpeed Insights — URL-level field data
Google Search Console — aggregated field data for your whole site
BigQuery — raw CrUX data for detailed analysis

The 80/20 Rule

For most sites, fixing these three things will get you to Good CWV:

Preload your LCP image with <link rel="preload" as="image">
Set explicit dimensions on all images
Move third-party scripts to async or defer

Start there. Measure. Then optimize further if needed.

Performance work is never done, but it compounds. Each improvement makes the next one easier to measure.

Understanding Web Performance — Core Web Vitals Explained