Performance APIs: Web Vitals, Long Tasks, and Real Metrics

What you’ll learn

• How the browser exposes performance data
• What long tasks are and how to observe them
• How Web Vitals are measured in the field

30‑second interview answer

Modern performance measurement uses the Performance API and PerformanceObserver to observe timings and events (navigation timings, long tasks, paints). Web Vitals are best tracked via field measurement (RUM). Long tasks are a key signal for INP problems because they block the main thread and delay input and paint.

The key primitives

performance.now()

High-resolution timer for relative measurements.

Navigation Timing

How long the document load took (TTFB, domContentLoaded, etc.).

PerformanceObserver

Subscribe to performance entries.

Observing long tasks (conceptual)

Long tasks indicate main-thread blocking.

// Pseudocode (API surface differs by browser support)
const obs = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // entry.duration can indicate long tasks
  }
});
 
obs.observe({ entryTypes: ["longtask"] });

If you see long tasks during interactions, INP will suffer.

Measuring Web Vitals in real apps

Best practice:

• capture vitals client-side
• attach context (route, device class)
• send to analytics backend

Even without building full RUM, understand the principle:

• lab tells you “what might happen”
• field tells you “what users actually feel”

Common mistakes

• Treating a single run as truth
• Measuring only on desktop
• Tracking metrics without actionability

Production rule of thumb

• Use Performance panel for debugging.
• Use field metrics for truth.
• Long tasks are a great proxy for “page feels laggy”.

Quick recap

• PerformanceObserver powers modern measurement.
• Long tasks correlate with bad responsiveness.
• Web Vitals belong in field measurement.