Total Blocking Time (TBT)

Christian Schreiber

Web Performance Consultant

Inhalt

Was ist Total Blocking Time (TBT)?

Total Blocking Time (TBT) ist eine Metrik, die die Zeitspanne misst, in der eine Webseite während des Ladens unbenutzbar ist. Es handelt sich um die Gesamtzeit, während der eine Webseite auf Benutzerinteraktionen wie Klicken, Scrollen oder Eingaben nicht reagieren kann. TBT ist eine der wichtigsten Metriken für die Bewertung der Ladezeit und Benutzerfreundlichkeit einer Webseite, da sie die Zeiträume erfasst, in denen die Seite durch lange JavaScript-Aufgaben blockiert ist.

Wie wird TBT gemessen?

TBT wird durch die Zeit zwischen dem First Contentful Paint (FCP) und dem Time to Interactive (TTI) gemessen. Dabei wird die gesamte Zeit addiert, in der die Hauptaufgaben (Tasks) im Main Thread länger als 50 Millisekunden dauern. Diese Zeiträume werden summiert, um die Total Blocking Time zu berechnen. Tools wie Google Lighthouse und PageSpeed Insights können die TBT einer Webseite analysieren und anzeigen.

Warum ist TBT wichtig?

Die Total Blocking Time ist entscheidend für die Benutzererfahrung, da sie anzeigt, wie lange eine Webseite auf Benutzereingaben nicht reagiert. Eine lange TBT kann zu Frustration führen und die Benutzerzufriedenheit erheblich beeinträchtigen. Darüber hinaus ist TBT ein wichtiger Bestandteil der Core Web Vitals, die von Google zur Bewertung der Benutzerfreundlichkeit von Webseiten herangezogen werden.

Welche Auswirkungen hat eine hohe TBT?

Eine hohe TBT hat mehrere negative Folgen:

  • Schlechtere Benutzererfahrung: Lange Wartezeiten bis zur Interaktivität führen zu Frustration bei den Nutzern.
  • Höhere Absprungrate: Benutzer verlassen möglicherweise die Seite, bevor sie vollständig geladen ist und interaktiv wird.
  • Niedrigere Conversion-Raten: Langsame Reaktionszeiten können die Wahrscheinlichkeit von Käufen oder anderen gewünschten Aktionen verringern.
  • Schlechtere Suchmaschinenplatzierungen: Google berücksichtigt TBT bei der Bewertung der Ladezeit und Benutzerfreundlichkeit, was sich auf das Ranking in den Suchergebnissen auswirken kann.

Wie kann TBT optimiert werden?

Es gibt verschiedene Methoden, um die Total Blocking Time zu reduzieren und die Performance einer Webseite zu verbessern:

Wie beeinflusst JavaScript die TBT?

Lange JavaScript-Aufgaben sind eine der Hauptursachen für eine hohe TBT. Hier sind einige Strategien zur Optimierung:

  • Code-Splitting: Aufteilen von JavaScript in kleinere Teile, die nach Bedarf geladen werden.
  • Asynchrone und defer-Attribute: Verwendung von asynchronem Laden und defer-Attributen, um das Blockieren des Main Threads zu vermeiden.
  • Reduzierung der Task-Dauer: Optimierung und Verkürzung langer Aufgaben im Main Thread.

Welche Rolle spielt die Server-Performance bei TBT?

Eine leistungsfähige Server-Infrastruktur kann die TBT erheblich reduzieren:

  • Content Delivery Network (CDN): Nutzung eines CDN zur Verteilung der Inhalte auf Server weltweit, um die Ladezeiten zu verkürzen.
  • Serverantwortzeiten optimieren: Reduzierung der Zeit, die der Server benötigt, um auf Anfragen zu reagieren.
  • Browser-Caching: Zwischenspeichern von Ressourcen im Browser, um wiederholte Anfragen zu reduzieren.

Wie kann die Bildoptimierung den TBT beeinflussen?

Bilder sind oft ein großer Teil des Datenvolumens auf einer Webseite. Optimierungstechniken beinhalten:

  • Komprimierung: Reduzierung der Dateigröße von Bildern ohne signifikanten Qualitätsverlust.
  • Bildformate: Nutzung moderner Bildformate wie WebP, die bessere Komprimierung und Qualität bieten.
  • Responsive Images: Bereitstellung verschiedener Bildgrößen je nach Gerät und Bildschirmauflösung.

Wie wirkt sich eine optimierte TBT auf die Ladezeit aus?

Eine optimierte TBT führt zu schnelleren Ladezeiten und einer insgesamt besseren Performance der Webseite. Dies verbessert die Benutzererfahrung, erhöht die Wahrscheinlichkeit, dass Besucher länger auf der Seite bleiben, und kann die Conversion-Raten positiv beeinflussen. Eine schnelle TBT trägt auch zu besseren Platzierungen in den Suchmaschinenergebnissen bei.

Welche Ergebnisse sind zu erwarten?

Webseiten mit einer optimierten TBT profitieren von:

  • Schnelleren Ladezeiten: Reduzierte Wartezeiten für Nutzer, was die Zufriedenheit erhöht.
  • Verbesserter Benutzererfahrung: Schnell geladene und interaktive Inhalte verbessern die Interaktion und das Engagement der Nutzer.
  • Geringerer Absprungrate: Mehr Nutzer bleiben auf der Seite und interagieren mit den Inhalten.
  • Bessere Suchmaschinenrankings: Schnellere und interaktive Webseiten werden von Suchmaschinen bevorzugt und besser platziert.

Zusammenfassung

Total Blocking Time (TBT) ist eine entscheidende Metrik zur Bewertung der Reaktionsgeschwindigkeit einer Webseite. Eine niedrige TBT führt zu schnelleren Ladezeiten und einer besseren Benutzererfahrung. Durch gezielte Optimierungsmaßnahmen auf der Ebene der Server-Infrastruktur, der Serverkonfiguration und des Codes kann die TBT erheblich verbessert werden. Dies führt zu einer höheren Zufriedenheit der Nutzer, besseren Suchmaschinenplatzierungen und letztendlich zu mehr Traffic und Konversionen.

Mehr Wissen
Zend

Was ist Zend? Zend ist ein beliebtes Open-Source-Framework für die Entwicklung von Webanwendungen in der Programmiersprache PHP. Es bietet eine umfangreiche Sammlung von Komponenten und Tools, die Entwicklern helfen, robuste, skalierbare und sichere Webanwendungen zu erstellen. Wie ist Zend entstanden? Zend wurde ursprünglich von der Zend Technologies Ltd. entwickelt, einem

CakePHP

Was ist CakePHP? CakePHP ist ein quelloffenes Framework für die Webentwicklung, das in der Programmiersprache PHP geschrieben ist. Es basiert auf dem Model-View-Controller (MVC)-Architekturmuster, welches die Entwicklung von Webanwendungen strukturiert und vereinfacht. CakePHP wurde entwickelt, um Entwicklern eine flexible und effiziente Möglichkeit zu bieten, dynamische Webanwendungen zu erstellen. Das Framework

Symfony

Was ist Symfony? Symfony ist ein leistungsstarkes PHP-Framework, das Entwicklern hilft, Webanwendungen zu erstellen und zu verwalten. Es ist bekannt für seine Modularität und Wiederverwendbarkeit von Komponenten, was die Entwicklungszeit verkürzt und die Wartung erleichtert. Das Framework wird von der Symfony-Community sowie von der Firma SensioLabs gepflegt. Welche Vorteile bietet

Website-Ladezeit, Google PageSpeed Score und Web Vitals professionell optimieren lassen