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

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

Browser Support

  • Хром: 43.
  • Край: 12.
  • Firefox: 35.
  • Сафари: 11.

Source

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

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

Визуализация времени сетевых запросов. Время слева направо: Redirect, Service Worker Init, Service Worker Fetch event, HTTP Cache, DNS, TCP, Request, Early Hints (103), Response (который перекрывается с Prompt for Unload), Processing и Load. Связанные время: redirectStart и redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart и loadEventEnd.
Диаграмма фаз сетевых запросов и связанных с ними временных интервалов. TTFB измеряет прошедшее время между startTime и responseStart .

TTFB представляет собой сумму следующих фаз запроса:

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

Сокращение задержки при установке соединения и на внутреннем сервере может снизить TTFB.

TTFB и первые намеки

Введение 103 Early Hints вызывает некоторую путаницу относительно того, что измеряет "первый байт" TTFB. 103 Early Hints считаются "первыми байтами". finalResponseHeadersStart — это дополнительная запись времени для responseStart , которая измеряет начало окончательного ответа документа (обычно ответа HTTP 200), который необходимо измерить.

Early Hints — это просто новый пример раннего реагирования. Некоторые серверы позволяют раннюю очистку ответа документа до того, как станет доступен основной текст — либо только с заголовками HTTP, либо с элементом <head> , оба из которых можно считать аналогичными по эффекту Early Hints. Это еще одна причина, по которой все они измеряются как reponseStart и, следовательно, TTFB.

Есть реальная ценность в отправке данных на раннем этапе, если полный ответ займет больше времени. Однако это затрудняет сравнение TTFB на разных платформах или технологиях в зависимости от используемых ими функций и того, как это влияет на используемое измерение 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

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 Resource Timing в 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 .