Langsame Interaktionen im Labor manuell diagnostizieren

Hier erfahren Sie, wie Sie Ihre Felddaten in das Lab importieren, um die Ursachen für langsame Interaktionen durch manuelle Tests zu reproduzieren und zu identifizieren.

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 den INP einer Seite verantwortlich sind. Wenn Sie nicht wissen, welche Interaktionen auf Ihrer Website aus der Perspektive echter Nutzer am langsamsten sind, lesen Sie den Hilfeartikel Langsame Interaktionen im Feld finden. 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 jedoch 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 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 herauszufinden, welche Interaktionen nach dem Laden der Seite langsam sind, benötigen Sie möglicherweise andere Datentypen, z. B. gängige 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-Leistungs-Profiler 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 zwar, langsame Interaktionen zu identifizieren und bietet einige Details zur Fehlerbehebung bei INP, Sie müssen jedoch möglicherweise den Leistungs-Profiler verwenden, um langsame Interaktionen zu diagnostizieren, da er die detaillierten Daten enthält, die Sie benötigen, um den Produktionscode Ihrer Website zu durchsuchen und die Ursachen für langsame Interaktionen zu finden.

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 sind oben rote Balken zu sehen, wenn in der Aufzeichnung lange Aufgaben ausgeführt wurden. So können Sie schnell auf Problembereiche 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 darunter liegenden Haupt-Thread-Track aufeinander abstimmen:

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

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, die Probleme zu ermitteln, die zu einer langsamen Interaktion führen. Das wird später in diesem Leitfaden behandelt.

Feststellen, 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 einer Seite zu senken, hängt davon ab, welcher Teil am meisten Zeit in Anspruch nimmt.

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 des linken Ausschlags gibt den Anteil der Eingabeverzögerung der Interaktion an. Der genaue Wert wird in einer Kurzinfo angezeigt, wenn Sie im Leistungsprofil den Mauszeiger 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 aus einem Drittanbieter-Script ausgeführt, während der Nutzer versucht, mit der Seite zu interagieren. Dadurch wird die Eingabeverzögerung verlängert. Die längere Eingabeverzögerung wirkt sich auf die Latenz der Interaktion aus und kann sich daher auf den INP der Seite auswirken.

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 selbst erhobenen Daten oder von Drittanbietern zurückzuführen sein – in einigen Fällen auch 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 entfernen oder die Ausführung auf einen späteren Zeitpunkt verschieben, falls dies nicht möglich ist. Sie können auch die Funktionen des Frameworks nutzen. Mit der Memorisierungsfunktion von React können beispielsweise unnötige Rendering-Arbeiten für eine Komponente übersprungen werden, wenn sich ihre Props 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 Haupt-Thread aufgeteilt werden. Wenn Sie dem Hauptthread einräumen, 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.

Verzögerungen bei der Präsentation erkennen

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 Updates der Benutzeroberfläche zu rendern, um das Ergebnis einer Interaktion widerzuspiegeln, wird als Darstellungsverzö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 Das passiert, 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 tun, wenn Sie eine langsame Interaktion nicht reproduzieren können?

Was ist, 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 ist, dass die Testumgebung von Ihrer Hardware und Netzwerkverbindung abhängt. 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, bis eine Seite geladen ist, bevor Sie mit ihr interagieren, Ihre Nutzer aber 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 erfordert viel Arbeit, 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 halbem 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 die Einstellungen:

• Verwenden Sie Felddaten, um langsame Interaktionen zu finden.
• Testen Sie problematische Feldinteraktionen manuell im Lab, um festzustellen, ob sie reproduzierbar sind.
• Ermitteln Sie, ob die Ursache auf eine lange Eingabeverzögerung, teure Ereignis-Callbacks oder teure Rendering-Arbeiten zurückzuführen ist.
• Wiederholen.

Letzteres ist am wichtigsten. Wie bei den meisten anderen Maßnahmen zur Verbesserung der Seitenleistung ist auch die Fehlerbehebung und Verbesserung der INP ein zyklischer Prozess. Wenn Sie eine langsame Interaktion behoben haben, fahren Sie mit der nächsten fort und wiederholen Sie den Vorgang, bis Sie erste Ergebnisse sehen.