Metrik „Total Blocking Time“ (TBT)

Der Total Blocking Time (TBT) ist eine Metrik zur Messung der Webgeschwindigkeit und zeigt die Gesamtzeit an, in der eine gerenderte Seite nicht auf Benutzereingaben reagieren kann.

Die Metrik Total Blocking Time, auch bekannt als „Gesamtblockierungszeit durch JavaScript“, misst die Zeitspanne nach dem First Contentful Paint (FCP), in der der Haupt-Thread des Browsers durch JavaScript blockiert war und die Seite nicht auf Benutzereingaben reagieren konnte. Dies ist oft ein Problem mit langsamen JavaScript und die TBT-Metrik hat in der Regel einen direkten Einfluss auf die wichtige INP-Metrik.

Was bedeutet Browser-Blockierung und was sind lange Aufgaben?#

Ein blockierter Haupt-Thread des Browsers tritt auf, wenn der Browser eine lange Aufgabe („long task“) verarbeiten muss. Dies ist jede Aufgabe, die im Haupt-Thread des Browsers länger als 50 Millisekunden läuft.

Wie ein Klick aussieht, der durch eine lange Aufgabe verlangsamt wird.

Auf dem Bild ist folgendes zu sehen:

• Die erste Interaktion („Click 1“) erfolgt schnell, da der Browser sofort reagieren kann.
• Die Reaktion des Browsers auf die zweite Interaktion („Click 2“) wird verzögert, weil der Benutzer in den Hintergrundverarbeitungsprozess von JavaScript gerät („Long Task“).

Wir sagen, der Haupt-Thread ist „blockiert“, weil der Browser die laufende Aufgabe nicht unterbrechen kann. Der Benutzer klickt oder versucht, eine andere Interaktion mit der Seite durchzuführen, erhält aber keine Antwort, da der Browser gerade eine lange Aufgabe ausführt.

Wenn der Benutzer eine Interaktion mit der Seite während einer langen Aufgabe durchführt, muss der Browser warten, bis die Aufgabe abgeschlossen ist, bevor er reagieren kann.

Dauert eine Aufgabe länger als 50 Millisekunden, bemerkt der Benutzer wahrscheinlich die Verzögerung und empfindet die Seite als langsam oder nicht funktional.

Die Gesamtblockierungszeit der Seite, also der Wert der TBT-Metrik, ist die Summe der Blockierungszeiten jeder langen Aufgabe, die nach dem Ereignis FCP während des gemessenen Zeitraums auftritt. Die Messung endet üblicherweise mit der Metrik Time To Interactive (TTI) oder nach Beendigung der Überwachung durch das Messwerkzeug.

Warum es wichtig ist, TBT zu überwachen#

Benutzer möchten nicht warten, und wenn sie es tun müssen, wollen sie wissen, dass etwas passiert. Wenn bereits sinnvoller Inhalt auf einer Website angezeigt wird (das FCP-Ereignis ist eingetreten), ist es sehr wahrscheinlich, dass Benutzer anfangen, mit ihr zu interagieren. Wenn die Seite nicht auf Benutzerinteraktionen reagiert, kann dies Benutzer abschrecken und sie dazu veranlassen, die Seite zu verlassen.

Wie bereits erwähnt, hat die TBT-Metrik auch Einfluss auf eine der 3 Metriken der Core Web Vitals, nämlich die INP-Metrik. Wenn der TBT-Wert hoch ist und einzelne lange Aufgaben länger als 200 ms dauern, ist die Wahrscheinlichkeit groß, dass auch die INP-Metrik schlechter ausfällt.

Streben Sie daher danach, dass Ihre Website möglichst kurze lange Aufgaben generiert und der Total Blocking Time so gering wie möglich ist.

Ideale Werte für Total Blocking Time#

Um den Benutzern ein gutes Erlebnis zu bieten, sollten Websites bei Tests auf „durchschnittlicher mobiler Hardware“ versuchen, eine Gesamtblockierungszeit (TBT) von weniger als 200 Millisekunden zu erreichen. Dieser Wert wird vom Chrome-Team auf Web.Dev empfohlen.

Schauen wir uns noch an, welche TBT-Werte das Tool Lighthouse oder abgeleitete Tools wie unser Geschwindigkeitsmonitoring empfehlen.

