Czas do pierwszego bajtu (TTFB)

Jeremy Wagner
Barry Pollard

Obsługa przeglądarek

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

Źródło

Czym 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 to redirectStart i redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, 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 między startTime a responseStart.

TTFB to suma tych faz żądania:

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

Zmniejszenie opóźnienia w czasie konfigurowania 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, ale jest 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 podpowiedzi to tylko nowszy przykład wczesnego reagowania. 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 podpowiedzi i w ten sposób mogą też zaciemniać definicję tego, co mierzy TTFB.

W przypadku wszystkich tych definicji można uznać, że „pierwsze bajty” danych do działania dotyczących dokumentu są odbierane przez przeglądarkę. Wczesne wysłanie danych jest bardzo przydatne, jeśli pełna odpowiedź zajmie trochę więcej czasu. Najważniejsze jest zrozumienie, jakie dane mierzy używane przez Ciebie narzędzie i jak na ich wartość wpływa platforma, na której są one zbierane. W związku z tym trudno jest porównywać TTFB na różnych platformach i w różnych technologiach, ponieważ zależy ono od używanych funkcji i ich wpływu na 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 odpowiedzi serwera, a nie TTFB, aby ułatwić interpretację wyników, ale inne narzędzia w Laboratorium mogą tego nie robić.

Jaki wynik TTFB jest dobry?

Ponieważ TTFB poprzedza wskaźniki dotyczące użytkownika, takie jak pierwsze wyrenderowanie treści (FCP) i największe wyrenderowanie treści (LCP), zalecamy, aby serwer odpowiadał na żądania nawigacyjne na tyle szybko, aby w 75. percentylu użytkowników FCP mieścił się w „dobrym” progu. W przybliżeniu zalecamy, aby większość witryn miała wartość TTFB wynoszącą 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 TTFB wynoszą 0,8 s lub mniej, a złe wartości przekraczają 1,8 s.

Jak mierzyć TTFB

Czas TTFB można mierzyć w laboratorium lub w polu 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);

Pomiar żądań dotyczących zasobów

Czas oczekiwania na odpowiedź 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.