Zeit für interaktive Beispiele und bewährte Praktiken

Zeit bis zur Interaktivität (TTI)

Die TTI ist eine wichtige Kennzahl, mit der sich die Reaktionsfähigkeit einer Webseite bestimmen lässt. Manchmal sieht eine Webseite so aus, als ob sie vollständig geladen wäre, aber die Benutzer können noch nicht in Echtzeit mit ihr interagieren. Eine Webseite mit einem guten TTI-Wert erhöht die Nutzbarkeit der Seite, indem sie schneller interaktiv wird, so dass die Nutzer ein besseres Erlebnis haben.

In diesem Artikel wird die TTI im Detail erklärt und es werden wichtige Fragen dazu beantwortet, einschließlich der Frage, wie man die TTI-Werte verbessern kann.

Was ist TTI?

TTI ist eine Leistungskennzahl für Websites, die die Zeit schätzt, die eine Webseite benötigt, um vollständig interaktiv zu werden, wenn ein Benutzer sie lädt. Bevor diese Kennzahl eingeführt wurde, verließen sich Webentwickler auf typische Leistungskennzahlen wie die Seitenladezeit und das Onload-Signal, um die Leistung zu messen. Die Genauigkeit dieser Messwerte war jedoch schlecht, wenn man sie mit dem vergleicht, was der Benutzer als vollständig geladene Seite sieht. TTI ist eine bessere Alternative zu diesen typischen Metriken zur Messung der effektiven Seitenladezeit.

Was misst TTI?

Wir können eine Webseite als interaktionsbereit bezeichnen, wenn sie die folgenden drei Kriterien erfüllt:

Die Seite zeigt dem Nutzer nützliche Inhalte.
Für die am meisten sichtbaren Elemente werden Ereignisbehandler registriert.
Die Reaktionszeit für Benutzerinteraktionen beträgt maximal 50 Millisekunden.

Das erste Kriterium ist die "First Contentful Paint" (FCP) Metrik, die schätzt, wann die Webseite anfängt, nützliche Inhalte zu zeigen; das bedeutet, dass eine Webseite die TTI erreicht, nachdem sie FCP erreicht hat. Event-Handler definieren den Code, der ausgeführt werden soll, wenn ein Ereignis ausgelöst wird, z. B. wenn ein Benutzer auf einen Link klickt, durch die Seite scrollt usw. Event-Handler können genau auf Benutzerinteraktionen reagieren, wenn sie richtig registriert sind. Das dritte Kriterium ist von entscheidender Bedeutung, da die Benutzer eine gute Erfahrung mit minimalen Reaktionsverzögerungen benötigen, um Frustrationen zu vermeiden.

Wie sich TTI auf die Benutzererfahrung auswirkt

Manchmal konzentrieren sich Webentwickler auf die Optimierung der Ladegeschwindigkeit von Webseiten, ohne sich Gedanken über die Auswirkungen auf die Interaktivität der Benutzer zu machen. Dies kann zu einer Seite führen, die schnell lädt, aber aufgrund der optimierten Ladegeschwindigkeit einen höheren TTI-Wert aufweist. Die Benutzer sehen zwar, dass die Webseite fertig ist, aber sie ist immer noch nicht nutzbar, weil sie nicht mit ihr interagieren können. Dies kann zu Frustration führen, die sich in "Wutklicks" äußert, was wiederum zu einer schlechten Konvertierung der Benutzer und einer höheren Absprungrate führt.

Wie sich TTI auf SEO auswirkt

Nutzer verbringen mehr Zeit auf einer Webseite, die mehr interaktive Inhalte für sie bereithält, was zu einer geringeren Absprungrate und mehr Seitenbesuchen führt. Solche positiven SEO-Kennzahlen wirken sich auf das Ranking einer Website aus.

Wie sich TTI zu anderen Core Web Vitals verhält

Wie TTI mit FCP zusammenhängt

Wie bereits erwähnt, misst FCP die Zeit zwischen dem Beginn des Ladens einer Seite und dem Beginn der Anzeige des Inhalts. Die TTI wird nach der FCP erreicht, und es kann zu ernsthaften Problemen beim Laden der Seite kommen, wenn zwischen FCP und TTI eine große Lücke besteht.

Wie TTI mit FID zusammenhängt

Die Verzögerung der ersten Eingabe (First Input Delay, FID ) misst die Zeit, die eine Webseite benötigt, um auf die allererste Interaktion eines Nutzers zu reagieren. Sowohl TTI als auch FID hängen mit der Interaktivität der Webseite zusammen. Wenn die Webseite nicht vollständig interaktiv ist, ist sie noch nicht bereit, auf Benutzereingaben zu reagieren. Wenn der TTI-Wert niedrig ist, ist die Wahrscheinlichkeit höher, dass die Seite einen guten FID-Wert hat.

