Finden und beheben Sie Interaction to Next Paint (INP) Probleme

Finden und beheben Sie Interaction to Next Paint (INP) Probleme

In unserem vorherigen Artikel haben wir über den Interaction to Next Paint gesprochen. Wenn Sie sich über die Grundlagen informieren möchten, ist dies ein großartiger Ort, um anzufangen!

In diesem Artikel werde ich mich darauf konzentrieren, die verschiedenen Interaction To Next Paint-Probleme zu identifizieren und dann erklären, wie man sie behebt!

INP TIPP: Meistens wird der INP viel schlechter sein, wenn ein Benutzer während der Startphase des Seitenladens mit der Seite interagiert. Deshalb ist es beim Debuggen des INP sinnvoll, sowohl alle Interaktionen als auch den Ladezustand der Seite zu protokollieren!

Schritt 1: Überprüfen Sie den INP in der Search Console

"Der erste Schritt zur Besserung ist zuzugeben, dass man ein Problem hat". Also, bevor wir etwas tun, um den Interaction to Next Paint zu beheben, lassen Sie uns sicherstellen, dass wir wirklich ein Problem mit dem Interaction to Next Paint haben.

Melden Sie sich bei Ihrer Google Search Console an. Klicken Sie im linken Menü auf Core Web Vitals und wählen Sie entweder Mobil oder Desktop (Tipp: Meistens sind INP-Probleme auf Mobilgeräten, also beginnen Sie mit Mobil)

Hier sehen Sie einen Überblick über alle Core Web Vitals-bezogenen Probleme, die sich derzeit auf Ihrer Website befinden. Wenn eines dieser Probleme INP-bezogen ist, haben wir bestätigt, dass ein Problem vorliegt!

Schritt 2: Identifizieren Sie Interaction to Next Paint Probleme

Die Google Search Console gibt Ihnen außer URL-Gruppen keine Informationen, um herauszufinden, was die Probleme mit dem Interaction to Next Paint verursacht. Also sehe ich meistens Entwickler einfach blindlings hineingehen. Sie beginnen damit, ungenutztes JavaScript zu entfernen (immer eine gute Idee) und den Main Thread aufzuteilen (auch eine gute Idee), aber das behebt den INP fast nie vollständig.

Deshalb müssen wir bei der Verbesserung des INP genau wissen, was vor sich geht.

Welche Elemente verursachen bei Interaktion einen schlechten INP-Score. Normalerweise wird ein schlechter INP-Score nicht durch ein einzelnes Element verursacht, sondern durch eine Kombination von Problemen. Wir müssen sie nacheinander angehen, beginnend mit den schlimmsten und uns nach oben arbeiten.
Wann passieren diese Interaktionen? Passieren sie während der Startphase des Seitenladens oder passieren sie sogar, wenn die Hauptseite
Wo passieren diese Interaktionen? Passieren sie auf jeder Seite oder passieren sie nur auf wenigen ausgewählten Seiten.
Wie können wir diese Interaktionen replizieren? Sie haben vielleicht inzwischen herausgefunden, dass es schwer ist, INP-Probleme zu replizieren. Deshalb müssen wir uns auf den Erfolg vorbereiten, indem wir Geräteeigenschaften mit einem schlechten INP-Score nachahmen.

Richten Sie RUM-Tracking ein

Um all diese Fragen zu beantworten, müssen wir anfangen, echte Benutzer zu verfolgen und alle Probleme zu protokollieren, die beim Interaction to Next Paint auftreten könnten. Es gibt mehrere Möglichkeiten, RUM-Tracking zu aktivieren. Die erste ist die Nutzung der Web Vitals-Bibliothek und das Senden der Ergebnisse an Ihr eigenes Analytics-Backend. Der Vorteil dieser Methode ist, dass sie günstig und flexibel ist. Der Nachteil ist, dass es viel zusätzliche Arbeit sein kann.

Eine gute Alternative zum Senden Ihrer Core Web Vitals-Daten an Ihr eigenes Backend ist die Verwendung eines der vielen RUM-Tools da draußen. Wir haben Core/Dash genau für diese Anwendungsfälle entwickelt. Core/Dash ist ein kostengünstiges, schnelles und effektives RUM-Tool, das einfach den Job erledigt! Natürlich gibt es viele RUM- Lösungen da draußen und sie werden auch den Job erledigen (jedoch zu einem höheren Preis)

Finden Sie langsame Interaktionen pro Element, die einen hohen INP verursachen

