Time to Interactive einfach erklärt

Hussam Kakish

Zuletzt aktualisiert: 7. Jun 2023

Die Time to Interactive (TTI) ist die Zeit, bis Deine Website interaktiv ist und ohne Verzögerung auf Nutzereingaben reagiert. Viele Seiten sehen nach dem Aufruf schnell „fertig“ aus, sobald ein Nutzer jedoch auf Links, Buttons oder Menüs klickt, passiert lange Zeit nichts. Die Website ist sichtbar, aber nicht interaktiv. Um Deine Nutzer nicht zu frustrieren und um im Lighthouse-Bericht einen grünen TTI-Score zu erhalten, sollte die Time to Interactive auf mobilen Endgeräten bei maximal 3,8 Sekunden liegen.

Die Messung der TTI startet, sobald Nutzer Deine Seite aufrufen. Sie endet, wenn diese drei Kriterien erfüllt sind:

1. Der First Contentful Paint ist erfolgt, es ist also Inhalt „Above the Fold“ sichtbar.
2. Die Seite reagiert innerhalb von 50 Millisekunden auf Nutzereingaben.
3. Es sind Event-Handler für die meisten Seitenelemente registriert.

Welche Rolle spielen Event-Handler für die TTI?

Event-Handler sorgen dafür, dass Nutzereingaben zu bestimmten Ereignissen erfasst werden, sodass das gewünschte Ereignis ausgeführt werden kann, zum Beispiel soll ein Video bei einem Klick darauf laden.

So sieht ein Event-Handler, der den TTI beeinflusst, am Beispiel eines YouTube-Video aus.

Ein Klick auf den rot markierten Play-Button löst das Event aus. Der Event-Handler kümmert sich dann darum, das Vorschaubild durch das YouTube-Video zu ersetzen und das Video abzuspielen.

An diesem Beispiel sieht man: Es ist nicht nur wichtig ist, zu messen, wann welche Inhalte sichtbar sind, sondern auch, wann mit ihnen interagiert werden kann. Stichwort: Time to Interactive. Wenn der Nutzer ein Video mit einem Play-Button sieht, denkt er, dass er es auch abspielen kann. Wenn das aber noch nicht möglich ist, weil die Event-Handler noch nicht registriert wurden, frustriert das den Nutzer.

Eine Seite soll schließlich nicht nur „fertig“ aussehen, sondern auch voll bedienbar sein. Die Time to Interactive hilft bei der Einschätzung, wann der Nutzer voll mit der Seite interagieren kann, sodass alle Menüs oder Videos sofort auf die Nutzereingaben reagieren.

Wie hängt die TTI mit anderen Metriken zusammen?

Die Time to Interactive ist eine von vielen Metriken zur Messung der Ladezeit mithilfe von Google Lighthouse. Diese Grafik von Google zeigt, wie die Metriken zusammenhängen:

So hängt der TTI mit den anderen Metriken aus Google Lighthouse zusammen.

Sobald alle CSS-Dateien geladen wurden, kann der Browser den ersten Inhalt darstellen und der First Contentful Paint wird erreicht. Die grauen Balken zeigen die Netzwerkaktivität, wenn CSS-, JavaScript- und andere Dateien heruntergeladen werden. Sobald eine Datei heruntergeladen wurde, wertet der Browser sie aus. Dann wechselt der Hauptthread des Browsers vom unbeschäftigten grünen Modus in den beschäftigten roten Modus.

Kommt zu diesem Zeitpunkt die erste Nutzereingabe, wird der First Input Delay als die Zeit gemessen, bis der Hauptthread des Browsers in der Lage ist, auf die Nutzereingabe zu reagieren. Sobald alle Ressourcen geladen wurden und der Hauptthread für mindestens fünf Sekunden unbeschäftigt ist, wird die Messung der Time to Interactive beendet.

In der Zwischenzeit wird die Total Blocking Time gemessen. Jede Hintergrundaktivität, die länger als 50 Millisekunden dauert, erhöht die Total Blocking Time.

