Langsame Interaktionen im Labor manuell diagnostizieren

Erfahren Sie, wie Sie Ihre Felddaten ins Labor nehmen, um die Ursachen langsamer Interaktionen durch manuelle Tests zu reproduzieren und zu identifizieren.

Jeremy Wagner

Bei der Optimierung von Interaction to Next Paint (INP) ist es schwierig, die Ursache für einen schlechten INP herauszufinden. Es gibt viele mögliche Ursachen, z. B. Drittanbieter-Skripts, die viele Aufgaben im Hauptthread planen, große DOM-Größen, teure Ereignis-Callbacks und andere Schuldner.

Die Verbesserung von INP kann schwierig sein. Zunächst müssen Sie wissen, welche Interaktionen in der Regel für den INP einer Seite verantwortlich sind. Wenn Sie nicht wissen, welche Interaktionen auf Ihrer Website aus Sicht echter Nutzer am langsamsten sind, lesen Sie den Artikel Langsame Interaktionen erkennen. Sobald Sie über Felddaten verfügen, können Sie diese spezifischen Interaktionen manuell in Labortools testen, um herauszufinden, warum sie langsam sind.

Was ist, wenn Sie keine Felddaten haben?

Felddaten sind von entscheidender Bedeutung, da Sie so viel Zeit sparen, wenn Sie herausfinden möchten, welche Interaktionen optimiert werden müssen. Es kann jedoch sein, dass Sie keine Felddaten haben. Wenn das auf Ihre Situation zutrifft, ist es trotzdem möglich, zu verbessernde Interaktionen zu finden, obwohl dies etwas mehr Aufwand und einen anderen Ansatz erfordert.

Total Blocking Time (TBT) ist ein Lab-Messwert, mit dem die Reaktionszeit von Seiten während des Ladevorgangs bewertet wird. Dieser Wert korreliert gut mit dem INP-Wert. Wenn Ihre Seite eine hohe TBT aufweist, ist dies ein Hinweis darauf, dass sie beim Laden der Seite möglicherweise nicht sehr gut auf Nutzerinteraktionen reagiert.

Sie können Lighthouse verwenden, um die TBT Ihrer Seite zu ermitteln. Wenn die TBT einer Seite hoch ist, besteht die Möglichkeit, dass der Hauptthread während des Seitenaufbaus zu beschäftigt ist. Dies kann sich darauf auswirken, wie responsiv eine Seite während dieser entscheidenden Zeit im Seitenlebenszyklus ist.

Um langsame Interaktionen nach dem Laden der Seite zu finden, benötigen Sie möglicherweise andere Datentypen, z. B. häufige Nutzerflüsse, die Sie möglicherweise bereits in den Analysen Ihrer Website identifiziert haben. Wenn Sie beispielsweise an einer E-Commerce-Website arbeiten, besteht ein gängiger User Flow aus den Aktionen der Nutzenden, wenn sie Artikel in einen Online-Einkaufswagen legen und zur Kasse gehen.

Unabhängig davon, ob Sie über Felddaten verfügen, besteht der nächste Schritt darin, langsame Interaktionen manuell zu testen und zu reproduzieren. Nur wenn Sie eine langsame Interaktion reproduzieren können, lässt sich das Problem beheben.

Langsame Interaktionen im Labor reproduzieren

Es gibt eine Reihe von Möglichkeiten, langsame Interaktionen im Labor durch manuelle Tests zu reproduzieren. Mit dem folgenden Framework können Sie jedoch versuchen.

Trace aufzeichnen

Für die Diagnose und Fehlerbehebung bei langsamen Interaktionen wird der Chrome Performance Profiler empfohlen. So erstellen Sie ein Profil für eine Interaktion im Leistungsprofil-Tool von Chrome:

