TTI: Time to interactive
Definition
Die TTI-Metrik steht für die Zeit, die eine Website im Aufbau benötigt, um mit ihr vollständig interagieren zu können. Genauer gesagt bedeutet dies:
- Es werden verwendbare Inhalte angezeigt (durch FCP gemessen)
- Event-Handler sind für die sichtbaren Elemente geladen
- Die Webseite reagiert innerhalb von 50 Millisekunden auf eine User-Interaktion
Oft wird in der Geschwindigkeits-Optimierung von Websites der Fokus auf die Sichtbarkeit des Above-the-fold-Contents gelegt.
Die mangelnde Interaktivität kann jedoch zu frustrierender User Experience führen. Kann der User mit der Website eben eine lange Zeit nicht interagieren, obwohl sie bereits sichtbar ist, stellt dies ebenso Wartezeit und ein negatives User-Erlebnis dar.
Um den Fokus auch wieder auf die Interaktivitätsmöglichkeiten zu legen, wurde der TTI-Wert eingeführt.
Wie wird der TTI-Wert berechnet und was bedeutet er?
Der TTI-Wert ist ein Vergleichswert. Als Vergleich werden die Werte aus dem HTTP-Archive verwendet.
TTI-Wert-Bereiche
| <3,9s Gut | 3,9s – 7,3s Moderat | > 7.3s Schlecht |
Wie kann der Time to interactive-Wert gemessen werden?
Der TTI-Wert ist Teil des Lighthouse-Reports und kann beispielsweise mit den folgenden Tools gemessen werden:
- https://web.dev/
- Google Pagespeed Insights
- In den Google Chrome Web Developer Tools unter dem Lighthouse-Tab beim Erstellen des Performance-Reports
Wie kann der TTI-Wert verbessert und optimiert werden?
Das fällt primär unter die Aufgaben eines Frontend-Entwicklers. Die Verbesserung der Time-to-interactive-Metrik wird durch Verbesserung des Javascript-Codes erreicht. Das kann im Konkreten bedeuten:
- Reduktion von Javascript – z.B.: durch Code-Splitting
- Auslagern von Javascript nach User-Interaktion
- Zeitverzögertes Nachladen von Javascript
- Das PRPL-Pattern anwenden
- 3rd-party Javascript untersuchen
Grundsätzlich gilt es den Haupt-Thread zu entlasten und die Javascript-Evaluation-Time so gering wie möglich zu halten.
Time to interactive in WordPress verbessern
Der Haupt-Thread von Javascript ist maßgeblich verantwortlich für den TTI-Wert. Wie kann dieser nun innerhalb von WordPress optimiert werden?
- Es ist eine Optimierung des Themes notwendig. Unnötiges Javascript wird entfernt, oder erste bei Verwendung oder nach erster User-Interaktion nachgeladen
- Unnötige oder schlecht programmierte Plugins werden entfernt. Und/Oder es wird Code-Splitting auf Plugin-Ebene mit dem Plugin Organizer durchgeführt.
Für beide Bereiche ist tieferes technisches Verständnis notwendig, und sie sollten an einen Web-Entwickler ausgelagert werden.
Quellen und weiterführende Links