Was beeinflussen die Metriken?

Diese zwei Aspekte werden von den Metriken berücksichtigt:

• Sichtbarkeit und Stabilität des Layouts: First Contentful Paint, Largest Contentful Paint, Speed Index und Cumulative Layout Shift
• Interaktivität: Time to Interactive, Total Blocking Time und First Input Delay

Beide Gruppen sind wichtig: Viele Websites konzentrieren sich nur darauf, die Inhalte schnell sichtbar zu machen. Wenn anschließend jedoch noch sehr viele Ressourcen heruntergeladen und ausgewertet werden müssen, leidet darunter die Interaktivität und die Nutzer sind frustriert, weil die Website „fertig“ geladen wirkt, aber nicht reagiert.

Wie messe ich die Time to Interactive?

Du kannst die Time to Interactive über PageSpeed Insights oder über die Entwickler-Tools Deines Browsers messen. Wie das geht, verrate ich Dir im Folgenden.

TTI in den PageSpeed Insights

So funktioniert der Weg über PageSpeed Insights:

Über die PageSpeed Insights kannst Du die Time to Interactive messen.

Rufe PageSpeed Insights auf und gib die URL der zu testenden Seite ein (im Beispiel zalando.de). Klicke auf „Analysieren“ und sieh Dir den Wert der Time to Interactive an. Im Beispiel liegt Zalando mit 14,7 Sekunden auf Mobile deutlich über der Google-Empfehlung von maximal 3,8 Sekunden und damit im roten Bereich.

TTI in den Entwickler-Tools

Alternativ kannst Du die Messung auch über die Entwickler-Tools im Google Chrome oder Microsoft Edge durchführen:

In nur sieben Schritten kannst Du in den Entwickler-Tools die Tome to Interactive abrufen.

1. Rufe die gewünschte Website (hier: zalando.de) auf
2. Starte mit F12 die Entwickler-Tools.
3. Klicke auf das Gerätesymbol, um den Viewport auf ein Smartphone einzustellen. Um andere User-Agents zu testen, kannst Du auf Wunsch das Gerät ändern.
4. Drücke dann rechts auf das Einstellungssymbol (drei Punkte).
5. Wähle bei „Dock Side“ den rechten Bildschirmrand aus.
6. Wähle den Tab „Lighthouse“
7. Achte darauf, dass bei „Categories“ der Punkt „Performance“ ausgewählt ist. Klicke dann auf „Analyze page load“.
8. Jetzt siehst Du wie bei PageSpeed Insights den TTI-Wert. Die konkreten Werte können je nach Messung schwanken. Für aussagekräftige Ergebnisse solltest Du den Test im Incognito-Modus Deines Browser durchführen, weil andere Browser-Erweiterungen die Messung verfälschen können.

Das ist wichtig: Falls sich der Viewport mit den Entwickler-Tools überlappt, wird die Lighthouse-Messung verfälscht, da der ursprüngliche Viewport des Geräts durch die Entwickler-Tools verkleinert wird. Deshalb solltest Du die Entwickler-Tools für Lighthouse-Messungen entweder am rechten/linken Rand oder auf einem separaten Bildschirm anzeigen, nicht aber am unteren Bildschirmrand.

Hauptgründe für eine schlechte TTI

Der Hauptgrund für eine schlechte Time to Interactive ist JavaScript-Code. Das kann interner JavaScript-Code sein, der von Deinem CMS stammt beziehungsweise der von Deiner IT individuell programmiert wurde. Oder es handelt sich um externen JavaScript-Code von Tracking-Tools (z. B. Google Analytics, Facebook), Cookie-Bannern (z. B. Usercentrics) oder Trust-Badges (z. B. Trusted Shops).

Die JavaScripts-Dateien gehören meist zu einer dieser Kategorien:

