Core Web Vitals & Performance — System Design Interview Guide

LCP — Largest Contentful Paint

Measures the time from navigation to when the largest visible element renders in the viewport. Usually a hero image, banner, or above-the-fold heading. Good: < 2.5s. Needs improvement: 2.5–4s. Poor: > 4s.

Common LCP Causes and Fixes

• Slow server response (TTFB) → Use CDN, SSG/ISR instead of SSR, optimize database queries
• Render-blocking resources → Inline critical CSS, defer non-critical scripts
• Unoptimized LCP image → Use WebP/AVIF, add rel="preload", set proper dimensions, never lazy-load it
• Client-side rendering → Browser sees blank HTML until JS runs; use SSR/SSG to deliver rendered HTML

<!-- Optimal LCP image setup -->
<link rel="preload" as="image" href="/hero.avif" />
<img
  src="/hero.avif"
  fetchpriority="high"
  width="1200" height="600"
  alt="Hero"
  <!-- NO loading="lazy" — lazy loading kills LCP -->
/>

INP — Interaction to Next Paint

Replaced FID in 2024. Measures the time from user input (click, tap, key press) to when the browser paints the next frame in response. Good: < 200ms. Poor: > 500ms.

Causes and Fixes

• Long Tasks on the main thread → Break up with scheduler.yield() or setTimeout, use Web Workers for CPU-heavy work
• Heavy event handlers → Debounce, defer non-critical work, avoid synchronous layout recalculations
• Large React re-renders → memo, useMemo, useCallback, virtualize long lists (react-virtual)

// Yield to the browser between expensive operations
async function processLargeDataset(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) {
      await scheduler.yield(); // let browser handle pending interactions
    }
  }
}

CLS — Cumulative Layout Shift

Measures unexpected visual movement of page elements during loading. An image that loads and pushes text down is a CLS violation. Good: < 0.1. Poor: > 0.25.

Causes and Fixes

• Images without dimensions → Always set width and height on img tags; browser reserves space before the image loads
• Dynamically injected content → Reserve space with min-height or skeleton placeholders
• Web fonts causing FOIT/FOUT → Use font-display: swap and preload the font

<!-- Reserve space — no layout shift when image loads -->
<img src="/photo.webp" width="800" height="600" alt="..." />

/* CSS — aspect-ratio maintains space */
.image-container {
  aspect-ratio: 4 / 3;
  width: 100%;
}

TTFB — Time to First Byte

Time from navigation start to the first byte of the HTML response. Affected by server processing time, redirects, and network latency. A slow TTFB affects all other metrics because nothing can render before HTML arrives.

Fix: CDN edge caching (serves HTML from a server near the user), SSG/ISR (serve pre-built HTML instantly), optimize server-side queries.

Measuring and Monitoring

// web-vitals library — report in real user monitoring (RUM)
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(({ value, rating }) => analytics.track('LCP', { value, rating }));
onINP(({ value, rating }) => analytics.track('INP', { value, rating }));
onCLS(({ value, rating }) => analytics.track('CLS', { value, rating }));