Wie TTI mit TBT zusammenhängt

Die Gesamtblockierungszeit (TBT) schätzt die Zeitspanne zwischen FCP und TTI, in der der Hauptthread blockiert ist. Wenn der Haupt-Thread für längere Zeit blockiert wird, kann er nicht auf Benutzerinteraktionen reagieren, bis er seine Aufgaben beendet hat. TBT hilft, den Schweregrad der Inaktivität einer Seite zu messen. Die Seite kann den TTI-Wert schneller erreichen, wenn der Haupt-Thread von der Ausführung langer Aufgaben befreit wird.

Die geschäftlichen Auswirkungen von TTI: Eine Fallstudie

Tokopedia ist eines der größten E-Commerce-Unternehmen in Indonesien, das landesweit rund 2,7 Millionen Händlernetze umfasst. Seine Website hat über 18 Millionen Produktangebote und verzeichnet monatlich über 50 Millionen Besucher. In einer von Google durchgeführten Fallstudie wird behauptet, dass Tokopedia dank seiner leistungsorientierten Kultur eine Steigerung der Klickrate (CTR) um 35 %, eine Steigerung der Konversionsrate (CVR) um 8 % und eine Verbesserung der TTI um 4 Sekunden erzielen konnte.

Um dies zu erreichen, stellte das Unternehmen zunächst fest, dass langlaufendes JavaScript der häufigste Grund für Leistungsprobleme war, und unternahm mehrere Schritte zur Entschärfung dieses Problems. Es erstellte eine Controller-Bibliothek, um JavaScript von Drittanbietern selektiv zu laden, und begann, leichtere Bibliotheken anstelle von schwereren zu verwenden. Außerdem wurden Code-Splitting, adaptives Laden und Lazy-Loading-Strategien eingeführt und das Laden von nicht kritischem JavaScript verschoben.

Diese JavaScript- und Ressourcenoptimierungen verbesserten die TTI um 4 Sekunden, was zu einem TTI-Wert für die Homepage von 2,2 Sekunden und TTI-Werten für Produktseiten von 1,9 Sekunden führte. Sie konnten die Größe des JavaScript-Codes auf der Homepage um 88 % und auf der Produktseite um 86 % reduzieren.

*Ergebnisse der Javascript-Optimierungen auf die TTI-Punktzahl und die* Reduzierung der Javascript-Codegröße

Wie man TTI misst

Was ist ein guter TTI-Wert?

In der Regel liegt ein guter TTI-Wert unter 3,8 Sekunden, was ein gutes Nutzererlebnis und eine bessere Suchmaschinenoptimierung ermöglicht. Die folgende Tabelle zeigt, wie der TTI-Wert mit der Leistung einer Webseite korrespondiert.

TTI (Sekunden)	Auslegung
0-3.8	Schnell
3.9-7.3	Mäßig
Über 7,3	Langsam

TTI-Messung mit WebPageTest

TTI ist eine Metrik, die im Labor und nicht mit echten Benutzern gemessen wird. Sie können TTI mit Labor-Tools wie Google Chrome Lighthouse und WebPageTest berechnen.

Das folgende Beispiel zeigt Ihnen, wie Sie den TTI mit WebPageTest messen können (Sie können auch Lighthouse als Option verwenden, aber das werden wir in diesem Beispiel nicht tun):

Navigieren Sie zu https://webpagetest.org/
Um den TTI zu erhalten, können Sie eine beliebige Testart aus dem erweiterten Test, den Webvitalen oder dem einfachen Test auswählen. Für unser Beispiel werden wir den einfachen Test wählen.
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. Optional können Sie die Option Lighthouse-Prüfung durchführen auswählen, um auch einen Lighthouse-Test durchzuführen.
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 das Dropdown-Menü Dateien exportieren. In WebPageTest ist TTI eine Interaktivitätsmetrik auf Seitenebene, die Sie in den JSON-Daten finden können.

*WebPageTest-Ergebnisse für* *https://smartblogger.com/blogging-platforms/*

Sie können entweder JSON anzeigen wählen, um das komplette JSON direkt im Browser anzuzeigen, oder JSON auf Ihren Computer herunterladen.
Suchen Sie in der JSON-Datei nach interaktiv, um die TTI-Werte in Millisekunden und Sekunden zusammen mit der zugehörigen Punktzahl zu erhalten.

Beispieltext:

Anfragen:

cpu: 50m

Speicher: 50Mi

Grenzen:

cpu: 100m

Speicher: 100Mi

Klicken Sie außerdem auf der Zusammenfassungsseite auf Vollständige Ergebnisse darstellen, um statistische Informationen über den TTI-Wert anzuzeigen.

