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

Veröffentlicht: 9. Mai 2023

Eine der Herausforderungen bei der Optimierung des Messwerts „Interaction to Next Paint“ (INP) besteht darin, herauszufinden, was zu einer schlechten INP führt. Es gibt viele mögliche Ursachen, z. B. Drittanbieterscripts, die viele Aufgaben im Hauptthread planen, große DOM-Größen, teure Ereignis-Callbacks und andere Faktoren.

Die Verbesserung der INP kann schwierig sein. Zuerst müssen Sie wissen, welche Interaktionen in der Regel für die 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 Felddaten haben, können Sie diese Interaktionen manuell in Lab-Tools testen, um herauszufinden, warum sie langsam sind.

Was ist, wenn ich keine Felddaten habe?

Felddaten sind unerlässlich, da Sie so viel Zeit sparen, wenn Sie herausfinden möchten, welche Interaktionen optimiert werden müssen. Möglicherweise haben Sie aber keine Felddaten. Auch in diesem Fall ist es möglich, Interaktionen zu finden, die verbessert werden können. Das erfordert jedoch etwas mehr Aufwand und einen anderen Ansatz.

Die Gesamte Blockierzeit ist ein Lab-Messwert, mit dem die Reaktionsfähigkeit der Seite während des Ladevorgangs bewertet wird. Sie korreliert gut mit dem INP. Ein hoher TBT kann ein Hinweis darauf sein, dass Ihre Seite beim Laden nicht sehr reaktionsschnell auf Nutzerinteraktionen reagiert.

Sie können Lighthouse verwenden, um den TBT Ihrer Seite zu ermitteln. Wenn der TBT einer Seite hoch ist, ist der Hauptthread beim Seitenaufbau möglicherweise zu beschäftigt. Dies kann sich auf die Reaktionsfähigkeit einer Seite in dieser wichtigen Phase des Seitenlebenszyklus auswirken.

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, sind die Aktionen, die Nutzer ausführen, wenn sie Artikel in einen Online-Einkaufswagen legen und zur Kasse gehen, ein gängiger Nutzerfluss.

Unabhängig davon, ob Sie Felddaten haben oder nicht, besteht der nächste Schritt darin, langsame Interaktionen manuell zu testen und zu reproduzieren. Denn nur wenn Sie eine langsame Interaktion reproduzieren können, können Sie sie beheben.

Langsame Interaktionen im Lab reproduzieren

Es gibt verschiedene Möglichkeiten, langsame Interaktionen im Lab durch manuelle Tests zu reproduzieren. Im Folgenden finden Sie ein Framework, das Sie ausprobieren können.

Live-Messwerte im DevTools-Bereich „Leistung“

Der DevTools-Leistungsprofiler wird empfohlen, um bekanntermaßen langsame Interaktionen zu diagnostizieren. Es kann jedoch einige Zeit dauern, langsame Interaktionen zu identifizieren, wenn Sie nicht wissen, welche Interaktionen problematisch sind.

Wenn Sie den Bereich „Leistung“ zum ersten Mal öffnen, sehen Sie jedoch eine Live-Messwertansicht. So können Sie schnell eine Reihe von Interaktionen ausprobieren, um die problematischen zu finden, bevor Sie zum detaillierteren Leistungsprofil wechseln. Während Sie interagieren, werden im Interaktionsprotokoll Diagnosedaten angezeigt, wobei die INP-Interaktion hervorgehoben ist. Diese Interaktionen können maximiert werden, um die Phasenaufschlüsselung aufzurufen:

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.

Trace aufzeichnen

Der Chrome-Leistungsprofiler ist das empfohlene Tool zur Diagnose und Behebung von langsamen Interaktionen. So erstellen Sie ein Interaktionsprofil im Leistungsprofil von Chrome:

1. Öffnen Sie die Seite, die Sie testen möchten.
2. Öffnen Sie die Chrome-Entwicklertools und gehen Sie zum Bereich Leistung.
3. Klicken Sie links oben im Steuerfeld auf die Schaltfläche Aufzeichnen, um mit dem Zeichnen zu beginnen.
4. Führen Sie die Interaktionen aus, für die Sie Fehler beheben möchten.
5. Klicken Sie noch einmal auf die Schaltfläche Aufzeichnen, um das Zeichnen zu beenden.

Wenn der Profiler Daten enthält, sollten Sie zuerst die Aktivitätsübersicht oben im Profiler prüfen. 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 sich schnell auf Problembereiche konzentrieren, indem Sie in der Aktivitätsübersicht einen Bereich ziehen und auswählen. Optional können Sie die Spurfunktion im Profiler verwenden, um den Zeitverlauf einzugrenzen und nicht relevante Aktivitäten zu ignorieren.

