Was ist TTFB?
Mit diesem Messwert wird die Zeit zwischen der Anfrage einer Ressource und dem Eintreffen des ersten Bytes einer Antwort gemessen.
Die TTFB ist die Summe der folgenden Anfragephasen:
- Weiterleitungszeit
- Startzeit des Service Workers (falls zutreffend)
- DNS-Lookup
- Verbindung und TLS-Verhandlung
- Anfrage bis zum Zeitpunkt, an dem das erste Byte der Antwort eingegangen ist
Wenn Sie die Latenz bei der Verbindungseinrichtung und im Backend reduzieren, kann sich die TTFB verringern.
Andere Definitionen für TTFB
Die vorherige Definition ist die gängige Definition. Mit der Einführung von Early Hints ist jedoch umstritten, was als „erstes Byte“ gilt. firstInterimResponseStart
ist ein neuer zusätzlicher Zeiteintrag für responseStart
, um zwischen diesen zu unterscheiden. Dieser wird jedoch nur in Chrome und Chromium-basierten Browsern unterstützt. Daher messen einige Browser und Tools (einschließlich CrUX) bis zum Empfang der ersten Bytes, einschließlich Early Hints.
Frühe Hinweise sind nur ein neueres Beispiel für eine frühzeitige Reaktion. Einige Server ermöglichen das Ausgeben der Dokumentantwort, bevor der Haupttext verfügbar ist – entweder nur mit den HTTP-Headern oder mit dem <head>
-Element. Beides könnte als ähnlich wie Early Hints betrachtet werden und so auch die Definition der TTFB-Messung verschleiern.
Als Maß dafür, wann die „ersten Bytes“ umsetzbarer Daten für das Dokument vom Browser empfangen werden, könnten alle diese Definitionen als gültig betrachtet werden. Es ist sehr sinnvoll, Daten frühzeitig zurückzusenden, wenn die vollständige Antwort noch etwas Zeit in Anspruch nimmt. Am wichtigsten ist es, zu verstehen, was mit dem von Ihnen verwendeten Tool gemessen wird und wie sich das auf die gemessene Plattform auswirkt. Das macht es schwierig, den TTFB auf verschiedenen Plattformen oder mit verschiedenen Technologien zu vergleichen, je nachdem, welche Funktionen verwendet werden und wie sich das auf die verwendete TTFB-Messung auswirkt.
Die TTFB wird auch oft als Indikator für die Server- oder Host-Antwortzeit betrachtet. Sie wird jedoch von Faktoren außerhalb dieser direkten Kontrolle beeinflusst, z. B. von der Weiterleitungszeit, davon, ob sie aus einem Cache-Treffer eines CDN ausgeliefert wird oder einen potenziell längeren Weg zurück zu einem Ursprungsserver zurücklegen muss. Das ist besonders bei Felddaten der Fall. Lab-Tests sind in der Regel weniger von diesen Faktoren betroffen, da die End-URL in der Regel getestet wird und Caching-Änderungen oft wiederholt rückgängig gemacht werden. Lighthouse gibt die Serverantwortzeit anstelle der TTFB an, um dies klarer zu machen. Andere Lab-Tools tun dies möglicherweise nicht.
Was ist ein guter TTFB-Wert?
Da der TTFB vor nutzerorientierten Messwerten wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) kommt, sollte Ihr Server auf Navigationsanfragen schnell genug reagieren, damit für den 75. Perzentil der Nutzer ein FCP innerhalb des Grenzwerts „gut“ erreicht wird. Als Faustregel sollten die meisten Websites eine TTFB von 0, 8 Sekunden oder weniger anstreben.
TTFB messen
Die TTFB kann auf folgende Arten im Lab oder im Feld gemessen werden.
Tools für die Arbeit im Außendienst
Lab-Tools
- Im Netzwerkbereich der Chrome-Entwicklertools
- WebPageTest
TTFB in JavaScript messen
Mit der Navigation Timing API können Sie die TTFB von Navigationsanfragen im Browser messen. Im folgenden Beispiel wird gezeigt, wie eine PerformanceObserver
erstellt wird, die auf einen navigation
-Eintrag wartet und ihn in der Console protokolliert:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
Mit der web-vitals
-JavaScript-Bibliothek lässt sich der TTFB auch noch einfacher im Browser messen:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Ressourcenanfragen messen
Der TTFB gilt für alle Anfragen, nicht nur für Navigationsanfragen. Insbesondere bei Ressourcen, die auf Servern mit unterschiedlichen Ursprüngen gehostet werden, kann es zu Latenzen kommen, da Verbindungen zu diesen Servern eingerichtet werden müssen. Wenn Sie den TTFB für Ressourcen im Feld messen möchten, verwenden Sie die Resource Timing API in einer 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
});
Das vorherige Code-Snippet ähnelt dem, das zum Ermitteln der TTFB für eine Navigationsanfrage verwendet wurde. Der Unterschied besteht darin, dass hier nicht nach 'navigation'
-Einträgen, sondern nach 'resource'
-Einträgen abgefragt wird. Außerdem wird berücksichtigt, dass einige vom primären Ursprung geladene Ressourcen den Wert 0
zurückgeben können, da die Verbindung bereits geöffnet ist oder eine Ressource sofort aus einem Cache abgerufen wird.
TTFB verbessern
Eine Anleitung zur Verbesserung des TTFB Ihrer Website finden Sie in unserem ausführlichen Leitfaden zur TTFB-Optimierung.