WebPageTest Ergebnisdiagramm des TTI für die Seite https://smartblogger.com/blogging-platforms/

In unserem Beispiel beträgt der TTI-Wert 2,8 Sekunden, der FCP-Wert nur 0,486 Sekunden und der TBT-Wert ist kleiner oder gleich 0,30 Sekunden. Diese Zahlen bedeuten, dass diese Seite eine gute Interaktivität aufweist. Die Testergebnisse des oben genannten Tests, der auf WebPage Test durchgeführt wurde, finden Sie unter diesem Link.

PageSpeed Insights verwenden

Um den TTI-Wert mit dem PageSpeed Insights-Tool zu messen, geben Sie die URL der Website ein und klicken Sie auf die Schaltfläche Analysieren. Wie Sie in der Abbildung unten sehen können, hat unsere Beispielseite einen Gesamtwert von 79 in der von PageSpeed Insights durchgeführten Bewertung der Web-Kernvitalität und der TTI-Wert beträgt 3,3 s, was ein guter Wert ist und bedeutet, dass unsere Webseite schnell auf Nutzerinteraktionen reagiert.

Google PageSpeedInsight Tools Core Web Vitals Bewertungsergebnisse für die Beispielseite

Faktoren, die zu einem schlechten TTI beitragen

1. Lang ausgeführter JavaScript-Code

Wenn eine Webseite JavaScript-Code enthält, der eine lange Ausführungszeit benötigt, wirkt sich dies direkt auf die Zeit bis zum Erreichen der TTI aus. Längere JavaScript-Ausführungszeiten werden durch nicht optimierten Code, nicht verwendete Skripte, große JavaScript-Bündel von Drittanbietern, Kodierungsfehler usw. verursacht. Das Parsen, Kompilieren und Ausführen solcher Skriptdateien nimmt viel Zeit in Anspruch und wirkt sich auf die Gesamtladezeit der Seite aus.

Durch die Analyse der JavaScript-Ausführung auf der Seite können Sie etwaige Leistungsengpässe feststellen. Der WebPageTest kann solche längeren Ausführungslasten anzeigen. Die folgenden Bilder sind zum Beispiel Screenshots aus dem WebPageTest für die Seite https://www.dailymirror.lk/, die Sie unter diesem Link finden können. Sie können sehen, dass sowohl TBT als auch die größte inhaltsreiche Zeichnung der Seite höher sind als die Standardwerte, und die lang laufenden Aufgaben auf der Seite deuten auf die längere Ausführung von JavaScript hin.

Um die Ausführungszeit zu verkürzen, müssen die Zeiten für das Parsen und Kompilieren von JavaScript minimiert werden. Normalerweise wird JavaScript-Code im Hauptthread ausgeführt, der blockiert wird, bis die Ausführung abgeschlossen ist. Längere JavaScript-Dateien können viel Zeit im Haupt-Thread beanspruchen, was zu Verzögerungen auf der Seite führt und letztlich die TTI beeinträchtigt. Sie können die Blockierzeit des Hauptthreads verringern, wenn Sie die JavaScript-Ausführungszeit reduzieren.

Wie man das Problem behebt

Code-Splitting

Die Aufteilung des Codes kann die Auswirkungen von langlaufendem JavaScript auf die Ladegeschwindigkeit der Seite erheblich verringern. Anstatt das gesamte JavaScript beim Laden der ersten Seite auf einmal einzubinden, sollten Sie es in mehrere Pakete aufteilen und nur die wesentlichen Dateien nach Bedarf laden.

Reduzierung der Verwendung von JavaScript von Drittanbietern

Eine Webseite kann Abhängigkeiten mit zu vielen externen JavaScript-Bibliotheken haben. Bei diesen Skripten von Drittanbietern kann es sich um größere Dateien handeln, die viel Zeit zum Laden benötigen. Reduzieren Sie ihre 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 die Code-Minifizierung werden solche überflüssigen Elemente entfernt und der Code komprimiert.

2. Render-Blocking-Ressourcen

Rendering-blockierende Ressourcen wie JavaScript, CSS und HTML-Importe blockieren das Rendering der Seite erheblich und verzögern FCP und TTI. Bei diesen blockierenden Ressourcen handelt es sich oft um unwichtige Dateien, die Sie laden können, nachdem der Browser die wesentlichen Elemente gerendert hat. Daher können Sie die Ladezeit der Seite verkürzen und den TTI-Wert verbessern, indem Sie diese Rendering-blockierenden Ressourcen eliminieren.

