Was ist TBT?
Die Total Blocking Time (TBT) ist die Gesamtzeit, in der der Haupt-Thread einer Webseite aufgrund langer Aufgaben blockiert wird, so dass er während der Verarbeitung der Last nicht auf Benutzerinteraktionen reagieren kann. Abgesehen von den zentralen Webvitalen ist dies eine wichtige Laborkennzahl, die die Reaktionsfähigkeit oder Nutzbarkeit einer Webseite misst, bevor sie vollständig interaktiv wird.
Was TBT misst
TBT ist die Gesamtzeit zwischen dem First Contentful Paint (FCP) und der Time to Interactive (TTI). Der Haupt-Thread des Browsers führt in der Regel mehrere Aufgaben während des Ladens einer Webseite aus, und TBT hängt speziell von der Anzahl der langen Aufgaben ab, die während dieser Zeit laufen.
Hauptthema
Der Haupt-Thread des Browsers führt verschiedene Aufgaben während des Renderns von Webseiten aus, darunter wichtige Aufgaben wie das Parsen von HTML, die DOM-Konstruktion, die Ausführung von JavaScript und CSS, die Garbage Collection, die Ereignisverarbeitung usw.
Lange Aufgabe
Eine lange Aufgabe ist eine Aufgabe, deren Ausführung im Hauptthread mehr als 50 ms dauert. Der Hauptthread wird während seiner Ausführung blockiert, da der Browser eine laufende Aufgabe nicht unterbrechen kann. Daher kann der Haupt-Thread während dieser Blockierungszeit nicht auf Benutzerinteraktionen reagieren.
Die Gesamtblockierzeit ist die Summe aller Blockierzeiten solcher langen Tasks. Das folgende Diagramm zeigt zum Beispiel einige Tasks, die während des Ladens einer Seite auf dem Hauptthread laufen.
Im obigen Diagramm sind alle Aufgaben mit Ausnahme der 40 ms langen Aufgabe. Das folgende Diagramm zeigt die Zeit, die der Hauptthread aufgrund langer Aufgaben blockiert wird.
Hier beträgt die Gesamtblockierzeit 420 ms.
{{banner-37="/design/banners"}}
Wie TBT die Benutzerfreundlichkeit beeinflusst
Die Benutzer können mit einer Webseite interagieren, auch wenn nur ein Teil des Inhalts geladen wurde und bevor die Seite vollständig interaktiv ist. So können die Benutzer beispielsweise während des ersten Ladens der Seite mit dem Browser interagieren, indem sie mit der Maus klicken, die Tastatur drücken, auf den Bildschirm tippen usw. Lange laufende Aufgaben verhindern, dass der Hauptthread auf solche Eingaben reagiert, was die Benutzer frustriert. Darüber hinaus führt eine große TBT zu einer größeren TTI, was bedeutet, dass die Benutzer lange warten müssen, bis die Seite vollständig interaktiv wird, was zu weiterer Frustration führt. Solche Szenarien beeinträchtigen das allgemeine Nutzererlebnis auf der Website und führen zu einer schlechteren Konversion der Nutzer und einer höheren Absprungrate.
Wie TBT sich auf SEO auswirkt
Die Algorithmen der Suchmaschinen berücksichtigen bei der Einstufung von Webseiten das Nutzererlebnis. Wenn eine Webseite viele blockierende Aufgaben hat, kann dies die Suchanfragen von Nutzern, die eine schnelle Antwort benötigen, beeinträchtigen, so dass sich viele blockierende Aufgaben direkt auf das SEO-Ranking einer Seite auswirken können.
Wie sich TBT zu anderen zentralen Web Vitals verhält
Obwohl TBT, TTI und First Input Delay (FID) in ähnlicher Weise mit der Interaktivität einer Webseite zusammenhängen, unterscheiden sie sich doch deutlich voneinander.
Wie sich TBT von TTI unterscheidet
TTI ist die Zeit, die eine Webseite benötigt, um vollständig für Benutzerinteraktionen bereit zu sein. Wenn die Seite die TTI erreicht, zeigt sie nützliche Inhalte an oder erreicht die FCP, und für die am meisten sichtbaren Elemente werden Ereignisbehandler registriert. Die Webseite reagiert auf Benutzerinteraktionen innerhalb von 50 ms.
Im Gegensatz dazu misst die TBT, wie lange eine Webseite nicht auf Benutzerereignisse reagiert, bevor sie die TTI erreicht. Wenn also ein Benutzer zwischen FCP und TTI mit einer Webseite interagiert, erfährt der Benutzer eine Verzögerung der Antwort, da der Haupt-Thread zu diesem Zeitpunkt beschäftigt ist.
{{banner-16="/design/banners"}}
Wie TBT mit FID zusammenhängt
FID ist die Zeit, die eine Webseite braucht, um auf die erste Interaktion eines Nutzers zu reagieren. Wenn zwischen FCP und TTI eine lange Zeitspanne liegt und ein Benutzer die erste Interaktion zwischen diesen Zeitpunkten einleitet, kommt es zu einer großen Verzögerung bei der Antwort. Wenn FID zu Beginn einer lang laufenden Aufgabe stattfindet, muss das Ereignis bis zum Ende der Ausführung dieser Aufgabe warten. Daher ist ein ausgelasteter Haupt-Thread der Grund für eine größere FID, d. h. TBT wirkt sich direkt auf den FID-Wert aus.
Die Auswirkungen von TBT auf die Wirtschaft: Eine Fallstudie
Mercado Libre ist eines der größten E-Commerce-Unternehmen in Lateinamerika; es ist in 18 Ländern vertreten und Marktführer in Brasilien, Mexiko und Argentinien. In einer von Google durchgeführten Fallstudie wird behauptet, dass das Unternehmen die FID und seine TBT optimieren konnte, indem es eine 90 %ige Verringerung der maximal möglichen FID in Lighthouse erzielte.
Mercado Libre bildete ein Team, um Verbesserungsbereiche auf seiner Website zu identifizieren, die zu einem verbesserten Benutzererlebnis, längeren Einkaufssitzungen, einer geringeren Absprungrate und damit zu höheren Umsätzen führen würden. Eine langsame Webanwendungsleistung ist die Hauptursache für ein suboptimales Benutzererlebnis. Das Unternehmen entdeckte mithilfe des Chrome User Experience Report, dass seine Produktdetailseiten eine schlechte FID aufwiesen, und konzentrierte sich daraufhin auf die Verbesserung der Interaktivität der Webseiten. Während dieser Bemühungen identifizierten die Teammitglieder mithilfe von WebPageTests mehrere Aufgaben, die den Hauptthread blockieren (siehe folgende Abbildung). Außerdem wurde mithilfe von Lighthouse festgestellt, dass die maximale potenzielle FID 1710 ms beträgt.
Das Unternehmen hat mehrere Schritte unternommen, um diese Probleme zu entschärfen. Zunächst wurde die Größe des Haupt-JavaScript-Bündels reduziert, wodurch die Kompilierungs- und Parse-Zeiten optimiert wurden. Darüber hinaus wurden Code-Splitting und eine partielle Hydratisierungstechnik eingesetzt, um den Haupt-Thread optimal zu nutzen. Durch diese Optimierungen konnte das Unternehmen die Max Potential FID von 1710 ms auf 200 ms reduzieren. Die Bemühungen zur Optimierung von TBT durch Code-Splitting, Optimierung von Skripten Dritter und verbesserte Asset-Bündelung wurden fortgesetzt.
Wie man TBT misst
Was ist ein guter TBT-Wert?
Im Allgemeinen liegt ein guter TBT-Wert unter 300 ms. Die folgende Tabelle zeigt, wie der TBT-Wert mit der Leistung einer Webseite laut Google Lighthouse übereinstimmt.
TBT-Messung
Sie können TBT mit den folgenden Tools berechnen:
Im folgenden Beispiel werden wir TBT mit WebPageTest messen. Sie können die folgenden Schritte ausführen, um einen Test auf der von Ihnen gewählten Webseite durchzuführen und die wichtigsten Webvitaldaten abzurufen:
- Gehen Sie auf https://webpagetest.org/.
- Wählen Sie auf der Hauptseite die Registerkarte Webvitalien.
- Geben Sie die URL der Webseite ein, die Sie testen möchten; wir haben diese URL verwendet.
- Wählen Sie die gewünschte Testkonfiguration aus.
- Starten Sie den Test und warten Sie ein paar Minuten, um die endgültigen Ergebnisse zu erhalten.
- Rufen Sie die Seite mit den Leistungstestergebnissen auf und klicken Sie auf den Abschnitt Web-Vitalwerte. Dort sehen Sie die Gesamtblockierzeit zusammen mit den anderen wichtigen Webvitalen.
In unserem Beispiel beträgt die TBT also 3720 ms, was ein großer Wert ist. Das Largest Contentful Paint (LCP) beträgt 2204 ms, und die kumulative Layout-Verschiebung (CLS) liegt bei 0,178. Diese Werte zeigen, dass diese Seite sehr langsam ist. Die Ergebnisse des oben genannten Tests, der auf WebPageTest durchgeführt wurde, finden Sie hier.
WebPageTest visualisiert auch die langen Tasks und liefert ihre Haupt-Thread-Blockierzeiten nach Skriptursprung
{{banner-34="/design/banners"}}
Faktoren, die zu schlechtem TBT beitragen
1. Große Skripte von Drittanbietern
JavaScript von Drittanbietern in Webseiten kann für verschiedene Zwecke wichtig sein, z. B. für die Erfassung von Analysen, die gemeinsame Nutzung sozialer Netzwerke, die Einbettung von Videoplayern usw. Solche Skripte können nicht optimierte Inhalte enthalten, die die Leistung erheblich verringern und zusätzliche Netzwerkanforderungen stellen. Darüber hinaus wird das Rendering blockiert, wenn der Server des Drittanbieters Probleme hat, die dazu führen, dass er die angeforderten Ressourcen nicht liefern kann. Auf all diese Arten können Skripte von Drittanbietern zu langwierigen Aufgaben beitragen.
Mit WebPageTest können Sie langsam laufende Skripte von Drittanbietern identifizieren. Die folgenden Bilder sind zum Beispiel Screenshots der Web-Vitalwerte für die Seite https://www.bbc.com/news/world, die Sie unter diesem Link finden können. Dort können Sie sehen, dass die TBT 7334 ms beträgt, was ein sehr schlechtes Ergebnis ist.
Der Test zeigt, dass die Seite mehrere Skripte von Drittanbietern enthält, die den Hauptthread für mehr als 300 ms blockieren.
Wie man das Problem behebt
Die Lösung besteht darin, die Anzahl der überflüssigen Skripte von Drittanbietern zu begrenzen und sie erst zu laden, wenn das grundlegende Laden der Webseite abgeschlossen ist.
{{banner-35="/design/banners"}}
2. Hohe JavaScript-Ausführungszeit
Netzwerk-, Speicher-, Kompilierungs- und Ausführungskosten sind mit der Ausführungszeit von JavaScript verbunden. Probleme wie weniger optimierter Code, ungenutzte Skripte und Kodierungsfehler führen zu einer langen JavaScript-Ausführungszeit. Das Parsen, Kompilieren und Ausführen ineffizienter Skriptdateien nimmt viel Zeit in Anspruch und beeinträchtigt die Ladezeit der Seite insgesamt.
WebPageTest kann die Ausführungszeiten (CPU-Zeiten) von Skripten anzeigen. Das folgende Bild ist beispielsweise der Tabelle entnommen, in der alle Webseitenanfragen des vorherigen Beispiels aufgeführt sind(https://www.bbc.com/news/world).
Aus der obigen Tabelle können Sie ersehen, dass einige JavaScript-Skripte Ausführungszeiten von über 1000 ms haben, was zu Verlangsamungen führt.
Wie man das Problem behebt
- Code-Aufteilung
Die Aufteilung des Codes kann die Auswirkungen langlaufender JavaScript-Skripte auf die Ladegeschwindigkeit der Seite erheblich verringern. Anstatt alle JavaScript-Skripte beim Laden der ersten Seite auf einmal einzubinden, sollten Sie sie in mehrere Pakete aufteilen und nur die wesentlichen Dateien nach Bedarf laden.
- Reduzieren Sie die Verwendung von JavaScript von Drittanbietern
Eine Webseite kann von zu vielen externen JavaScript-Bibliotheken abhängig sein. Reduzieren Sie deren Verwendung wo immer möglich und laden Sie sie nur, wenn sie für die Seite notwendig sind.
- Minimierung des Codes
JavaScript- und CSS-Dateien können unnötige Zeichen wie Zeilenumbrüche und Leerzeichen enthalten, was zu einem langsameren Laden der Seite führt. Durch Code-Minifying wird solcher überflüssiger Code entfernt und komprimiert.
3. Hauptthema mit zu viel Arbeit
Der Hauptthread ist der kritische Teil einer Webseite, der den größten Teil der Arbeit erledigt. Standardmäßig übernimmt er die meisten Kernprozesse wie das Parsen, Bewerten und Ausführen von JavaScript und CSS, den Aufbau des DOM, die Anwendung der angegebenen Stile, die Verarbeitung von Benutzerereignissen usw. Wenn der Hauptthread mit diesen Aufgaben beschäftigt ist, kann es sehr lange dauern, bis die Seite interaktiv wird.
Die WebpageTest-Ergebnisse für die Seite https://www.bbc.com/news/world bieten beispielsweise eine detaillierte Übersicht über alle Aktivitätszeiten des Hauptthreads, einschließlich der Leerlaufzeit.
Das PageSpeed Insights-Tool zeigt auch, wie der Haupt-Thread seine Zeit mit der Ausführung verschiedener Aufgaben verbringt. Den Ergebnissen zufolge hat der Haupt-Thread viel Zeit mit der Skriptbewertung verbracht.
Wenn Sie wissen, wo der Haupt-Thread mehr Zeit benötigt, können Sie feststellen, wo Sie optimieren müssen.
Wie man das Problem behebt
Optimieren Sie die Arbeit des Hauptthreads durch:
- Verwendung von Web Workern
- Verkürzung der Skriptauswertungszeit
- Reduzierung der Neuberechnung von Stil und Layout
- CSS verkleinern
- Entfernen von unbenutztem Code
- Zurückstellen von ungenutztem und unkritischem JavaScript
- Vermeiden Sie die Verwendung von langlaufenden Input-Handlern
{{banner-36="/design/banners"}}
4. Übermäßige DOM-Größe
Die TBT erhöht sich auch, wenn die Webseite aus einem großen DOM-Baum besteht, was bedeutet, dass die Webseite beim ersten Laden der Seite viele unsichtbare DOM-Knoten enthält, was die Speichernutzung erhöht. Wenn der DOM-Baum über ein ausgefeiltes Styling verfügt, muss der Browser das Styling und die Position der Knoten jedes Mal neu berechnen, wenn ein Benutzer damit interagiert. Eine übermäßige DOM-Größe führt dazu, dass der Haupt-Thread durch längere Aufgaben blockiert wird.
Das Tool PageSpeed Insights kann auch anzeigen, ob die Seite eine übermäßige DOM-Größe aufweist. Die folgenden Bilder zeigen die Ergebnisse für unser Beispiel https://www.bbc.com/news/world. Den Ergebnissen zufolge hat die Webseite 3.750 DOM-Elemente.
Wie man das Problem behebt
- Wählen Sie verschiedene Bibliotheken in JavaScript, die das wiederholte Laden von Knoten auf der Seite überflüssig machen. Sie können zum Beispiel das React-Window für eine Webseite verwenden, die React verwendet.
- Verwenden Sie "Lazy Loading".
- Teilen Sie die Webseite in mehrere Seiten auf.
5. Hohe Anzahl von Netzwerkanfragen und Übertragungsgrößen
Eine größere Anzahl von Netzwerkanfragen verursacht auch einen höheren TBT-Wert. Die folgende Abbildung zeigt die Aufschlüsselung der Anzahl der Anfragen nach Domänen für unser Beispiel https://www.bbc.com/news/world. Den Ergebnissen zufolge kamen mehr Anfragen von Drittanbieter-Domains als von der eigenen Domain. Darüber hinaus können Sie das PageSpeed Insights-Tool verwenden, um eine Vorstellung davon zu bekommen, wie viele Anfragen für jeden Typ wie Bilder, Skripte, Stylesheets und Drittanbieter-Domains ankommen und wie groß ihre Nutzlast ist.
Wie man das Problem behebt
- Optimierung von JavaScript- und CSS-Dateien durch Code-Minifizierung, Entfernung ungenutzter Skripte, Code-Aufteilung, Bereitstellung von modernem Code usw.
- Optimieren Sie Ihre Bilder mit Techniken wie Bildkomprimierung, Auswahl des richtigen Bildformats, Verwendung von Bild-CDNs, Verwendung von Videos anstelle von animierten GIFs, Bereitstellung von responsiven Bildern, Lazy Loading usw.
- Verwenden Sie kleinere Schriftgrößen und beseitigen Sie unsichtbaren Text.
- Optimieren Sie Skripte von Drittanbietern, indem Sie den Code von Drittanbietern auswählen.
Nachbereitung
TBT ist eine wichtige Labormessung, die die Reaktionsfähigkeit und Benutzerfreundlichkeit einer Webseite bewertet, bevor sie interaktiv wird. Wie wir in diesem Artikel gelernt haben, wirkt sie sich direkt auf das Benutzererlebnis und die Suchmaschinenoptimierung einer Website aus. Es gibt mehrere Gründe für eine schlechte TBT, die Sie mit WebPageTest herausfinden können. Der Hauptgrund für eine schlechte TBT ist nicht optimierter JavaScript-Code von Drittanbietern. Website-Besitzer können die TBT verbessern, indem sie die in diesem Artikel beschriebenen Optimierungsoptionen befolgen, was viele Unternehmen bereits tun.