1. Die zu testende Seite muss geöffnet sein.
2. Öffnen Sie die Chrome-Entwicklertools und rufen Sie den Bereich Leistung auf.
3. Klicken Sie links oben im Steuerfeld auf die Schaltfläche Aufzeichnen, um mit dem Tracing zu beginnen.
4. Führen Sie die Interaktionen aus, für die Sie eine Fehlerbehebung durchführen möchten.
5. Klicken Sie noch einmal auf die Schaltfläche Aufzeichnen, um das Tracing zu beenden.

Wenn der Profiler Daten ausfüllt, sollte die Aktivitätszusammenfassung oben im Profiler angezeigt werden. In der Aktivitätsübersicht werden rote Balken oben angezeigt, an denen lange Aufgaben in der Aufzeichnung aufgetreten sind. So können Sie schnell an problematische Bereiche heranzoomen.

Sie können schnell auf Problembereiche fokussieren, indem Sie einen Bereich in der Aktivitätsübersicht ziehen und auswählen. Sie können optional die Navigationspfade im Profiler verwenden, um die Zeitachse einzugrenzen und nicht relevante Aktivitäten zu ignorieren.

Nachdem Sie den Fokus darauf festgelegt haben, wo die Interaktion stattgefunden hat, können Sie mithilfe des Tracks Interaktionen die Interaktion und die Aktivität, die im Track des Hauptthreads darunter stattgefunden hat, ausrichten:

Sie können zusätzliche Details dazu abrufen, welcher Teil der Interaktion am längsten war, indem Sie den Mauszeiger auf die Iteration im Interaktions-Track bewegen:

Der gestreifte Teil der Interaktion gibt an, wie lange die Interaktion 200 Millisekunden überschritten hat. Dies ist die Obergrenze für für den INP-Wert einer Seite liegt. Die folgenden Teile der Interaktion sind aufgeführt:

1. Die Eingabeverzögerung – dargestellt am linken Barthaar.
2. Die Verarbeitungsdauer – visualisiert durch den ausgefüllten Block zwischen den linken und rechten Schnurrhaaren.
3. Die Verzögerung der Präsentation, dargestellt durch das rechte Bart.

Jetzt geht es darum, das Problem bzw. die Probleme, die die langsame Interaktion verursachen, genauer zu untersuchen. Darauf gehen wir später in diesem Leitfaden ein.

Chrome-Erweiterung für Web Vitals

Der Leistungs-Profiler ist der empfohlene Ansatz zur Diagnose von Interaktionen, die als langsam bekannt sind. Es kann jedoch einige Zeit dauern, bis langsame Interaktionen identifiziert werden, wenn Sie nicht wissen, welche Interaktionen problematisch sind. Ein möglicher Ansatz ist die Verwendung der Chrome-Erweiterung „Web Vitals“. Mit dieser Erweiterung können Sie schnell eine Reihe von Interaktionen ausprobieren, um problematische zu finden, bevor Sie zum Leistungsprofiler übergehen.

Nach der Installation zeigt die Web Vitals-Erweiterung Interaktionsdaten in der DevTools-Konsole an, wenn Sie so vorgehen:

1. Klicken Sie in Chrome rechts neben der Adressleiste auf das Symbol für Erweiterungen.
2. Suchen Sie im Drop-down-Menü nach der Web Vitals-Erweiterung.
3. Klicken Sie rechts auf das Symbol, um die Einstellungen der Erweiterung zu öffnen.
4. Klicke auf Optionen.
5. Klicken Sie im daraufhin angezeigten Bildschirm das Kästchen Console-Protokollierung an und klicken Sie dann auf Speichern.

Nachdem Sie diese Schritte ausgeführt haben, öffnen Sie die Konsole in den Chrome-Entwicklertools und beginnen Sie mit dem Testen verdächtiger Interaktionen auf einer Seite. Während der Interaktion werden Diagnosedaten in der Konsole angezeigt:

Die Web Vitals-Erweiterung hilft Ihnen dabei, langsame Interaktionen zu erkennen und bietet einige Details zum Debuggen von INP. Möglicherweise müssen Sie jedoch langsame Interaktionen mit dem Leistungsprofiler diagnostizieren, da er detaillierte Daten liefert, die Sie für die Navigation durch den Produktionscode Ihrer Website benötigen, um die Ursachen langsamer Interaktionen zu ermitteln.

So erkennen Sie, welcher Teil einer Interaktion langsam ist

Interaktionen bestehen aus drei Teilen: Eingabeverzögerung, Verarbeitungsdauer und Präsentationsverzögerung. Wie Sie eine Interaktion optimieren, um den INP-Wert einer Seite zu senken, hängt davon ab, welcher Teil der Interaktion am längsten dauert.

Lange Eingabeverzögerungen erkennen

Eingabeverzögerungen können zu einer hohen Interaktionslatenz führen. Die Eingabeverzögerung ist der erste Teil einer Interaktion. Dies ist die Zeitspanne zwischen dem ersten Empfang der Nutzeraktion durch das Betriebssystem bis zu dem Punkt, an dem der Browser mit der Verarbeitung des ersten Event-Handler-Rückrufs dieser Interaktion beginnen kann.

Eingabeverzögerungen lassen sich im Performance Profiler von Chrome identifizieren, indem Sie die Interaktion im Interaktions-Track suchen. Die Länge der linken Antenne gibt den Teil der Eingabeverzögerung der Interaktion an. Den genauen Wert finden Sie in einer Kurzinfo, wenn Sie den Mauszeiger im Leistungsprofiler auf die Interaktion bewegen.

Die Eingabeverzögerungen können nie null sein, aber Sie haben die Möglichkeit, die Länge der Eingabeverzögerung zu steuern. Das Entscheidende ist, herauszufinden, ob der Hauptthread gerade ausgeführt wird, der verhindert, dass deine Callbacks so schnell wie möglich ausgeführt werden.

In der vorherigen Abbildung wird eine Aufgabe von einem Drittanbieter-Skript ausgeführt, während der Nutzer versucht, mit der Seite zu interagieren, wodurch die Eingabeverzögerung verlängert wird. Die erweiterte Eingabeverzögerung wirkt sich auf die Latenz der Interaktion aus und kann daher auch den INP der Seite beeinflussen.

Lange Verarbeitungszeiten erkennen

Ereignis-Callbacks werden sofort nach der Eingabeverzögerung ausgeführt. Die Zeit, die sie für ihren Abschluss benötigen, wird als Verarbeitungsdauer bezeichnet. Wenn Ereignis-Callbacks zu lange ausgeführt werden, verzögern sie die Darstellung des nächsten Frames im Browser und können die Gesamtlatenz einer Interaktion erheblich erhöhen. Lange Verarbeitungszeiten können auf rechenintensives JavaScript von Erst- oder Drittanbietern zurückzuführen sein – und in einigen Fällen auf beides. Im Performance-Profiler wird dies als fester Anteil der Interaktion im Interaktions-Track dargestellt.

Um teure Ereignis-Callbacks zu finden, können Sie Folgendes in einem Trace für eine bestimmte Interaktion beobachten:

1. Feststellen, ob die mit den Ereignis-Callbacks verknüpfte Aufgabe eine lange Aufgabe ist. Damit lange Aufgaben in einer Lab-Einstellung zuverlässiger angezeigt werden, müssen Sie möglicherweise im Leistungssteuerfeld CPU-Drosselung aktivieren oder ein Android-Gerät mit niedriger bis mittlerer Stufe verbinden und Remote-Debugging verwenden.
2. Wenn es sich bei der Aufgabe, die die Ereignis-Callbacks ausführt, um eine lange Aufgabe handelt, suchen Sie im Aufrufstack nach Ereignis-Handler-Einträgen, z. B. nach Einträgen mit Namen wie Event: click, die oben rechts im Eintrag ein rotes Dreieck haben.

