Web Performance & Core Web Vitals
TL;DR
A lente de medição e produto da performance web: como o browser entrega uma página ao usuário, como medir essa entrega (Core Web Vitals: LCP, INP, CLS), o que as métricas significam para usuário, negócio e SEO, e como diagnosticar e sustentar performance ao longo do tempo. Não é sobre uma linguagem nem um framework — é sobre a experiência percebida e como prová-la com números.
Este domínio existe porque performance é um tema de entrevista senior por si só, e o vault já tinha performance espalhada por várias trilhas sem uma ótica unificadora. A aposta central: você não otimiza o que não mede. Antes de falar em resource hints ou main thread, você precisa saber qual métrica está ruim, para quem, e quanto isso custa ao produto.
O domínio segue a linha do tempo da experiência do usuário — medir → carregar → responder → sustentar —, que mapeia limpo nos três Core Web Vitals e minimiza sobreposição entre galhos.
Galhos
| # | Galho | O quê | Core Web Vital âncora |
|---|---|---|---|
| 1 | G1 — Medição & Core Web Vitals | LCP/INP/CLS, thresholds, lab vs field (RUM), Lighthouse, PageSpeed, CrUX, lib web-vitals, budgets como conceito | os 3 |
| 2 | G2 — Performance de Carregamento | critical rendering path, resource hints, lazy loading, imagens, fontes, compressão, cache/CDN, HTTP/2-3 | LCP |
| 3 | G3 — Performance de Runtime & Rendering | main thread, long tasks, INP a fundo, reflow/repaint, layout thrashing, compositing, Workers | INP, CLS |
| 4 | G4 — Performance em Produção | budgets no CI, RUM/monitoramento, detecção de regressão, DevTools Performance panel, cultura de perf | — |
Estado (2026-07-06): os 4 galhos estão escritos — 32/32 notas (falta a rodada de enriquecimento de mídia, M1). Construído galho a galho, ponta a ponta. Ver design do domínio e o roadmap.
Fronteiras — performance que já mora em outras trilhas
Este domínio é a lente de medição; ele linka as notas abaixo como reforço, nunca as reescreve (redundância entre notas = reforço). Cada uma cobre a técnica de otimização na sua camada; aqui você aprende o que medir e por quê.
- CSS 12 — Performance CSS — custo de seletores, contain, will-change, animações compostas.
- HTML 10 — Resource hints e critical path — preload/preconnect, ordem de carregamento.
- React core 17 — Performance no React — memoização, re-render, custo de hidratação.
- Plataforma Web — Rendering Pipeline — parse, reflow/repaint, compositing no browser.
- Plataforma Web — Networking — fetch, HTTP, streams, latência.
- Tooling 17 — Otimização de bundle — code splitting, tree shaking, tamanho de JS entregue.
Veja também
- Roadmap de Trilhas — Web Performance sai de 🚫 (sem cobertura) para trilha própria.
- Engenharia — Operação — onde budgets no CI e monitoramento de regressão (Galho 4) tocam DevOps/SRE.
- Redes e Protocolos — fundamentos de rede que a performance de carregamento explora.