Перейти к основному содержимому

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

Core Web Vitals​

MUST​

  • Следить за LCP, INP, CLS в продакшене.
  • Использовать реальные пользовательские данные (RUM), а не только лабораторные.

SHOULD​

  • Фиксировать базовую линию метрик перед оптимизациями.
  • Отслеживать регрессии в CI/CD и релизах.

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

Подходы​

  • Field data (RUM): реальные пользователи.
  • Lab data: Lighthouse / DevTools.

Инструменты​

  • Chrome DevTools Performance
  • Lighthouse
  • CrUX Vis

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

LCP​

Частые причины:

  • тяжелые изображения на первом экране
  • блокирующие ресурсы
  • долгие серверные ответы

INP​

Частые причины:

  • длинные синхронные обработчики
  • тяжелые вычисления в main thread
  • лишние ререндеры

CLS​

Частые причины:

  • изображения без размеров
  • поздние вставки контента
  • динамические шрифты без резерва

Пример: базовый измеритель INP (RUM)​

import { onINP } from 'web-vitals';

onINP((metric) => {
  // отправить в аналитику
  sendMetric('INP', metric.value);
});

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • ключевые метрики измеряются
  • изменения не ухудшают LCP/INP/CLS
  • тяжелые операции вынесены из main thread