Sie können eine der folgenden Strategien ausprobieren, um die Verarbeitungsdauer einer Interaktion zu verkürzen:

1. So wenig Arbeit wie möglich machen Ist alles, was bei einem teuren Ereignis-Callback passiert, unbedingt notwendig? Ist dies nicht der Fall, entfernen Sie diesen Code nach Möglichkeit vollständig oder verschieben Sie die Ausführung auf einen späteren Zeitpunkt, wenn dies nicht möglich ist. Dabei stehen Ihnen auch die Framework-Funktionen zur Verfügung. Mit der Memoization-Funktion von React lassen sich z. B. unnötige Renderingaufwendungen für eine Komponente überspringen, wenn sich die Eigenschaften nicht geändert haben.
2. Nicht rendernde Arbeit im Ereignis-Callback auf einen späteren Zeitpunkt verschieben Lange Aufgaben können aufgeteilt werden, indem sie dem Hauptthread nachkommen. Immer wenn Sie dem Hauptthread nachgeben, beenden Sie die Ausführung der aktuellen Aufgabe und teilen die verbleibende Arbeit in eine separate Aufgabe auf. Dadurch hat der Renderer die Möglichkeit, Aktualisierungen der Benutzeroberfläche zu verarbeiten, die zuvor im Ereignis-Callback durchgeführt wurden. Wenn du React verwendest, kann das mit der Funktion „Übergänge“ erledigt werden.

Mit diesen Strategien können Sie Ereignis-Callbacks so optimieren, dass sie weniger Zeit in Anspruch nehmen.

So erkennen Sie Verzögerungen bei Präsentationen

Lange Eingabeverzögerungen und Verarbeitungszeiten sind nicht die einzigen Ursachen für einen schlechten INP-Wert. Manchmal können die Rendering-Aktualisierungen, die als Reaktion auf eine geringe Anzahl von Ereignis-Callback-Code erfolgen, kostspielig sein. Die Zeit, die der Browser benötigt, um visuelle Aktualisierungen auf der Benutzeroberfläche zu rendern, damit das Ergebnis einer Interaktion widergespiegelt wird, wird als Präsentationsverzögerung bezeichnet.

Rendering-Aufgaben bestehen meistens aus Aufgaben wie Neuberechnung von Stilen, Layout, Farbe und Zusammensetzung und werden im Flame-Diagramm des Profilers durch lila und grüne Blöcke dargestellt. Die gesamte Präsentationsverzögerung wird durch die rechte Antenne im Interaktions-Track angegeben.

Von den möglichen Ursachen für eine hohe Interaktionslatenz können Verzögerungen bei der Präsentation die schwierigsten sein. Übermäßiges Rendering kann folgende Ursachen haben:

• Große DOM-Größen: Der für die Aktualisierung der Darstellung einer Seite erforderliche Rendering-Aufwand nimmt häufig mit der Größe des DOM der Seite zu. Weitere Informationen finden Sie unter Auswirkungen großer DOM-Größen auf die Interaktivität und was Sie dagegen unternehmen können.
• Erzwungene Umbrüche: Dies ist der Fall, wenn Sie Stiländerungen auf Elemente in JavaScript anwenden und dann sofort die Ergebnisse dieser Arbeit abfragen. Das hat zur Folge, dass der Browser zuerst die Layoutarbeit ausführen muss, bevor er etwas anderes tun kann, damit der Browser die aktualisierten Stile zurückgeben kann. Weitere Informationen und Tipps zur Vermeidung von erzwungenen Umbrüchen finden Sie im Artikel Große, komplexe Layouts und Layout-Trashing vermeiden.
• Übermäßige oder unnötige Arbeit in requestAnimationFrame-Callbacks requestAnimationFrame()-Callbacks werden während der Rendering-Phase der Ereignisschleife ausgeführt und müssen abgeschlossen sein, bevor der nächste Frame dargestellt werden kann. Wenn du requestAnimationFrame() für Aufgaben verwendest, bei denen keine Änderungen an der Benutzeroberfläche erforderlich sind, solltest du beachten, dass der nächste Frame möglicherweise verzögert wird.
• ResizeObserver-Callbacks Solche Callbacks werden vor dem Rendern ausgeführt und können die Darstellung des nächsten Frames verzögern, wenn die darin enthaltene Arbeit teuer ist. Wie bei Ereignis-Callbacks wird jede Logik aufgeschoben, die für den nächsten Frame nicht benötigt wird.