1. Unnötiges JavaScript: Code für „Nice to have“-Funktionen, die Du eigentlich nicht brauchst (z. B. von WordPress-Plugins). Oder Code, der nur auf bestimmten Seiten gebraucht wird (z. B. Captcha für Registrierungsformulare), der aber auf allen Seiten eingebunden wird.
2. Zu früh geladenes JavaScript: Code, der nicht sofort beim Seitenaufruf ausgeführt werden muss, weil er erst später gebraucht wird. Beispiel: Das JavaScript für YouTube-Videos muss nicht sofort geladen werden, sondern erst beim Klick auf den Play-Button.
3. Berechnungsintensives JavaScript: Aufwändiger Code, der den Browser so lange beschäftigt, dass dieser in der Zeit nicht auf Nutzereingaben reagieren kann. Beispiel: Cookie-Banner.

Wie verbessere ich die Time to Interactive?

Wie Du Deine TTI verbessern kannst, hängt von den konkreten Ursachen ab. Oft musst Du aber eine oder mehrere dieser Maßnahmen umsetzen:

1. JavaScript-Dateien aufteilen: Teile den JavaScript-Code auf mehrere Dateien auf. Ziel: Code, der nur auf bestimmten Seiten (z. B. Startseite, Kategorieseite, Produktseite) benötigt wird, sollte auch nur dort geladen werden.
2. Überflüssige interne/externe JavaScripts entfernen: Prüfe Deine CMS-Plugins und entferne „Nice to have“-Plugins. Lösche auch externe Tracking-Dienste und Skripte, die Du nicht zwingend benötigst, oder binde sie nur temporär ein (z. B. Optimizely nur während eines A/B-Tests einbinden, Hotjar nur bei laufender Heatmap-Auswertung).
3. JavaScript nachladen: Lade beim Seitenaufruf nur Code, der für die Benutzung der Seite zwingend notwendig ist. Zusatz-Features wie Chatfenster, Trust-Badge und Co. sollten nachgeladen werden. Oder noch besser: Platzhalter (z. B. für einen Chat) einbinden und erst das richtige JavaScript laden, wenn der Nutzer mit dem Element (hier: Chat) interagiert.
4. Ineffizienten JavaScript-Code umschreiben: Externe Skripte kannst Du meist nur ganz oder gar nicht einbinden. Es ist jedoch möglich, berechnungsintensive interne Skripte umzuschreiben: Finde heraus, welcher Teil des Codes den Browser so lange blockiert. Ist der Teil verzichtbar, entferne ihn. Ist er unverzichtbar, solltest Du bzw. Deine IT den Teil effizienter programmieren, damit der Browser ihn schnell ausführen kann.

Um die konkreten JavaScript-Dateien zu finden, die die Time to Interactive am stärksten beeinträchtigen, schaue Dir die Ergebnisse in den PageSpeed Insights oder in Lighthouse an.

Ausführungszeiten analysieren

Hier siehst Du den Lighthouse-Bericht zu den Asführungszeiten.

Achte besonders auf den Bericht zur Ausführungszeit. Hier siehst Du, welche JavaScript-Dateien den Browser am längsten beschäftigt haben. Im Beispiel sind das interne JavaScript-Dateien von Zalando, externe JavaScript-Bibliotheken (Require JS) und der Cookie-Banner von Usercentrics.

Drittanbieter-Code identifizieren

Sieh Dir auch den Bericht zum Drittanbieter-Code an:

So sieht der Bericht zum Drittanbieter-Code in Lighthouse aus.

Hier tauchen größtenteils dieselben Dateien auf wie oben. Einige Dateien entdecken wir hier aber zusätzlich. Jetzt kennst Du die verantwortlichen JavaScript-Dateien und kannst mit den oben gezeigten 4 Tipps Deine Time to Interactive verbessern.

Weiterführende Links

• Tipps von Google zur Time to Interactive
• Erklärung der Core Web Vitals

Bildnachweis: Event-Handler: PC Games Hardware; Lighthouse-Metriken: Google; TTI messen, Berichte zu Ausführungszeit und Drittanbieter-Code: Seokratie (Website-Inhalt: Zalando)