Время до первого байта (TTFB)

Джереми Вагнер
Джереми Вагнер
GitHub
Барри Поллард
Барри Поллард

Поддержка браузера

  • 43
  • 12
  • 31
  • 11

Источник

Что такое ТТФБ?

TTFB — это метрика, измеряющая время между запросом ресурса и моментом начала поступления первого байта ответа.

Диаграмма времени сетевых запросов. Фазы слева направо: перенаправление (которое пересекается с запросом на выгрузку), кэш, DNS, TCP, запрос, ответ, обработка и загрузка. Связанные тайминги: redirectStart и redirectEnd (которые перекрываются с запросом на выгрузку unloadEventStart и unloadEventEnd), fetchStart, DomainLookupStart, DomainLookupEnd, ConnectStart, SecureConnectionStart, ConnectEnd, RequestStart,ResponseStart,ResponseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadE ventStart и loadEventEnd .
Диаграмма фаз сетевых запросов и связанных с ними временных рамок. TTFB измеряет время, прошедшее между startTime и responseStart .

TTFB — это сумма следующих фаз запроса:

  • Время перенаправления
  • Время запуска сервисного работника (если применимо)
  • DNS-поиск
  • Соединение и согласование TLS
  • Запрос, вплоть до момента поступления первого байта ответа.

Уменьшение задержки во время установки соединения и на серверной стороне будет способствовать снижению TTFB.

Что такое хороший показатель TTFB?

Поскольку TTFB предшествует показателям, ориентированным на пользователя, таким как First Contentful Paint (FCP) и Largest Contentful Paint (LCP) , рекомендуется, чтобы ваш сервер отвечал на запросы навигации достаточно быстро, чтобы 75-й процентиль пользователей испытывал FCP в пределах «хорошего» порога. . Грубо говоря, большинству сайтов следует стремиться к тому, чтобы время до первого байта составляло 0,8 секунды или меньше.

Хорошие значения TTFB составляют 0,8 секунды или меньше, плохие значения превышают 1,8 секунды, а все, что находится между ними, требует улучшения.

Как измерить TTFB

TTFB можно измерить в лаборатории или в полевых условиях следующими способами.

Полевые инструменты

Лабораторные инструменты

Измерение TTFB в JavaScript

Вы можете измерить TTFB навигационных запросов в браузере с помощью Navigation Timing API . В следующем примере показано, как создать PerformanceObserver , который прослушивает navigation запись и записывает ее в консоль:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

Библиотека JavaScript web-vitals также может измерять TTFB в браузере с меньшими сложностями:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

Измерение запросов на ресурсы

TTFB применяется ко всем запросам, а не только к запросам навигации. В частности, ресурсы, размещенные на серверах с несколькими источниками, могут вызывать задержки из-за необходимости устанавливать соединения с этими серверами. Чтобы измерить TTFB для ресурсов в полевых условиях, используйте API синхронизации ресурсов в PerformanceObserver :

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being served without a Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

Приведенный выше фрагмент кода аналогичен тому, который используется для измерения TTFB для запроса навигации, за исключением того, что вместо запроса 'navigation' записей вы запрашиваете 'resource' записи. Это также объясняет тот факт, что некоторые ресурсы, загруженные из основного источника, могут возвращать значение 0 , поскольку соединение уже открыто или ресурс мгновенно извлекается из кэша.

Как улучшить TTFB

Опубликовано подробное руководство по оптимизации TTFB , которое дает вам дополнительные рекомендации по улучшению TTFB вашего веб-сайта.