Zeit bis zum ersten Byte (TTFB)

Jeremy Wagner
Barry Pollard

Unterstützte Browser

  • 43
  • 12
  • 31
  • 11

Quelle

Time to First Byte (TTFB) ist ein grundlegender Messwert zum Messen der Einrichtungszeit der Verbindung und der Reaktionszeit des Webservers sowohl im Labor als auch im Fachgebiet. Sie misst die Zeit zwischen der Anfrage für eine Ressource und dem Eintreffen des ersten Byte einer Antwort. Dies ist hilfreich, um zu ermitteln, wann ein Webserver zu langsam ist, um auf Anfragen zu antworten. Bei Navigationsanfragen – also Anfragen für ein HTML-Dokument – ist dies jedem anderen relevanten Messwert für die Ladeleistung voraus.

Ein Diagramm der Zeitangaben für Netzwerkanfragen. Die Phasen von links nach rechts sind „Weiterleitung“, „Service Worker Init“, „Service Worker Fetch“-Ereignis, „HTTP-Cache“, „DNS“, „TCP“, „Request“, „Early Hints“ (103), „Response“ (überschneidet sich mit der Aufforderung zum Entladen), „Processing“ und „Load“. 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 Netzwerkanfragephasen und der zugehörigen Zeitabstände. TTFB misst die verstrichene Zeit zwischen startTime und responseStart.

TTFB ist die Summe der folgenden Anfragephasen:

  • Weiterleitungszeit
  • Service Worker-Startzeit (falls zutreffend)
  • DNS-Lookup
  • Verbindung und TLS-Verhandlung
  • Anfrage, bis das erste Byte der Antwort eingeht

Durch die Reduzierung der Latenz beim Einrichten der Verbindung und im Back-End wird die TTFB reduziert.

Was ist ein guter TTFB-Wert?

Da TTFB vor nutzerorientierten Messwerten wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) stattfindet, empfehlen wir, dass Ihr Server schnell genug auf Navigationsanfragen reagiert, damit beim 75. Perzentil der Nutzer ein FCP innerhalb des Grenzwerts „Gut“ erreicht wird. Als grober Richtwert sollten die meisten Websites eine TTFB von 0, 8 Sekunden oder weniger anstreben.

Gute TTFB-Werte betragen maximal 0,8 Sekunden, schlechte Werte größer als 1,8 Sekunden und alles dazwischen muss verbessert werden
Gute TTFB-Werte betragen maximal 0,8 Sekunden und schlechte Werte größer als 1,8 Sekunden.

Wichtig: Da TTFB kein Core Web Vitals-Messwert ist, ist es nicht unbedingt für Websites eine hervorragende TTFB erforderlich, solange deine Website mit der längeren TTFB nicht schwieriger wird, bei den entscheidenden Messwerten gute Ergebnisse zu erzielen. Überlegen Sie bei der Optimierung der Ladezeiten, wie Inhalte auf Ihrer Website bereitgestellt werden. Eine niedrige TTFB ist besonders wichtig, wenn eine Website das anfängliche Markup schnell bereitstellt und dann darauf warten muss, dass Skripts mit relevanten Inhalten gefüllt werden, wie es häufig bei Single Page Applications (SPAs) der Fall ist. Andererseits kann eine vom Server gerenderte Website, die nicht viel clientseitige Arbeit erfordert, bessere FCP- und LCP-Werte haben als eine clientseitig gerenderte Website, selbst wenn ihre TTFB höher ist.

TTFB messen

TTFB kann im Lab oder im Feld auf folgende Arten gemessen werden.

Außendienst-Tools

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 einen PerformanceObserver erstellen, der 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
});

Auch die web-vitals-JavaScript-Bibliothek kann TTFB im Browser einfacher messen:

import {onTTFB} from 'web-vitals';

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

Ressourcenanfragen analysieren

TTFB gilt für alle Anfragen, nicht nur für Navigationsanfragen. Insbesondere Ressourcen, die auf ursprungsübergreifenden Servern gehostet werden, können beim Einrichten von Verbindungen zu diesen Servern Latenz verursachen. Wenn Sie die TTFB für Ressourcen im Feld messen möchten, verwenden Sie die Resource Timing API in einem 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
});

Das vorherige Code-Snippet ähnelt dem Snippet, das zum Messen der TTFB für eine Navigationsanfrage verwendet wird, mit der Ausnahme, dass Sie nicht nach 'navigation'-Einträgen, sondern nach 'resource'-Einträgen abfragen. Außerdem wird berücksichtigt, dass einige Ressourcen, die aus dem primären Ursprung geladen werden, den Wert 0 zurückgeben, wenn die Verbindung bereits offen ist oder eine Ressource sofort aus einem Cache abgerufen wird.

TTFB verbessern

Informationen zur Verbesserung der TTFB für Ihre Website finden Sie in unserem ausführlichen Leitfaden zur Optimierung von TTFB.