Что такое ТТФБ?
TTFB — это метрика, измеряющая время между запросом ресурса и моментом начала поступления первого байта ответа.
startTime и responseStart .TTFB — это сумма следующих фаз запроса:
- Время перенаправления
- Время запуска сервисного работника (если применимо)
- DNS-поиск
- Соединение и согласование TLS
- Запрос, вплоть до момента поступления первого байта ответа.
Уменьшение задержки во время установки соединения и на серверной стороне может снизить ваш TTFB.
Другие определения TTFB
Предыдущее определение является общепринятым, но с появлением Early Hints вопрос о том, что считать «первым байтом», стал предметом споров. firstInterimResponseStart — это новая дополнительная запись времени в 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
TTFB можно измерить в лаборатории или в полевых условиях следующими способами.
Полевые инструменты
Лабораторные инструменты
- На сетевой панели DevTools Chrome.
- Веб-ПейджТест
Измерение 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 .