Zeit bis zum ersten Byte (TTFB)

Wagner
Pollard

Unterstützte Browser

  • 43
  • 12
  • 31
  • 11

Quelle

Was ist TTFB?

TTFB ist ein Messwert, der die Zeit zwischen der Anfrage für eine Ressource und dem Eintreffen des ersten Byte einer Antwort misst.

Ein Diagramm der Zeitangaben für Netzwerkanfragen. Die Phasen von links nach rechts sind Weiterleitung (die sich mit Aufforderung zum Entladen überschneidet), Cache, DNS, TCP, Anfrage, Antwort, Verarbeitung und Laden. Die zugehörigen Timings sind "redirectStart" und "redirectEnd", die sich mit den Eingabeaufforderung für unloadEventStart und unloadEventEnd von Unload überschneiden, "fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "secureConnectionStart", "connectEnd", "requestStart", "responseStart", "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 zu dem Punkt, an dem das erste Byte der Antwort eingegangen ist

Die Verringerung der Latenz beim Einrichten der Verbindung und im Back-End trägt zu einer niedrigeren TTFB bei.

Was ist ein guter TTFB-Wert?

Da TTFB nutzerbezogenen Messwerten wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) vorangestellt ist, sollte Ihr Server schnell genug auf Navigationsanfragen reagieren, damit beim 75. Perzentil der Nutzer ein FCP innerhalb des Grenzwerts „Gut“ erzielt wird. Als groben Richtwert sollten die meisten Websites eine Zeit bis zum ersten Byte 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

TTFB messen

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

Außendienst-Tools

Lab-Tools

TTFB in JavaScript messen

Sie können die TTFB von Navigationsanfragen im Browser mit der Navigation Timing API 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
});

Mit der web-vitals-JavaScript-Bibliothek lässt sich die TTFB auch einfacher im Browser messen:

import {onTTFB} from 'web-vitals';

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

Ressourcenanfragen messen

TTFB gilt für alle Anfragen, nicht nur für Navigationsanfragen. Insbesondere Ressourcen, die auf ursprungsübergreifenden Servern gehostet werden, können zu Latenz führen, da Verbindungen zu diesen Servern eingerichtet werden müssen. Verwenden Sie die Resource Timing API innerhalb einer PerformanceObserver, um die TTFB für Ressourcen im Feld zu messen:

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 obige Code-Snippet ähnelt dem Snippet, das zum Messen der TTFB für eine Navigationsanfrage verwendet wird, außer dass statt 'navigation'-Einträgen stattdessen 'resource'-Einträge abgefragt werden. Außerdem wird die Tatsache berücksichtigt, dass einige Ressourcen, die aus dem primären Ursprung geladen werden, 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

Es gibt einen ausführlichen Leitfaden zur Optimierung der TTFB (in englischer Sprache). Dort finden Sie weitere Informationen zur Verbesserung der TTFB für Ihre Website.