Total Blocking Time (TBT)
Was ist Total Blocking Time?
Total Blocking Time (TBT) ist eine Web-Performance-Metrik, die die Zeitspanne misst, in der der Haupt-Thread des Browsers während des Ladens einer Seite blockiert ist und somit nicht auf Nutzereingaben reagieren kann. TBT gibt an, wie lange der Browser nach dem First Contentful Paint (FCP) durch sogenannte „Long Tasks“ (Aufgaben > 50 ms) blockiert ist und somit die Interaktivität der Seite verzögert wird.
Wie wird Total Blocking Time gemessen?
TBT berechnet sich als Summe der Zeitanteile aller Long Tasks, die jeweils länger als 50 Millisekunden dauern, zwischen FCP und Time to Interactive (TTI). Nur der Anteil, der über 50 ms hinausgeht, zählt als „Blocking Time“. Beispiel: Dauert eine Aufgabe 120 ms, werden 70 ms zur TBT addiert.
| Task-Dauer (ms) | Blocking Time (ms) |
|---|---|
| 250 | 200 |
| 90 | 40 |
| 35 | 0 |
| 30 | 0 |
| 155 | 105 |
| Summe | 345 |
Warum ist Total Blocking Time wichtig?
TBT ist ein zentraler Indikator für die Lade- und Interaktionsfähigkeit einer Webseite. Ein hoher Wert bedeutet, dass Nutzer auf Eingaben wie Klicks oder Scrollen länger warten müssen, was die User Experience verschlechtert. TBT ist zudem ein wichtiger Bestandteil des Lighthouse Performance Scores und beeinflusst die Bewertung der Seitenqualität.
Welche Werte gelten als gut bei Total Blocking Time?
Empfohlene Schwellenwerte für TBT:
- Gut: ≤ 150 ms
- Verbesserungswürdig: 151–224 ms
- Grenzwertig: 225–350 ms
- Schlecht: > 350 ms
Wie kann man Total Blocking Time optimieren?
Typische Maßnahmen zur Verbesserung der TBT sind:
- Reduzierung und Optimierung von JavaScript
- Minimierung von Haupt-Thread-Aufgaben
- Entfernen oder Verzögern von Drittanbieter-Skripten
- Code-Splitting und Einsatz von Web Workern
- Minifizierung von CSS und JavaScript
Welche Beispiele verdeutlichen Total Blocking Time?
Beispiele für TBT-relevante Vorgänge:
- Eine große JavaScript-Bibliothek blockiert den Haupt-Thread beim Laden.
- Ein Tracking-Skript eines Drittanbieters verursacht lange Tasks.
- Komplexe Berechnungen im Frontend verzögern die Reaktionsfähigkeit.
FAQ
Was ist Total Blocking Time?
Total Blocking Time misst die Zeit, in der eine Webseite während des Ladens nicht auf Nutzereingaben reagieren kann.
Wie wird TBT berechnet?
TBT ist die Summe aller Zeitanteile von Long Tasks (>50 ms) zwischen First Contentful Paint und Time to Interactive.
Warum ist ein niedriger TBT-Wert wichtig?
Ein niedriger TBT-Wert sorgt für eine schnelle Reaktionsfähigkeit und bessere Nutzererfahrung.
Welche Tools messen Total Blocking Time?
Tools wie Google Lighthouse und PageSpeed Insights analysieren und berichten TBT-Werte.
Was sind typische Ursachen für hohe TBT-Werte?
Hauptursachen sind umfangreiche oder schlecht optimierte JavaScript- und Drittanbieter-Skripte.
Verwandte Begriffe
- First Contentful Paint (FCP)
- Time to Interactive (TTI)
- Long Task
- Lighthouse
- Core Web Vitals
- JavaScript-Optimierung
- Main Thread
- Interaction to Next Paint (INP)
- PageSpeed Insights
- Web Performance