Функция onTTFB и объект TTFBMetric

Функция onTTFB предназначена для измерения Time to First Byte (TTFB) — времени, которое проходит с момента начала запроса страницы до получения первого байта ответа от сервера. Этот показатель является критически важным для оценки производительности веб-приложений, так как напрямую отражает скорость отклика сервера и сетевую задержку.

Синтаксис функции onTTFB

import { onTTFB } from 'web-vitals';

onTTFB(callback, reportAllChanges);

Параметры:

  • callback — функция, которая будет вызвана после получения метрики TTFB. Её аргументом является объект типа TTFBMetric.
  • reportAllChanges (необязательный, boolean) — если установлено true, функция будет вызывать callback при каждом изменении метрики, а не только при первом значении.

Объект TTFBMetric

Объект, передаваемый в callback, содержит все необходимые данные о метрике TTFB и имеет следующую структуру:

interface TTFBMetric {
  name: 'TTFB';
  value: number;
  delta: number;
  id: string;
  rating: 'good' | 'needs-improvement' | 'poor';
}

Поля объекта:

  • name — строка, всегда 'TTFB', идентифицирующая тип метрики.

  • value — число, представляющее фактическое время в миллисекундах, прошедшее до получения первого байта.

  • delta — разница между текущим и предыдущим значением метрики, полезна для отслеживания динамики изменений.

  • id — уникальный идентификатор метрики. Используется для корреляции данных в аналитике.

  • rating — качественная оценка метрики в соответствии с Web Vitals thresholds:

    • good — значение ≤ 200 мс
    • needs-improvement — значение > 200 мс и ≤ 600 мс
    • poor — значение > 600 мс

Пример использования onTTFB

import { onTTFB } from 'web-vitals';

onTTFB((metric) => {
  console.log('TTFB:', metric.value, 'ms');
  console.log('Оценка качества:', metric.rating);
});

В этом примере функция выводит в консоль время до первого байта и категорию качества. Это позволяет анализировать производительность сервера в реальном времени и выявлять узкие места.

Вариант с reportAllChanges

Если необходимо отслеживать все изменения метрики TTFB на странице, можно использовать второй аргумент:

onTTFB((metric) => {
  console.log(metric);
}, true);

В этом режиме объект TTFBMetric будет передаваться каждый раз при изменении значения, что полезно для динамических страниц с большим количеством запросов или при тестировании влияния CDN, кешей и серверной оптимизации.

Интеграция с аналитикой

TTFB часто используется совместно с внешними системами аналитики, например Google Analytics или собственными инструментами мониторинга. Для передачи метрик можно использовать следующий подход:

import { onTTFB } from 'web-vitals';

onTTFB((metric) => {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' }
  });
});

Это позволяет хранить и анализировать исторические данные о времени отклика сервера, выявлять тренды и определять участки кода или инфраструктуры, замедляющие загрузку страницы.

Советы по интерпретации TTFB

  • Значение ≤ 200 мс считается оптимальным для современных веб-приложений.
  • TTFB > 600 мс сигнализирует о возможных проблемах с серверной логикой, базой данных или сетью.
  • Для SPA и динамических приложений TTFB может отличаться на разных маршрутах и при разных условиях кэширования.
  • Использование reportAllChanges помогает выявлять нестабильные участки времени отклика при последовательных загрузках ресурсов.

Особенности реализации

  • onTTFB автоматически учитывает первые навигационные запросы, включая серверные редиректы.
  • Метрика не зависит от визуального контента страницы, поэтому её можно использовать в качестве базового показателя производительности backend.
  • Объект TTFBMetric совместим с другими метриками Web Vitals, что позволяет создавать комплексные отчеты и дашборды производительности.
Оглавление