Was passiert, wenn Sie eine langsame Interaktion nicht reproduzieren können?

Was ist, wenn Ihre Felddaten darauf schließen lassen, dass eine bestimmte Interaktion langsam ist, Sie das Problem im Lab jedoch nicht manuell reproduzieren können? Dafür kann es mehrere Gründe geben.

Zum einen hängen Ihre Umstände beim Testen der Interaktionen von Ihrer Hardware und Ihrer Netzwerkverbindung ab. Möglicherweise verwenden Sie ein schnelles Gerät mit einer schnellen Verbindung. Das bedeutet aber nicht, dass Ihre Nutzer es auch tun. Sie haben drei Möglichkeiten, wenn dies auf Sie zutrifft:

1. Wenn Sie ein physisches Android-Gerät haben, verwenden Sie Remote-Debugging, um eine Chrome-Entwicklertools-Instanz auf Ihrem Hostcomputer zu öffnen und langsame Interaktionen dort zu reproduzieren. Mobilgeräte sind oft nicht so schnell wie Laptops oder Desktop-Computer, sodass langsame Interaktionen auf diesen Geräten leichter zu beobachten sind.
2. Wenn Sie kein physisches Gerät haben, aktivieren Sie die CPU-Drosselung in den Chrome-Entwicklertools.

Eine andere Ursache könnte sein, dass Sie auf das Laden einer Seite warten, bevor Sie mit ihr interagieren, das aber nicht Ihre Nutzer tun. Wenn Sie sich in einem schnellen Netzwerk befinden, können Sie langsamere Netzwerkbedingungen simulieren, indem Sie die Netzwerkdrosselung aktivieren. Nutzen Sie dann die Interaktion mit der Seite, sobald sie übertragen wird. Sie sollten dies tun, da der Hauptthread während des Starts häufig die Auslastung hat und Tests während dieses Zeitraums möglicherweise Aufschluss darüber geben können, was Ihre Nutzer erleben.

Die Fehlerbehebung bei INP ist ein iterativer Prozess

Die Ursache der hohen Interaktionslatenz zu finden, die zu einem schlechten INP führt, erfordert viel Arbeit. Aber wenn Sie die Ursachen bestimmen können, haben Sie schon die Hälfte geschafft. Wenn du einen methodischen Ansatz zur Behebung eines schlechten INP verwendest, kannst du die Ursache eines Problems zuverlässig bestimmen und schneller die richtige Lösung finden. So überprüfen Sie:

• Felddaten nutzen, um langsame Interaktionen zu finden:
• Problematische Feldinteraktionen im Labor manuell testen, um festzustellen, ob sie reproduzierbar sind
• Finden Sie heraus, ob die Ursache auf eine lange Eingabeverzögerung, kostspielige Ereignis-Callbacks oder teure Rendering-Arbeit zurückzuführen ist.
• Wiederholen.

Die letzte ist die wichtigste. Wie bei den meisten anderen Maßnahmen zur Verbesserung der Seitenleistung ist auch die Fehlerbehebung und Verbesserung von INP ein zyklischer Prozess. Wenn Sie eine langsame Interaktion korrigiert haben, machen Sie mit der nächsten weiter und wiederholen Sie den Vorgang, bis Sie erste Ergebnisse sehen.