TBT-Zeit	Lighthouse-Bewertung
0 – 200 ms	Grün (schnell)
200 - 600 ms	Orange (mittel)
mehr als 600 ms	Rot (langsam)

Messung von TBT#

Total Blocking Time kann nur durch synthetische Messungen, also maschinell, gemessen werden. Es gibt mehrere Möglichkeiten, den TBT-Wert für eine bestimmte Seite zu ermitteln.

PageSpeed Insights#

Mit unserem Webgeschwindigkeitstest oder dem PageSpeed Insights Tool können Sie den TBT-Wert für jede URL einzeln ermitteln.

Die TBT-Metrik im Lighthouse-Bericht, in diesem Fall innerhalb von PageSpeed Insights.

Monitoring PageSpeed.ONE#

In unserem PLUS-Monitoring zeigen wir nicht nur den aktuellen TBT-Wert für einzelne URLs, sondern können auch mittels eines Diagramms darstellen, wie sich die Metrik im Laufe der Zeit verändert hat.

Im Seitenbericht verfolgen wir die Entwicklung des TBT für einzelne URLs:

Total Blocking Time für einzelne Seitentypen der Website und deren Entwicklung.

Mit dem Watchdog zeigen wir den kontinuierlichen täglichen Verlauf des synthetischen TBT-Werts und anderer Metriken und senden Benachrichtigungen bei Überschreitung der festgelegten Grenzen:

Entwicklung der TBT-Metrik im Watchdog des Monitorings PageSpeed.ONE.

Optimierung der Total Blocking Time-Metrik#

Die Optimierung der TBT-Metrik besteht hauptsächlich darin, die Menge des auf der Seite ausgeführten JavaScripts zu reduzieren.

Es lässt sich generell Folgendes empfehlen:

• Verringern Sie die Menge des in die Seite eingebetteten JavaScripts.
• Verwenden Sie keine unnötigen JavaScript-Bibliotheken.
• Minimieren Sie die Nutzung von JavaScript-Code von Drittanbietern.
• Minimieren Sie die Arbeit im Haupt-Thread des Browsers.

Konkrete Probleme mit TBT könnten beispielsweise so aussehen:

• Generierung einer langen Aufgabe, die die Hydratation der Seite in JavaScript-Frameworks wie React oder Nuxt/Vue.js sicherstellt.
• Initialisierung einer großen Anzahl von Funktionen, die alle gleichzeitig auf das DOM-ready-Ereignis warten.
• Initialisierung vieler Drittanbieter-JavaScript-Bibliotheken, die für Marketingzwecke wie TikTok, Databreakers, GTM, FbEvents etc. verwendet werden.
• Initialisierung von JavaScript-Bibliotheken für Komponenten, die nicht im ersten Viewport sichtbar sind und deren Start daher verschoben werden kann.

In allen Fällen gilt, dass die Menge des auf der Seite oder im jeweiligen Blickpunkt ausgeführten Codes reduziert oder der JS-Code optimiert werden muss, der lange Aufgaben erzeugt. Zur Messung langer Aufgaben bei echten Benutzern können Sie die JS Long Tasks-Metrik (JSLT) verwenden.

Manuelle Optimierung langer Aufgaben in JavaScript#

Fortgeschrittene Benutzer können spezifische lange Aufgaben in den Chrome DevTools im Performance-Tab suchen (siehe Geschwindigkeitsmessung direkt im Browser) und spezifische Teile des Codes optimieren.

Lange Aufgaben auf der Website finden Sie einfach anhand des folgenden Bildes und der Anleitung:

Wie man lange Aufgaben in den Chrome DevTools findet.

1. Starten Sie den Chrome-Browser mit DevTools (F12) oder und zeigen Sie die Seite an, die Sie optimieren möchten.
2. Öffnen Sie den Performance-Tab (Bildnummer 1).
3. Nutzen Sie die Funktion Reload and Record, um die Ladezeiten der Seite aufzuzeichnen (Nummer 2).
4. Nehmen Sie die Zeitleiste des Seitenladens auf.
5. Im Main-Thread sehen Sie rot schraffierte lange Aufgaben, die länger als 50 ms dauern (Nummer 3).
6. Durch Klicken innerhalb der langen Aufgabe können Sie feststellen, welcher Teil des JavaScripts problematisch ist (Nummer 4).

Mehr zur Optimierung langer Aufgaben erfahren Sie auch in unserem Artikel zur Optimierung der INP-Metrik.