Das erste, was getan werden muss, ist, die 'langsamsten' Interaktionen zu finden, die die schlechtesten Time to First Byte-Scores verursachen. Listen Sie Ihre Seiten einfach nach 'INP metric by Elements' in CoreDash auf und Sie erhalten Ihre langsamsten Interaktionen. Klicken Sie auf die erste Zeile, um Ihre Metriken nach diesen Interaktionen zu filtern.

Finden Sie heraus, wann schlechte INP-Interaktionen auftreten

Sortieren Sie als nächstes die gefilterten URLs nach Ladezustand. Dies gibt Ihnen mehr Einblick in die Ursache des INP. In diesem Fall tritt der hohe INP auf, wenn der DOM-Inhalt geladen wurde. Dies bedeutet, dass Skripte geparst wurden, aber asynchrone Skripte und die Subressourcen der Seite noch nicht geladen wurden. In diesem Fall wird der INP durch frühe Klicks verursacht, wenn das Laden der Seite noch nicht ganz abgeschlossen ist!

Fahren Sie fort, indem Sie auf den Ladezustand mit der höchsten Auswirkung klicken, um einen weiteren Filter zu erstellen!

Finden Sie URLs, die für hohe INP-Scores verantwortlich sind

Schließlich, wenn wir nach den Elementen mit der langsamsten Interaktion und dem korrekten Ladezustand gefiltert haben, werden wir einen Blick auf die URLs werfen, bei denen der INP am schlechtesten ist. In diesem Fall passiert dies eindeutig auf einer bestimmten Reihe von Seiten.

Finden Sie Geräteeigenschaften

Schließlich, wenn wir langsame Interaktionen, Ladezustand und URLs identifiziert haben, die einen hohen Interaction to Next Paint verursachen, werden wir uns ansehen, welche Arten von Besuchern die schlechtesten INP-Scores verursachen. Wir würden uns den Gerätespeicher, die Bandbreite, die Bildschirmgröße usw. ansehen. Sobald wir diese Eigenschaften identifiziert haben, können wir dazu übergehen, das Problem zu replizieren und zu protokollieren!

Schritt 3: Replizieren und debuggen Sie Interaktionen, die einen hohen INP-Score verursachen

Sobald wir alle Informationen haben, die wir benötigen, können wir tief in die zugrunde liegenden Probleme des Interaction to Next Paint eintauchen.

Bereiten Sie sich auf den Erfolg vor: Replizieren Sie die INP-fehlerhaften Umstände

Das nächste, was wir tun sollten, ist zu versuchen, den fehlerhaften INP wiederherzustellen. Wir tun dies, indem wir die Umstände nachahmen, unter denen der INP möglicherweise fehlschlägt.

Verwenden Sie das Chrome Performance Panel: Öffnen Sie die Chrome Developer Tools (Strg-Shift-i) und wählen Sie das Performance Panel. In der oberen Leiste können Sie den CPU Throttle auswählen (drosseln Sie ihn auf 4x Verlangsamung, um ein normales mobiles Gerät zu emulieren), den Network Throttle (wählen Sie das Fast 3G-Preset, um Ihr durchschnittliches mobiles Gerät nachzuahmen) und setzen Sie die Hardware Concurrency auf 4 oder 8, um Ihr durchschnittliches Mobilgerät nachzuahmen.

Um Chrome mit weniger verfügbarem Speicher zu laden (obwohl das Senken der Netzwerk- und CPU-Einstellung oft den Job erledigt!), starten Sie Chrome in einem Docker-Container und weisen Sie weniger Speicher zu.

Laden Sie die Seite neu, interagieren Sie und überprüfen Sie den INP mit dem Core Web Vitals Visualizer

Der nächste Schritt, um die Ursache der schlechten INP-Scores zu finden, besteht darin, die Bedingungen zu simulieren und zu bestätigen, dass die INP-Scores tatsächlich so schlecht sind wie gemeldet.

Seite neu laden und klicken Sie auf das richtige Element zur richtigen Zeit

Debuggen Sie den INP mit einem Performance-Trace

Das ist der Moment, auf den Sie sich in den vorherigen Schritten vorbereitet haben. Es ist Zeit herauszufinden, warum eine bestimmte Interaktion den schlechten Interaction To Next Paint-Score verursacht.

Öffnen Sie erneut die Chrome Developer Console (Strg-Shift-i), navigieren Sie zum Performance-Panel und klicken Sie dieses Mal auf das kreisförmige Pfeilsymbol, um die Seite neu zu laden und mit der Aufnahme zu beginnen (oder verwenden Sie die Tastenkombination Strg-Shift-E).

