Performance is product design

Before you begin

By the end, you can…

• Connect performance metrics to human experience
• Identify the critical rendering path
• Reduce main-thread work behind a slow interaction

01 / Understand

Performance is what waiting feels like

Largest Contentful Paint describes when the main content becomes visible. Interaction to Next Paint describes how quickly the page responds after a person acts. Cumulative Layout Shift describes visual stability. They are proxies for experiences—arrival, response, and trust—not trophies.

Field data matters because real devices, networks, caches, and interactions differ from a lab run. Use lab tools to diagnose a problem and real-user measurement to understand its prevalence.

02 / Apply

Protect the main thread

A slow interaction often contains input delay, JavaScript execution, style and layout, then paint. Break up long tasks, avoid rendering work the user cannot see, defer noncritical scripts, and keep DOM changes focused.

Performance budgets turn intent into a constraint. Set budgets for page weight, third-party work, image dimensions, and interaction latency before the page grows expensive.

button.addEventListener("click", async () => {
  button.disabled = true;
  await scheduler.yield?.();
  renderOnlyWhatChanged();
  button.disabled = false;
});

03 / Make

Your studio task

Make — Measure one slow interaction and remove its largest block of main-thread work.

1. Record one noticeably slow interaction.
2. Name the largest blocking task and the user-visible delay it causes.
3. Remove, defer, split, or reduce that work.
4. Measure again under the same conditions and document the tradeoff.

04 / Check

Knowledge check