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

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

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

  • 43
  • 12
  • 31
  • 11

Источник

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

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

Визуализация времени сетевых запросов. Время слева направо: перенаправление, инициализация 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

Предыдущее определение является общепринятым, но с появлением Early Hints вопрос о том, что считать «первым байтом», стал предметом споров. firstInterimResponse — это новая дополнительная запись времени в responseStart , позволяющая различать их, но она поддерживается только в браузерах Chrome и на базе Chromium. Поэтому некоторые браузеры и инструменты ( включая CrUX ) измеряют до тех пор, пока не будут получены первые байты, включая Early Hints.

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

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

TTFB также часто рассматривается как индикатор времени ответа сервера или хоста. Однако на него будут влиять факторы, находящиеся за пределами этого прямого контроля, такие как время перенаправления, независимо от того, обслуживается ли он из кеша, попадающего в CDN, или ему приходится совершать потенциально более длинный путь обратно к исходному серверу. Это особенно заметно на полевых данных — лабораторные испытания обычно менее подвержены влиянию этих факторов, поскольку конечный URL-адрес обычно тестируется и часто неоднократно отрицает изменения в кэшировании. Lighthouse сообщает о времени ответа сервера, а не о 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 синхронизации ресурсов в 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 .