Czas do pierwszego bajtu (TTFB)

Jeremy Wagner
Barry Pollard

Obsługa przeglądarek

  • 43
  • 12
  • 31
  • 11

Źródło

Co to jest TTFB?

TTFB to wskaźnik, który mierzy czas między żądaniem zasobu a momentem nadejścia pierwszego bajtu odpowiedzi.

Schemat czasów żądań sieciowych. Etapy od lewej do prawej to Przekierowanie (które pokrywa się z prośbą o usunięcie z pamięci), Pamięć podręczna, DNS, TCP, Żądanie, Odpowiedź, Przetwarzanie i Wczytywanie. Powiązane czasy to redirectStart i redirectEnd (które nakładają się z promptem dla unloadEventStart i unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, SecureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart i loadEventEnd.
Diagram faz żądań sieciowych i powiązanych z nimi czasów. TTFB mierzy czas, który upływa między startTime a responseStart.

TTFB to suma tych etapów żą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 zostanie zwrócony pierwszy bajt odpowiedzi

Skrócenie czasu oczekiwania na konfigurację połączenia i w backendzie przekłada się na mniejszą liczbę TTFB.

Jaki jest dobry wynik TTFB?

Ponieważ TTFB poprzedza dane dotyczące użytkowników, takie jak pierwsze wyrenderowanie treści (FCP) i największe wyrenderowanie treści (LCP), zalecamy, by Twój serwer odpowiednio szybko odpowiadał na żądania nawigacji, aby 75 centyl użytkowników odnotował FCP w ramach „dobrego” progu. Przybliżony czas do pierwszego bajtu w większości witryn powinien wynosić 0, 8 sekundy lub mniej.

Dobre wartości TTFB to 0,8 s do maksymalnie 0,8 s, niskie – powyżej 1,8 s, a wszystkie pozostałe wymagają poprawy

Pomiary TTFB

TTFB można mierzyć w laboratorium lub w terenie na poniższe sposoby.

Narzędzia terenowe

Narzędzia laboratoryjne

Mierzenie TTFB w JavaScript

Możesz mierzyć w przeglądarce TTFB żądań nawigacyjnych za pomocą interfejsu Timing Timing API. Z przykładu poniżej dowiesz się, jak utworzyć PerformanceObserver, który nasłuchuje wpisu navigation i zarejestruje 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 również umożliwia mniej złożoność przetwarzania TTFB w przeglądarce:

import {onTTFB} from 'web-vitals';

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

Pomiary żądań dotyczących zasobów

Funkcja TTFB ma zastosowanie do wszystkich żądań, nie tylko do tych dotyczących nawigacji. W szczególności zasoby hostowane na serwerach z innych domen mogą powodować opóźnienia ze względu na konieczność konfigurowania połączeń z tymi serwerami. Aby mierzyć TTFB zasobów w terenie, użyj interfejsu Resource Timing API w 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
});

Powyższy fragment kodu jest podobny do używanego do mierzenia TTFB w przypadku żądań nawigacji. Jedyna różnica jest taka, że zamiast wysyłania zapytań dotyczących wpisów 'navigation', wysyłasz zapytanie o wpisy 'resource'. Uwzględnia też fakt, że niektóre zasoby wczytywane z głównego źródła mogą zwracać wartość 0, ponieważ połączenie jest już otwarte lub zasób jest od razu pobierany z pamięci podręcznej.

Jak ulepszyć TTFB

Opublikowano szczegółowy przewodnik na temat optymalizacji technologii TTFB, który zawiera więcej wskazówek, jak je ulepszyć.