Метрики и измерения

Метрики — инструмент диагностики и контроля регрессий, а не самоцель. Хорошие показатели не гарантируют хороший UX. Ориентир — Core Web Vitals на реальных пользователях (RUM). Лабораторные данные используются для отладки конкретных проблем.

---

Core Web Vitals

Целевые значения

Метрика	Целевое значение	Что измеряет
LCP	< 2.5s	Время до отрисовки основного контента первого экрана
INP	< 200ms	Задержка отклика на взаимодействие пользователя
CLS	< 0.1	Визуальная стабильность, отсутствие неожиданных сдвигов

Дополнительные метрики

Метрика	Назначение
TBT (Total Blocking Time)	Коррелирует с INP, диагностика Long Tasks
TTI (Time to Interactive)	Момент стабильной реакции на ввод
TTFB (Time to First Byte)	Индикатор backend / CDN проблем
Hydration Time	Время от HTML до интерактивности React (SSR / SSG)

MUST

• Следить за LCP, INP, CLS в продакшене — через реальные пользовательские данные (RUM).
• Фиксировать базовую линию метрик перед началом любых оптимизаций.
• Использовать Field Data — данные реальных пользователей приоритетнее лабораторных.

SHOULD

• Отслеживать регрессии в CI/CD при значимых изменениях.
• Сравнивать метрики до/после каждой оптимизации.

---

Источники данных

---

Сбор метрик в продакшене

Build-мониторинг (production)

// Библиотека web-vitals — удобная обёртка для отправки CWV
import { onINP, onLCP, onCLS } from 'web-vitals';

onLCP((metric) => sendToAnalytics('LCP', metric.value));
onINP((metric) => sendToAnalytics('INP', metric.value));
onCLS((metric) => sendToAnalytics('CLS', metric.value));

---

Диагностика проблем

LCP — частые причины

• Тяжёлые изображения на первом экране без оптимизации (нет WebP/AVIF, нет fetchpriority="high")
• Блокирующие ресурсы (render-blocking CSS/JS)
• Долгие серверные ответы (высокий TTFB)

INP — частые причины

• Длинные синхронные обработчики событий (Long Tasks > 50ms)
• Тяжёлые вычисления в main thread (сортировка/фильтрация > 5000 объектов)
• Лишние ре-рендеры React-компонентов

CLS — частые причины

• Изображения без явных width / height или aspect-ratio
• Поздние вставки контента (баннеры, реклама)
• Динамические шрифты без font-display: swap