Czas do pierwszego bajtu (TTFB)

Jeremy Wagner
Barry Pollard

Obsługa przeglądarek

  • 43
  • 12
  • 31
  • 11

Źródło

Czas do pierwszego bajtu (TTFB) to podstawowy wskaźnik służący do pomiaru czasu konfiguracji połączenia i responsywności serwera WWW zarówno w module, jak i w polu. Mierzy czas między żądaniem zasobu a początkiem nadejścia pierwszego bajtu odpowiedzi. Ułatwia to wykrywanie, kiedy serwer internetowy działa zbyt wolno, aby odpowiadać na żądania. W przypadku żądań nawigacji, czyli żądań dokumentu HTML, poprzedzają one wszystkie inne istotne wskaźniki wydajności wczytywania.

Schemat czasów żądań sieciowych. Etapy od lewej do prawej to Redirect, Service Worker Init, Service Worker Fetch, HTTP Cache, DNS, TCP, Request, Wczesne wskazówki (103), Response(która pokrywa się z promptem o usunięcie), Processing Processing i Load. Powiązane czasy to redirectStart i redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, SecureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, 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, dopóki nie nadejdzie pierwszy bajt odpowiedzi

Skrócenie czasu oczekiwania na konfigurację połączenia i w backendzie pomaga zmniejszyć ilość przesyłanych danych.

Jaki jest dobry wynik TTFB?

TTFB ma miejsce przed danymi ukierunkowanymi na użytkowników, takimi jak pierwsze wyrenderowanie treści (FCP) i największe wyrenderowanie treści (LCP), dlatego zalecamy, aby Twój serwer odpowiednio szybko reagował na żądania nawigacji, aby 75 centyl użytkowników miał FCP na poziomie „dobrego”. Ogólnie rzecz biorąc, większość witryn powinna dążyć do tego, aby przekształcenie strony wynosiło 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
Dobre wartości TTFB to 0,8 sekundy do maksymalnie 0,8 sekundy, a niskie – więcej niż 1,8 sekundy.

Co ważne, TTFB nie jest podstawowym wskaźnikiem internetowym, dlatego nie jest absolutnie konieczne, aby witryna miała doskonałe wartości TTFB. Dłuższy czas TTFB nie utrudnia witrynie uzyskania dobrych wyników w przypadku istotnych danych. Przy optymalizacji czasu wczytywania zastanów się, jak Twoja witryna dostarcza treści. Niska wartość TTFB jest szczególnie ważna, gdy witryna szybko dostarczy początkowe znaczniki, a potem musi czekać, aż skrypty wypełnią ją użytecznymi treściami, jak ma to miejsce w przypadku aplikacji jednostronicowych (SPA). Z drugiej strony witryna renderowana przez serwer, która nie wymaga wiele pracy po stronie klienta, może mieć lepsze wartości FCP i LCP niż witryna renderowana przez klienta nawet wtedy, gdy jego wartość TTFB jest większa.

Pomiary TTFB

Pliki TTFB można mierzyć w laboratorium lub w terenie w następujące sposoby.

Narzędzia terenowe

Narzędzia laboratoryjne

Mierzenie TTFB w JavaScript

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

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 podczas 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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 używanego do mierzenia TTFB w przypadku żądań nawigacji, z tym że zamiast wysyłania zapytań dotyczących wpisów 'navigation' wysyła zapytanie o wpisy 'resource'. Uwzględnia też fakt, że niektóre zasoby wczytywane z pierwotnego źródła mogą zwracać wartość 0, jeśli połączenie jest już otwarte lub zasób jest od razu pobierany z pamięci podręcznej.

Jak ulepszyć TTFB

Wskazówki dotyczące ulepszania technologii TTFB znajdziesz w szczegółowym przewodniku po optymalizacji tej funkcji.