WebPageTest kann solche Render-Blocking-Ressourcen finden und sie mit einem orangefarbenen Kreuz markieren. Das folgende Bild zeigt zum Beispiel die Wasserfallansicht der Seite https://www.dailymail.co.uk/news/index.html, die Sie unter diesem Link finden können. Es zeigt Render-Blocking-Ressourcen, die mit orangefarbenen Kreuzen markiert sind.

*Rendering-blockierende Ressourcen der Webseite* *https://www.dailymail.co.uk/news/index.html*

Wie man das Problem behebt

Es gibt mehrere Möglichkeiten, blockierende Ressourcen zu reduzieren. Die Hauptlösung besteht darin, das Laden von blockierendem Code zu verschieben, bis die wichtigsten Komponenten geladen sind. Dies erfordert eine Profilierung Ihrer Seite, um die blockierenden Elemente zu identifizieren. Auch das Entfernen von nicht kritischen JavaScript- und CSS-Skripten von Drittanbietern und das Verkleinern der Skripte kann dieses Problem entschärfen.

3. Offscreen-Bilder

Ausgeblendete Offscreen-Bilder werden beim Laden der Seite heruntergeladen, sind aber für den Benutzer nicht sofort sichtbar. Ein Beispiel dafür ist ein Bild, das nur sichtbar wird, wenn der Nutzer auf der Seite nach unten scrollt. Das Laden von Offscreen-Bildern kann dazu führen, dass der Browser zu viel Zeit benötigt, um Inhalte zu laden, die der Benutzer zunächst nicht benötigt, zumal Bilddateien größer sind als textbasierte Ressourcen.

Die folgenden Bilder zeigen zum Beispiel die Offscreen-Bilder, die für die Seite https://www.dailymirror.lk/ heruntergeladen wurden, die wir in unserem ersten Beispiel verwendet haben.

*Offscreen-Bilder werden während einer Webseite geladen* *https://www.dailymirror.lk/* *lädt*

Wie man das Problem behebt

Um die Auswirkungen solcher Bilder zu verringern, können Sie Offscreen-Bilder "lazy-loaden" und damit sicherstellen, dass sie nur bei Bedarf heruntergeladen werden. Der Browser kann dann nur den Inhalt anzeigen, der für das erste Laden der Seite erforderlich ist.

Einpacken

Time to Interactive (TTI) ist eine wichtige und nützliche Kennzahl zur Einschätzung der Reaktionsfähigkeit einer Webseite. Website-Besitzer sollten Webseiten für niedrigere TTI-Werte optimieren, da die TTI das Benutzererlebnis und die Suchmaschinenoptimierung beeinflusst. Wie in diesem Artikel beschrieben, gibt es mehrere Gründe für schlechte TTI-Werte, die Sie mit WebPageTest ermitteln können, und der Hauptschuldige ist nicht optimierter JavaScript-Code. Die Optimierung von JavaScript und anderen Ressourcen auf der Seite kann Ihre TTI und letztlich die Gesamtleistung verbessern.

Weitere Fachbeiträge

Einführung

Erfahren Sie, wie die Core Web Vitals funktionieren, und folgen Sie Anleitungen mit Beispielen und Best Practices.

Größtes sichtbares Inhaltselement (Largest Contentful Paint, LCP)

Erfahren Sie, wie der Largest Contentful Paint (LCP)-Wert funktioniert, wie er gemessen wird, welche Hauptursachen es gibt und wie Sie diese beheben können.

Interaktion bis zur nächsten Darstellung (Interaction to Next Paint, INP)

Erfahren Sie mehr über die neu eingeführte Kennzahl INP (Interaction to Next Paint) zur Bewertung der Reaktionsfähigkeit von Nutzerinteraktionen, warum sie FID (First Input Delay) ersetzt hat, und entdecken Sie Strategien zu ihrer Optimierung für eine bessere SEO.

Kumulative Layout-Verschiebung (Cumulative Layout Shift, CLS)

Lernen Sie die Funktionsweise der kumulativen Layout-Verschiebung (CLS) kennen, wie man sie misst und die drei häufigsten Probleme sowie deren Lösungen.

Gesamtblockierungszeit (Total Blocking Time, TBT)

Verstehen Sie die Gesamtblockierungszeit (TBT) anhand von Beispielen und lernen Sie, wie Sie sie messen und verbessern können.

Zeit bis zur Interaktivität (Time to Interactive, TTI)

Verstehen Sie die Zeit bis zur Interaktivität (Time to Interactive, TTI) anhand von Beispielen und erfahren Sie, wie Sie diese messen und verbessern können.

Erstes sichtbares Inhaltselement (First Contentful Paint, FCP)

Verstehen Sie das erste sichtbare Inhaltselement (First Contentful Paint, FCP) anhand von Beispielen und erfahren Sie, wie Sie es messen und verbessern können.