Shopware Performance Optimierung Total Blocking Time & Time To Interactive

Der zweite Teil unserer Serie zu Google Page Speed befasst sich mit zwei wichtigen Metriken:

1. Die Dauer bis eine Seite vollständig aufgebaut ist 

2. Die Zeit nach der ein Nutzer mit der Seite interagieren kann 

Was ist Time To Interactive?

TTI (Time To Interactive) ist die Zeit, die vergeht, bis der Nutzer mit der Website interagieren kann und eine Reaktion auf seine Aktion erfolgt. Diese Metrik ist für den Anwender spürbar, wenn dieser versucht, eine Aktion in einem Onlineshop durchzuführen und dieser optisch dazu auch bereit scheint es jedoch keine Reaktion erfolgt.

Der Google Page Speed ranked die TTI nach folgenden Zeiten ein: >3,8s grün; >7,3s orange.

Was ist Total Blocking Time?

Die TBT (Total Blocking Time) ist die Zeit, die zwischen dem Laden des FCP und dem TTI vergeht, in welcher Blockierungen stattgefunden haben. Sie setzt sich zusammen aus allen Tasks, die länger als 50ms benötigen.

Diese Indikatoren sind ausschlaggebend für einen guten Google Page Speed Score und somit auch für die User Experience.

Der Google Page Speed ranked die TBT nach folgenden Zeiten ein: >200ms grün; >580ms orange.

Auswirkungen auf den Google Page Speed:

Diese beiden Metriken befinden sich auf dem ersten Platz der Metriken mit der größten Auswirkung auf den Google Page Speed. Kumuliert bilden TTI und TBT 40% des Google Page Speed ab.

Wie kann die Time To Interactive optimiert werden?

Das genutzte JavaScipt sowie dessen Komplexität sollte auf ein Minimum reduziert werden. Um die Komplexität zu verkleinern und die Blockierung des Hauptthreads zu verhindern, sollte das gesamte Script in kleinere Schnipsel aufgeteilt werden.

Zusätzlich sollte die Reduzierung der JavaScript Ausführzeiten sowie von Anfrageverkettungen vorgenommen werden.

Durch eine Priorisierung der Anfragen kann dem Kunden möglichst schnell ein funktionierender Shop präsentiert werden. Alle nicht direkt notwendigen Anwendungen oder Erweiterungen, die eine Grundfunktion darstellen, sollten in der Priorisierungen verschoben werden. Eine korrekt vorgenommene Priorisierung ermöglicht eine deutliche Reduzierung von Ladezeiten, da keine Aufgabe eine andere blockiert.

In Verbindung mit diesen Maßnahmen sollten auch dafür gesorgt werden, dass die Anfrageauslastung und Übertragungszeiten gering gehalten werden.

Außerdem sollte darauf geachtet werden, welche zusätzlichen Dirttanbieteranwendungen in den Shop mit eingepflegt werden. Anwendungen von Drittanbietern sorgen häufig dafür, dass die Time To Interactive nachhaltig negativ beeinflusst wird. In diesem Fall muss abgewogen werden, welche Drittanbietersoftware notwendig für das Betreiben des Onlineshops ist und welche nicht.

Die Ursache für diese negativen Auswirkungen ist, dass kein Einfluss auf den Code genommen werden kann, welcher LongTasks zur Folge haben kann und dieser meist nicht asynchron geladen werden kann.

Wie kann die Total Blocking Time optimiert werden?

Grundsätzlich gelten für die Optimierung der Total Blocking Time die identischen Lösungsansätze wie für die Optimierung der Time To Interactive.

Eine kurze Zusammenfassung lautet wie folgt:

- Reduzierung des Einflusses von Drittanbietersoftware

- Ausführungszeiten von JavaScript reduzieren

- Auslastung des Hauptthreads deutlich reduzieren

- Anfrageauslastung und Übertragungszeiten gering halten

Wie sieht der optimale Shopware Shop aus?

Ein optimierter Onlineshop besteht aus sich nicht blockierenden Tasks, die in kleine Tasks aufgeteilt sind, auf keinen Fall länger als 50ms laufen und außerdem asynchron sind.

Dieser Idealfall lässt sich jedoch leider in den wenigsten Fällen umsetzen, da auf Drittanbieter Codes kein Einfluss genommen werden kann und dieser meist nicht alle Voraussetzungen erfüllt und somit für Komplikationen sorgt.

Bis zum nächsten Mal:

Das war's auch schon! Im nächsten Beitrag schauen wir uns das First Contentful Paint und das Largest Contentful Paint an. Dabei geht es darum die Bilder im Shopware Shop so zu optimieren, dass der Onlineshop einen optimalen Google Page Speed Score erreicht und die User Experience gesteigert wird.