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

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

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

  • 43
  • 12
  • 31
  • 11

Источник

Время до первого байта (TTFB) — это основополагающий показатель для измерения времени установки соединения и скорости реагирования веб-сервера как в лаборатории, так и в полевых условиях. Он измеряет время между запросом ресурса и моментом начала поступления первого байта ответа. Это помогает определить, когда веб-сервер слишком медленно отвечает на запросы. В случае запросов навигации, то есть запросов HTML-документа, он предшествует любому другому значимому показателю производительности загрузки.

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

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

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

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

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

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

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

Ключевой момент: поскольку TTFB не является показателем Core Web Vitals , сайтам не обязательно иметь отличный TTFB, если более длинный TTFB не мешает вашему сайту получать хорошие оценки по важным метрикам. При оптимизации времени загрузки учитывайте, как ваш сайт доставляет контент. Низкий TTFB особенно важен, если сайт быстро предоставляет свою первоначальную разметку, а затем ему приходится ждать, пока скрипты наполнят его значимым контентом, как это часто бывает с одностраничными приложениями (SPA). С другой стороны, сайт, отображаемый на сервере и не требующий большой работы на стороне клиента, может иметь лучшие значения FCP и LCP, чем сайт, отображаемый на клиенте, даже если его TTFB выше.

Как измерить 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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 .