Die gesamte Blockierzeit (Total Blocking Time, TBT) ist einer der Messwerte, die im Bereich Leistung des Lighthouse-Berichts erfasst werden. Mit jedem Messwert wird ein bestimmter Aspekt der Seitenladegeschwindigkeit erfasst.
Der Lighthouse-Bericht zeigt die TBT in Millisekunden an:
Was TBT misst
TBT gibt an, wie lange eine Seite insgesamt daran gehindert ist, auf Nutzereingaben, z. B. Mausklicks, Bildschirmtipps oder Tastatureingaben, zu reagieren. Zur Berechnung der Summe wird der Blockierteil aller langen Aufgaben zwischen First Contentful Paint und Time to Interactive addiert. Aufgaben, die länger als 50 ms ausgeführt werden, sind lange Aufgaben. Der Zeitraum nach 50 ms ist der blockierende Teil. Wenn Lighthouse beispielsweise eine Aufgabe von 70 ms erkennt, beträgt der blockierende Teil 20 ms.
So bestimmt Lighthouse deinen TBT-Wert
Der TBT-Wert ist ein Vergleich der TBT-Zeit Ihrer Seite und der TBT-Werte mit Millionen echter Websites, die auf Mobilgeräten geladen werden. Informationen dazu, wie die Lighthouse-Wertegrenzwerte festgelegt werden, finden Sie unter So werden Punktzahlen ermittelt.
Diese Tabelle zeigt, wie dein TBT-Score interpretiert wird:
| Noch offen (in Millisekunden) |
Farbcodierung |
|---|---|
| 0–200 | Grün (schnell) |
| 200-600 | Orange (mittel) |
| Mehr als 600 | Rot (langsam) |
So kannst du deinen TBT-Score verbessern
Unter Was ist die Ursache für lange Aufgaben? erfahren Sie, wie Sie die Ursache langer Aufgaben im Bereich „Leistung“ der Chrome-Entwicklertools diagnostizieren können.
Im Allgemeinen sind dies die häufigsten Ursachen für lange Aufgaben:
- Unnötiges Laden, Parsen oder Ausführen von JavaScript-Code Beim Analysieren des Codes im Bereich „Leistung“ stellen Sie möglicherweise fest, dass der Hauptthread Aufgaben erledigt, die zum Laden der Seite nicht notwendig sind. Sie sollten Ihren TBT-Wert verbessern, indem Sie JavaScript-Nutzlasten durch Codeaufteilung reduzieren, nicht verwendeten Code entfernen oder Drittanbieter-JavaScript effizient laden.
- Ineffiziente JavaScript-Anweisungen. Angenommen, Sie sehen nach der Analyse Ihres Codes im Bereich „Leistung“ einen Aufruf von
document.querySelectorAll('a'), der 2.000 Knoten zurückgibt. Wenn Sie Ihren Code so refaktorieren, dass ein spezifischer Selektor verwendet wird, der nur 10 Knoten zurückgibt, sollte sich Ihr TBT-Wert verbessern.
So verbessern Sie Ihre allgemeine Leistungsbewertung
Sofern Sie keinen bestimmten Grund dafür haben, sich auf einen bestimmten Messwert zu konzentrieren, ist es in der Regel besser, die Gesamtleistung zu verbessern.
Im Abschnitt Empfehlungen Ihres Lighthouse-Berichts können Sie ermitteln, welche Verbesserungen für Ihre Seite am wertvollsten sind. Je größer die Chance, desto größer ist der Effekt auf die Leistungsbewertung. Der folgende Lighthouse-Screenshot zeigt beispielsweise, dass das Entfernen von Ressourcen, die das Rendering blockieren, die größte Verbesserung bringt:
Auf der Landingpage für Leistungsberichte erfahren Sie, wie Sie die im Lighthouse-Bericht ermittelten Optimierungsmöglichkeiten nutzen können.
Ressourcen
- Quellcode für die Prüfung Total Blocking Time
- Verzögern lange JavaScript-Aufgaben Ihre Zeit bis zur Interaktivität?
- First Input Delay optimieren
- First Contentful Paint
- Zeit bis Interaktivität
- JavaScript-Nutzlasten durch Codeaufteilung reduzieren
- Nicht verwendeten Code entfernen
- Ressourcen von Drittanbietern effizient laden