Öffnen Sie erneut die Chrome Developer Console (Strg-Shift-i), navigieren Sie zum Performance-Panel und klicken Sie dieses Mal auf das kreisförmige Pfeilsymbol, um die Seite neu zu laden und mit der Aufnahme zu beginnen (oder verwenden Sie die Tastenkombination Strg-Shift-E).

Schritt 3: Beheben Sie INP-Probleme

Wir sind jetzt an einem Punkt, an dem wir wissen, welche Interaktion unseren schlechten INP verursacht, und wir haben analysiert, was genau während dieser langsamen Interaktion vor sich geht. Das bedeutet, dass es Zeit ist, den Interaction to Next Paint zu beheben. Der Interaction to Next Paint kann in 3 Phasen unterteilt werden: 'Input Delay', 'Processing Time' und 'Presentation Delay'.

Jede Phase des Interaction to Next Paint sollte anders behandelt werden!

Minimieren Sie Input Delay:

Input Delay ist die Zeit zwischen der Interaktion mit der Seite bis zum Beginn der Ausführung des Event-Callbacks. Obwohl es immer eine gewisse Input Delay gibt (selbst Browser brauchen Zeit, um die Callbacks zu planen), gibt es einige Dinge zu beachten:

1. Vermeiden Sie lange Aufgaben (Long Tasks). Wann immer eine Aufgabe ausgeführt wird, blockiert sie den Main Thread und lässt die Event-Callbacks warten. Dies ist besonders wichtig bei der Optimierung früher Klicks (da die meisten Skripte zu diesem Zeitpunkt ausgeführt werden). 
2. Seien Sie vorsichtig beim Erstellen neuer Aufgaben. Zum Beispiel wiederkehrende Aufgaben über setTimeout() oder Aufgaben, die wahrscheinlich vor dem INP-Ereignis auftreten, wie Callbacks beim mouseover-Ereignis.
3. Messen und bewerten Sie frühe Interaktion. Wenn ein interaktives Element früh präsentiert wird (zum Beispiel ein Website-Such-Element) und von JavaScript gesteuert wird, das später geladen wird, löst jede Interaktion mit dem Element keine sofortige Layout-Aktualisierung aus. Priorisieren Sie entweder die Funktionalität oder verbergen / deaktivieren Sie das Element, bevor es ordnungsgemäß funktioniert.
4. Verwenden Sie Web Workers, um JavaScript außerhalb des Main Threads des Browsers auszuführen. Web Workers ermöglichen es, Skripte außerhalb des Main Threads auszuführen. Dies verhindert, dass der Main Thread blockiert und INP Input Delay-Probleme verursacht
   
5. Laden Sie Nice-to-have-Skripte von Drittanbietern während der Browser-Leerlaufzeit.  Einige Skripte sind kritischer als andere. Es ist sinnvoll, diese Skripte zu priorisieren und weniger wichtige Skripte während der Browser-Leerlaufzeit zu laden. Zum Beispiel ein Chat-Skript

Minimieren Sie Processing Time

1. Entfernen Sie unnötigen Code. Unnötiger Code ist entweder älterer Code, der noch ausgeführt wird, oder neuer Code, der auf dieser spezifischen Seite nicht benötigt wird, aber dennoch CPU-Zeit in Anspruch nimmt. Dies ist bei weitem der einfachste Weg, den INP sofort zu verbessern.
2. Verzögern (Defer) Sie Code, der nicht vor dem nächsten Paint ausgeführt werden muss. Teilen Sie Code in kritischen Code auf, der vor dem INP ausgeführt werden muss, und nicht kritischen Code (zum Beispiel das Senden von Analysen) und planen Sie diesen nach dem INP-Ereignis mit der requestIdleCallback()-Methode. 
3. Optimieren Sie Code, der vor dem Paint ausgeführt werden muss. Überprüfen Sie Ihren Code und schreiben Sie langsame oder ineffektive Teile neu.
4. Geben Sie sofortiges Feedback. Geben Sie bei komplizierten oder möglicherweise langsamen Aufgaben sofortiges Feedback, bevor der Hauptcode ausgeführt wird.

Minimieren Sie Presentation Delay

1.  Halten Sie das DOM klein und einfach. Im Grunde wird es für einen Browser viel einfacher sein, eine Seite mit wenigen und einfachen, nicht verschachtelten DOM-Elementen (HTML-Knoten) zu rendern, als eine Seite mit vielen verschachtelten DOM-Knoten zu rendern.
   
2. Verwenden Sie content-visibility, um Off-Screen-Inhalte lazy zu rendern.  Content-visibility beschleunigt das Rendern sichtbarer Teile der Seite, indem das Rendern von Off-Screen-Inhalten verzögert wird, indem diese Off-Screen-Inhalte Just-in-Time gerendert werden.