Nachdem Sie den Bereich eingegrenzt haben, in dem die Interaktion stattgefunden hat, können Sie mit dem Interaktionen-Track die Interaktion und die Aktivität im Haupt-Thread-Track darunter abgleichen:

Wenn Sie den Mauszeiger im Interaktions-Track auf die Interaktion bewegen, erhalten Sie weitere Informationen dazu, welcher Teil der Interaktion am längsten gedauert hat:

Der gestreifte Bereich der Interaktion gibt an, wie lange die Interaktion 200 Millisekunden überschritten hat. Das ist die Obergrenze des Grenzwerts „gut“ für den INP einer Seite. Die aufgeführten Teile der Interaktion sind:

1. Die Eingabeverzögerung, dargestellt durch den linken Ausschlag.
2. Die Verarbeitungsdauer, dargestellt durch den soliden Block zwischen den linken und rechten Whiskern.
3. Die Präsentationsverzögerung, dargestellt durch den rechten Ausschlag.

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.

So erkennen Sie, welcher Teil einer Interaktion langsam ist

Interaktionen bestehen aus drei Teilen: der Eingabeverzögerung, der Verarbeitungsdauer und der 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 Input-Latenz ist der erste Teil einer Interaktion. Das ist der Zeitraum zwischen dem Empfang der Nutzeraktion durch das Betriebssystem und dem Zeitpunkt, zu dem der Browser mit der Verarbeitung des ersten Ereignis-Handler-Callbacks dieser Interaktion beginnen kann.

Sie können Eingabeverzögerungen im Leistungsprofil von Chrome ermitteln, 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.

Eingabeverzögerungen können nie null sein, aber Sie haben eine gewisse Kontrolle darüber, wie lang die Eingabeverzögerung ist. Das Wichtigste ist, herauszufinden, ob im Hauptthread Aufgaben ausgeführt werden, die verhindern, dass Ihre Callbacks so schnell wie möglich ausgeführt werden.

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

Lange Verarbeitungsdauern erkennen

Ereignis-Callbacks werden sofort nach der Eingabeverzögerung ausgeführt. Die Zeit, die für die Ausführung benötigt wird, wird als Verarbeitungsdauer bezeichnet. Wenn Ereignis-Callbacks zu lange laufen, 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 Leistungs-Profiler wird dies durch den durchgezogenen Teil der Interaktion im Interaktions-Track dargestellt.

Sie können in einem Trace für eine bestimmte Interaktion nach den folgenden Kriterien suchen, um aufwendige Ereignis-Callbacks zu finden:

1. Prüfen Sie, ob die Aufgabe, die mit den Ereignis-Callbacks verknüpft ist, eine langwierige Aufgabe ist. Wenn Sie lange Aufgaben in einer Lab-Umgebung zuverlässiger erkennen möchten, müssen Sie möglicherweise die CPU-Drosselung im Bereich „Leistung“ aktivieren oder ein Android-Gerät der unteren bis mittleren Preisklasse verbinden und das Remote-Debugging verwenden.
2. Wenn die Aufgabe, die die Ereignis-Callbacks ausführt, lang ist, suchen Sie im Aufrufstapel nach Ereignis-Handler-Einträgen, z. B. nach Einträgen mit Namen wie Ereignis: Klick, die rechts oben 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 in einem teuren Ereignisrückruf passiert, unbedingt erforderlich? Andernfalls sollten Sie diesen Code nach Möglichkeit vollständig entfernen oder die Ausführung auf einen späteren Zeitpunkt verschieben, falls dies nicht möglich ist. Sie können dabei auch die Framework-Funktionen nutzen. Mit der Erinnerungsfunktion von React können unnötige Renderingaufwendungen für eine Komponente übersprungen werden, wenn sich die Eigenschaften nicht geändert haben.
2. Verschieben Sie nicht Rendering-bezogene Aufgaben im Ereignis-Callback auf einen späteren Zeitpunkt. Lange Aufgaben können durch Übergabe an den Hauptthread aufgeteilt werden. Immer wenn Sie dem Hauptthread nachgeben, beenden Sie die Ausführung der aktuellen Aufgabe und teilen den Rest der Arbeit in eine separate Aufgabe auf. So hat der Renderer die Möglichkeit, Updates an der Benutzeroberfläche zu verarbeiten, die zuvor im Ereignis-Callback ausgeführt wurden. Wenn Sie React verwenden, können Sie die Übergangsfunktion dafür nutzen.

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 eine schlechte INP. Manchmal sind die Rendering-Aktualisierungen, die als Reaktion auf selbst kleine Mengen von Ereignis-Callback-Code erfolgen, sehr aufwendig. 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-Arbeiten umfassen in der Regel Aufgaben wie Stilneuberechnung, Layout, Paint und Composite. Sie werden im Flammendiagramm des Profilers durch lila und grüne Blöcke dargestellt. Die Gesamtpräsentationsverzögerung wird durch den rechten Ausschlag der Interaktion im Interaktions-Track dargestellt.

