Какие знаешь метрики производительности сайта?

Метрики производительности сайта

В современной Frontend-разработке отслеживание метрик производительности критически важно для обеспечения пользовательского опыта. Я разделяю их на несколько ключевых категорий, каждая из которых измеряет разные аспекты работы сайта.

1. Метрики, связанные с загрузкой (Load Metrics)

Эти метрики фокусируются на том, как быстро контент становится доступным.

• TTFB (Time To First Byte) – время между запросом ресурса и получением первого байта ответа от сервера. Показывает скорость работы бэкенда. Цель — менее 200 мс.

// Пример измерения TTFB с помощью Performance API
const [navigationEntry] = performance.getEntriesByType("navigation");
const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
console.log(`TTFB: ${ttfb}ms`);

• FCP (First Contentful Paint) – момент, когда браузер отрисовывает первый контент (текст, изображение, canvas). Пользователь видит, что что-то происходит. Хорошее значение — менее 1.8 секунды.

• LCP (Largest Contentful Paint) – время загрузки самого крупного контента в viewport (героическое изображение, заголовок). Ключевой показатель воспринимаемой скорости. Цель — менее 2.5 секунд.

2. Метрики, связанные с взаимодействием (Interactivity Metrics)

Измеряют, насколько быстро сайт реагирует на действия пользователя.

• FID (First Input Delay) – задержка между первым взаимодействием пользователя (клик, тап) и ответом браузера. Показывает блокировку основного потока. Цель — менее 100 мс. Важно: с 2024 года заменяется на INP (Interaction to Next Paint) в Core Web Vitals.

• INP (Interaction to Next Paint) – новейшая метрика, оценивающая отзывчивость сайта по всем взаимодействиям. Измерляет время от начала взаимодействия до следующего отображения кадра. Цель — менее 200 мс.

// Пример отслеживания задержки ввода
let firstInputDelay;
const firstInputListener = (event) => {
  if (firstInputDelay) return;
  
  const delay = event.processingStart - event.startTime;
  firstInputDelay = delay;
  
  // Отправка данных в аналитику
  console.log(`FID: ${delay}ms`);
};

document.addEventListener('click', firstInputListener, { capture: true, once: true });

3. Метрики визуальной стабильности (Visual Stability)

• CLS (Cumulative Layout Shift) – совокупный сдвиг макета. Измеряет неожиданные перемещения контента во время загрузки. Возникает из-за изображений без размеров, динамически вставляемого контента, шрифтов с FOIT/FOUT. Цель — менее 0.1.

// Отслеживание CLS через Performance Observer
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('CLS:', entry.value);
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

4. Другие важные метрики

• TBT (Total Blocking Time) – общее время блокировки основного потока между FCP и TTI. Показывает, как долго страница была неинтерактивной.

• Speed Index – показатель скорости визуального заполнения страницы. Чем ниже, тем быстрее пользователь видит содержимое.

• TTI (Time To Interactive) – время до полной интерактивности, когда страница реагирует на ввод за 50 мс.

Практический подход к измерению

На практике я использую комбинацию инструментов:

1. Лабораторные данные (Lab Data) – собираются в контролируемой среде

   • Lighthouse в DevTools
   • WebPageTest
   • Мои собственные сборки на Puppeteer

2. Полевые данные (Field Data) – реальные данные от пользователей

   • Core Web Vitals в Google Search Console
   • Chrome UX Report (CrUX)
   • Кастомная телеметрия через Performance API

Оптимизационные стратегии

Для улучшения этих метрик применяю:

• Для LCP: приоритетная загрузка критических ресурсов, предзагрузка, адаптивные изображения
• Для INP/FID: разбиение длительных задач, веб-воркеры, оптимизация JavaScript
• Для CLS: резервирование места под медиа, стабильные инлайн-стили

Важно понимать, что метрики — не самоцель, а инструмент для понимания пользовательского опыта. Наиболее ценны полевые данные, показывающие реальную картину. Современный подход предполагает постоянный мониторинг и проактивную оптимизацию, а не разовые исправления. Именно комплексное использование этих метрик позволяет создавать по-настоящему быстрые и отзывчивые веб-приложения.