Czas do pierwszego bajtu (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

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, inicjowanie 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 dociera pierwszy bajt odpowiedzi;

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

TTFB i wczesne wskazówki

Wprowadzenie 103 wczesnych wskazówek wywołało pewne zamieszanie co do tego, co mierzy „pierwszy bajt” TTFB. 103 wczesne wskazówki są liczone jako „pierwsze bajty”. finalResponseHeadersStart to dodatkowy wpis czasu w responseStart, który mierzy początek odpowiedzi końcowego dokumentu (zwykle odpowiedzi HTTP 200).

Wczesne podpowiedzi to tylko nowszy przykład wczesnego reagowania. Niektóre serwery umożliwiają wczesne opróżnianie odpowiedzi na dokument, zanim będzie dostępna główna treść – albo tylko z nagłówkami HTTP, albo z elementem <head>. Oba te rozwiązania można uznać za podobne do wczesnych podpowiedzi. To kolejny powód, dla którego wszystkie te wartości są mierzone jako reponseStart i TTFB.

Jeśli pełna odpowiedź będzie wymagać więcej czasu, warto wcześniej wysłać dane. Utrudnia to jednak porównywanie wartości TTFB na różnych platformach lub przy użyciu różnych technologii, ponieważ zależy to od używanych funkcji i ich wpływu na pomiar TTFB. Najważniejsze jest zrozumienie, co mierzy używane przez Ciebie narzędzie i jak na wynik wpływa platforma, na której jest ono stosowane.

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 zalecamy, aby większość witryn miała wartość TTFB wynoszącą 0,8 sekund lub mniej.

Dobre wartości TTFB wynoszą 0,8 sek lub mniej, złe wartości wynoszą więcej niż 1,8 sek, a wszystkie wartości pośrednie wymagają poprawy
Dobre wartości TTFB wynoszą 0,8 s lub mniej, a złe – powyżej 1,8 s.

Jak mierzyć TTFB

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

Narzędzia terenowe

Narzędzia laboratoryjne

Pomiar czasu TTFB w JavaScript

Czas TTFB żądań nawigacyjnych możesz mierzyć w przeglądarce za pomocą interfejsu Navigation Timing API. Z tego przykładu dowiesz się, 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 ze względu na konieczność 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' używasz zapytania o wejścia 'resource'. Jest to też związane z 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.