Модуль 15 · Урок 58
Performance: Core Web Vitals, Profiler і release budgets
Спершу виміряйте user-visible symptom і root cause. Field distribution, controlled lab, browser trace, React Profiler та bundle size відповідають на різні питання.
Field vs lab contract
| Evidence | Рішення |
|---|---|
| Field/RUM 75th percentile | Реальний distribution за page/device context |
| Lighthouse lab | Reproducible diagnosis і experiment |
| DevTools trace | Main-thread/network/render root cause |
| React Profiler | Commit cost конкретного subtree |
Current good targets: LCP ≤2.5s, INP ≤200ms, CLS ≤0.1 на 75-му percentile. Це quality targets, не гарантія conversion; один lab score не є field evidence.
Measurement before optimization
Зафіксуйте interaction, build/device/network, actual/base duration, commits і user symptom. Лише потім перевіряйте image/font priority, main-thread work, component ownership, code split, memo/useMemo. Optimization без bottleneck може додати memory/complexity й не покращити UX.
Versioned budget
Lab gate: emitted JS ≤250000 Б, CSS ≤50000 Б. Budget ловить regression, але не замінює compression/cache/execution/field evidence. Після зміни повторіть behavior, accessibility, build, monitoring і rollback checks.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.