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 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 responseStart, który umożliwia rozróżnienie tych dwóch wartości. 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 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 celu określenia, kiedy przeglądarka otrzyma „pierwsze bajty” danych do działania na potrzeby dokumentu, wszystkie te definicje można uznać za prawidłowe. Wczesne wysłanie danych jest bardzo przydatne, jeśli pełna odpowiedź będzie wymagać 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 – ponad 1,8 s.

Jak mierzyć TTFB

Czas TTFB można mierzyć w laboratorium lub w warunkach rzeczywistych 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 w innych domenach 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.