Czas do pierwszego bajtu (TTFB)

Jeremy Wagner
Barry Pollard

Obsługa przeglądarek

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Źródło

Co to jest TTFB?

TTFB to wskaźnik, który mierzy czas między wysłaniem żądania zasobu a momentem, w którym zaczynają napływać pierwsze bajty odpowiedzi.

Wizualizacja czasu trwania żądań sieciowych. Czasy od lewej do prawej to przekierowanie, inicjacja usługi workera, zdarzenie pobierania usługi workera, pamięć podręczna HTTP, DNS, TCP, żądanie, wczesne wskazówki (103), odpowiedź (którą pokrywa prośba o rozładowanie), przetwarzanie i wczytywanie. Powiązane wartości czasowe to redirectStart i redirectEnd, downloadStart, domainlookupStart, domainReviewEnd, connectStart, SecureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart i loadEventEnd.
Diagram przedstawiający fazy żądania sieci i powiązane z nimi czasy. TTFB mierzy czas, który upłynął od startTime do responseStart.

TTFB to suma następujących faz żądania:

  • Czas przekierowania
  • Czas uruchamiania skryptu service worker (jeśli dotyczy)
  • wyszukiwanie DNS
  • Połączenie i negocjacja TLS
  • Żądanie, aż do momentu, w którym dotarł pierwszy bajt odpowiedzi

Zmniejszenie opóźnienia w czasie konfiguracji połączenia i na zapleczu może skrócić czas TTFB.

Inne definicje TTFB

Poprzednia definicja jest definicją konwencjonalną, ale wraz z wprowadzeniem wczesnych podpowiedzi pojawiła się kwestia, co należy uznać za „pierwszy bajt”. firstInterimResponseStart to nowy dodatkowy element czasu w elementach responseStart, który umożliwia rozróżnienie tych elementów. Jest on obsługiwany tylko w przeglądarce Chrome i przeglądarkach opartych na Chromium. Dlatego niektóre przeglądarki i narzędzia (w tym CrUX) mierzą czas do momentu otrzymania pierwszych bajtów, w tym wczesnych podpowiedzi.

Wczesne wskazówki to tylko nowszy przykład szybkiego udzielania odpowiedzi. Niektóre serwery umożliwiają wyczyszczenie odpowiedzi na dokument, zanim będzie dostępna główna treść. Może to nastąpić tylko z nagłówkami HTTP lub z elementem <head>. Oba te elementy mogą mieć podobny efekt do wczesnych wskazówek i w ten sposób mogą też zaciemniać definicję tego, co mierzy TTFB.

W celu określenia, kiedy przeglądarka odbiera „pierwsze bajty” danych do działania dotyczących dokumentu, wszystkie te definicje można uznać za prawidłowe. Wczesne wysłanie danych jest bardzo przydatne, jeśli pełna odpowiedź zajmie więcej czasu. Najważniejsze jest zrozumienie, co mierzy używane przez Ciebie narzędzie i jak na ten pomiar wpływa platforma, na której jest on przeprowadzany. Utrudnia to porównywanie TTFB w przypadku różnych platform i technologii w zależności od wykorzystywanych przez nie funkcji i tego, jak wpływa to na stosowany pomiar TTFB.

Czas oczekiwania na odpowiedź (TTFB) jest też często uważany za wskaźnik czasu odpowiedzi serwera lub hosta. Na czas wczytywania może jednak wpływać wiele czynników, na które nie masz bezpośredniego wpływu, takich jak czas przekierowania, czy wczytywanie odbywa się z pamięci podręcznej przez CDN, czy też musi dotrzeć do serwera źródłowego. Jest to szczególnie widoczne w przypadku danych z pola. Testy laboratoryjne są zwykle mniej podatne na te czynniki, ponieważ testowany jest adres URL końcowy, który często wielokrotnie neguje zmiany w pamięci podręcznej. Lighthouse podaje czas reakcji serwera, a nie TTFB, aby ułatwić interpretację wyników, ale inne narzędzia laboratoryjne mogą nie uwzględniać tego parametru.

Jaki wynik TTFB jest dobry?

TTFB poprzedza wskaźniki dotyczące użytkownika, takie jak pierwsze wyrenderowanie treści (FCP) i największe wyrenderowanie treści (LCP), dlatego zalecamy, aby serwer odpowiadał na żądania nawigacyjne na tyle szybko, aby w 75. percentylu przypadków FCP był w ramach „dobrego” progu. W przybliżeniu czas TTFB powinien wynosić 0,8 sekund lub mniej.

Dobre wartości TTFB wynoszą 0,8 sekundy lub mniej, złe wartości wynoszą więcej niż 1,8 sekundy, a wszystko pomiędzy wymaga poprawy.
Dobre wartości funkcji TTFB to maksymalnie 0,8 sekundy, a nieprawidłowe – więcej niż 1,8 sekundy.

Jak mierzyć TTFB

TTFB można mierzyć w laboratorium lub w terenie w następujący sposób.

Narzędzia w polu

Narzędzia laboratoryjne

Pomiar czasu TTFB w JavaScript

Czas TTFB żądań nawigacyjnych możesz mierzyć w przeglądarce za pomocą interfejsu Navigation Timing API. Ten przykład pokazuje, jak utworzyć element PerformanceObserver, który nasłuchuje wpisu navigation i zapisują go w konsoli:

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

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

Biblioteka JavaScript web-vitals może też w bardziej zwięzły sposób mierzyć TTFB w przeglądarce:

import {onTTFB} from 'web-vitals';

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

Mierzenie żądań zasobów

Czas TTFB dotyczy wszystkich żądań, a nie tylko żądań nawigacyjnych. W szczególności zasoby hostowane na serwerach między domenami mogą powodować opóźnienia z powodu konieczności konfigurowania połączeń z tymi serwerami. Aby zmierzyć TTFB zasobów w polu, użyj interfejsu Resource Timing API w ramach 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
});

Poprzedni fragment kodu jest podobny do tego, który służy do pomiaru TTFB w przypadku żądania nawigacji, z tą różnicą, że zamiast zapytania o wejścia 'navigation' wysyłasz zapytanie o wejścia 'resource'. Jest to też spowodowane tym, że niektóre zasoby wczytane z pierwotnego źródła mogą zwracać wartość 0, ponieważ połączenie jest już otwarte lub zasób jest natychmiast pobierany z pamięci podręcznej.

Jak poprawić TTFB

Wskazówki dotyczące skracania czasu TTFB witryny znajdziesz w naszym szczegółowym przewodniku Optymalizacja czasu TTFB.