Von allen möglichen Ursachen für eine hohe Interaktionslatenz sind Präsentationsverzögerungen am schwierigsten zu beheben. Die folgenden Faktoren können zu einer übermäßigen Renderleistung führen:

• Große DOM-Größen: Die zum Aktualisieren der Darstellung einer Seite erforderliche Rendering-Arbeit nimmt oft mit der Größe des DOM der Seite zu. Weitere Informationen finden Sie im Hilfeartikel Wie sich große DOM-Größen auf die Interaktivität auswirken – und was Sie dagegen tun können.
• Erzwungene dynamische Umbrüche Dies ist der Fall, wenn Sie Stiländerungen auf Elemente in JavaScript anwenden und dann sofort die Ergebnisse dieser Arbeit abfragen. Das bedeutet, dass der Browser die Layoutarbeit ausführen muss, bevor er etwas anderes tun kann, damit er die aktualisierten Stile zurückgeben kann. Weitere Informationen und Tipps zum Vermeiden erzwungener Neuformatierungen finden Sie unter Große, komplexe Layouts und Layout-Überlastung vermeiden.
• Übermäßige oder unnötige Arbeit in requestAnimationFrame-Callbacks requestAnimationFrame() Callbacks werden während der Renderingphase des Ereignis-Loops ausgeführt und müssen abgeschlossen sein, bevor der nächste Frame präsentiert werden kann. Wenn Sie requestAnimationFrame() für Arbeiten verwenden, die keine Änderungen an der Benutzeroberfläche erfordern, kann es sein, dass der nächste Frame verzögert wird.
• ResizeObserver-Callbacks Solche Rückrufe werden vor dem Rendering ausgeführt und können die Darstellung des nächsten Frames verzögern, wenn die darin enthaltene Arbeit aufwendig ist. Wie bei Ereignis-Callbacks sollten Sie alle Logik, die für den nächsten Frame nicht erforderlich ist, verschieben.

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

Was tun Sie, wenn Ihre Felddaten darauf hinweisen, dass eine bestimmte Interaktion langsam ist, Sie das Problem aber im Lab nicht manuell reproduzieren können? Dafür kann es verschiedene Gründe geben. Ein wichtiger Grund dafür ist, dass die Umstände beim Testen der Interaktionen von der Hardware und der Netzwerkverbindung abhängen. Möglicherweise verwenden Sie ein schnelles Gerät mit einer schnellen Verbindung. Das bedeutet aber nicht, dass Ihre Nutzer das auch tun. In diesem Fall haben Sie drei Möglichkeiten:

1. Wenn Sie ein physisches Android-Gerät haben, verwenden Sie das Remote-Debugging, um eine Chrome DevTools-Instanz auf Ihrem Hostcomputer zu öffnen und dort zu versuchen, langsame Interaktionen zu reproduzieren. Mobilgeräte sind oft nicht so schnell wie Laptops oder Computer. Daher sind langsame Interaktionen auf diesen Geräten möglicherweise leichter zu erkennen.
2. Wenn Sie kein physisches Gerät haben, aktivieren Sie die CPU-Drosselungsfunktion in den Chrome DevTools.
3. Möglicherweise warten Sie, bevor eine Seite geladen wird, Ihre Nutzer jedoch nicht. Wenn Sie eine schnelle Netzwerkverbindung haben, simulieren Sie langsamere Netzwerkbedingungen, indem Sie die Netzwerkdrosselung aktivieren. Interagieren Sie dann mit der Seite, sobald sie dargestellt wird. Das sollten Sie tun, da der Hauptthread beim Starten oft am stärksten ausgelastet ist. Tests während dieser Zeit können Aufschluss darüber geben, was Ihre Nutzer erleben.

Die Fehlerbehebung bei INP ist ein iterativer Prozess

Es ist sehr aufwendig, herauszufinden, was zu einer hohen Interaktionslatenz führt, die zu einer schlechten INP beiträgt. Wenn Sie die Ursachen jedoch ermitteln können, sind Sie schon auf dem richtigen Weg. Wenn Sie bei der Fehlerbehebung bei schlechter INP einen methodischen Ansatz verfolgen, können Sie zuverlässig die Ursache des Problems ermitteln und schneller die richtige Lösung finden. So überprüfen Sie:

• Verwenden Sie Felddaten, um langsame Interaktionen zu finden.
• Testen Sie problematische Feldinteraktionen im Lab manuell, 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.