Co to jest TTFB?
TTFB to wskaźnik określający czas między żądaniem zasobu a pojawieniem się pierwszego bajtu odpowiedzi.
startTime do responseStart.
TTFB to suma następujących faz żądania:
- Czas przekierowania
- Czas uruchomienia mechanizmu Service Worker (jeśli dotyczy)
- wyszukiwanie DNS
- Połączenie i negocjacje TLS
- żądania, aż do momentu otrzymania pierwszego bajtu odpowiedzi;
Skrócenie czasu oczekiwania w czasie konfiguracji połączenia i w backendzie może zmniejszyć TTFB.
Inne definicje potocznego ratunku
Poprzednia definicja jest konwencjonalna, ale po wprowadzeniu wczesnych wskazówek to, co jest uważane za „pierwszy bajt”, jest przedmiotem dyskusji. firstInterimResponse to nowy, dodatkowy wpis czasowy do responseStart, który pozwala rozróżnić te elementy. Jest on jednak obsługiwany tylko w przeglądarkach Chrome i Chromium. Dlatego niektóre przeglądarki i narzędzia (w tym raport na temat użytkowania Chrome) mierzą dane do momentu otrzymania pierwszych bajtów (łącznie z wcześniejszymi wskazówkami).
Wczesne wskazówki to tylko nowszy przykład szybkiego udzielania odpowiedzi. Niektóre serwery umożliwiają usunięcie odpowiedzi dokumentu, zanim pojawi się główna treść – tylko z nagłówkami HTTP lub z elementem <head>. Oba te elementy można uznać za podobne do wczesnych wskazówek, co z kolei przekłada się na definicję tego, co mierzy TTFB.
Gdy przeglądarka odbiera „pierwsze bajty” przydatnych danych dokumentu, wszystkie te definicje można uznać za prawidłowe. Szybkie wysyłanie danych ma realną wartość, jeśli pełna odpowiedź będzie potrzebowała więcej czasu. Najważniejsze jest, aby zrozumieć, jakich wskaźników używasz i jaki wpływ ma na to platforma. Utrudnia to porównywanie TTFB w przypadku różnych platform i technologii w zależności od wykorzystywanych przez nie funkcji i tego, jak wpływa to na stosowany pomiar TTFB.
TTFB jest często uważane za wskaźnik czasu odpowiedzi serwera lub hosta. Zależą one jednak od czynników niezwiązanych z bezpośrednią kontrolą, takich jak czas przekierowania, to, czy jest ono wyświetlane z żądania w pamięci podręcznej przez sieć CDN, czy też musi wydłużyć proces powrotu do serwera pierwotnego. Jest to szczególnie widoczne w przypadku danych terenowych – testy laboratoryjne zwykle mają mniejszy wpływ na te czynniki, ponieważ końcowy adres URL jest zwykle testowany i często wielokrotnie neguje zmiany w pamięci podręcznej. Aby było to bardziej przejrzyste, narzędzie Lighthouse raportuje czas odpowiedzi serwera, a nie TTFB. Inne narzędzia mogą nie działać.
Jaki jest dobry wynik TTFB?
Ponieważ funkcja TTFB wyprzedza dane dotyczące użytkowników, takie jak Pierwsze wyrenderowanie treści (FCP) i Największe wyrenderowanie treści (LCP), zaleca się, aby serwer odpowiadał na żądania nawigacji wystarczająco szybko, aby w przypadku 75 centyla użytkowników liczba FCP mieściła się w wartości „dobrej”. W większości witryn najlepiej, by tekst na komórki był krótszy niż 0,8 sekundy.
Jak mierzyć dane TTFB
TTFB można mierzyć w laboratorium lub w terenie w następujący sposób.
Narzędzia terenowe
Narzędzia laboratoryjne
- W panelu sieci w Narzędziach deweloperskich w Chrome.
- WebPageTest
Pomiar TTFB w JavaScripcie
Dane TTFB żądań nawigacji w przeglądarce możesz mierzyć za pomocą interfejsu Navigation Timing API. Poniższy przykład pokazuje, jak utworzyć obiekt 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ż bardziej zwięźle mierzyć TTFB w przeglądarce:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Mierzenie żądań zasobów
Funkcja TTFB ma zastosowanie do wszystkich żądań, a nie tylko do żądań nawigacji. W szczególności zasoby hostowane na serwerach z innych domen mogą powodować opóźnienia, ponieważ trzeba skonfigurować połączenia z tymi serwerami. Aby mierzyć TTFB w przypadku zasobów w terenie, użyj interfejsu Resource Timing API w elemencie 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 kodu używanego do pomiaru TTFB w żądaniu nawigacji. Jedyna różnica polega na tym, że zamiast wysyłania zapytań o wpisy 'navigation', wykonujesz zapytanie o wpisy 'resource'. Uwzględnia też fakt, że niektóre zasoby wczytywane z podstawowego punktu początkowego mogą zwracać wartość 0, ponieważ połączenie jest już otwarte lub zasób jest natychmiast pobierany z pamięci podręcznej.
Jak ulepszyć funkcję TTFB
Wskazówki dotyczące ulepszania funkcji TTFB w witrynie znajdziesz w szczegółowym przewodniku optymalizacji TTFB.