Zeit bis zum ersten Byte (TTFB)

Jeremy Wagner
Barry Pollard

Unterstützte Browser

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

Quelle

Was ist TTFB?

Mit diesem Messwert wird die Zeit zwischen der Anfrage einer Ressource und dem Eintreffen des ersten Bytes einer Antwort gemessen.

Eine Visualisierung der Zeitangaben für Netzwerkanfragen. Die Zeitangaben von links nach rechts sind „Weiterleitung“, „Service Worker Init“, „Service Worker Fetch-Ereignis“, „HTTP-Cache“, „DNS“, „TCP“, „Anfrage“, „Early Hints (103)“, „Antwort“ (überschneidet sich mit „Prompt for Unload“), „Verarbeitung“ und „Laden“. Die zugehörigen Zeitangaben sind „redirectStart“ und „redirectEnd“, „fetchStart“, „domainLookupStart“, „domainLookupEnd“, „connectStart“, „secureConnectionStart“, „connectEnd“, „requestStart“, „interimResponseStart“, „responseStart“, „unloadEventStart“, „unloadEventEnd“, „responseEnd“, „domInteractive“, „domContentLoadedEventStart“, „domContentLoadedEventEnd“, „domComplete“, „loadEventStart“ und „loadEventEnd“.
Ein Diagramm der Phasen von Netzwerkanfragen und die zugehörigen Zeitangaben. Mit TTFB wird die Zeit gemessen, die zwischen startTime und responseStart verstrichen ist.

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. Der firstInterimResponseStart ist ein neuer zusätzlicher Timing-Eintrag für responseStart, mit dem zwischen diesen unterschieden werden kann. Er 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.

„Early Hints“ ist nur ein neueres Beispiel für frühzeitiges Antworten. 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 beeinflusst, die außerhalb dieser direkten Kontrolle liegen, z. B. die Weiterleitungszeit, unabhängig davon, ob sie von einem Cache-Treffer eines CDN bereitgestellt wird oder einen potenziell längeren Weg zurück zu einem Ursprungsserver zurücklegen muss. Dies 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 häufig wiederholt rückgängig gemacht werden. Aus diesem Grund gibt Lighthouse statt der TTFB die Serverantwortzeit an, um dies klarer zu machen. Bei anderen Lab-Tools ist dies jedoch möglicherweise nicht der Fall.

Was ist ein guter TTFB-Wert?

Da TTFB nutzerbezogenen Messwerten wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) vorausgeht, sollte Ihr Server schnell genug auf Navigationsanfragen reagieren, damit beim 75. Perzentil der Nutzer eine FCP innerhalb des Grenzwerts für „gut“ liegt. Als groben Anhaltspunkt sollten die meisten Websites eine TTFB von 0, 8 Sekunden oder weniger anstreben.

Gute TTFB-Werte sind maximal 0,8 Sekunden, schlechte Werte über 1,8 Sekunden und alles dazwischen muss verbessert werden
Gute TTFB-Werte liegen bei 0,8 Sekunden oder weniger, schlechte Werte bei mehr als 1,8 Sekunden.

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

TTFB in JavaScript messen

Mit der Navigation Timing API können Sie die TTFB von Navigationsanfragen im Browser messen. Das folgende Beispiel zeigt, wie Sie ein PerformanceObserver erstellen, das 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. Um die TTFB für Ressourcen im Feld zu messen, verwenden Sie die Resource Timing API in einem 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.