Jetzt ist die Zeit sich mit Googles Core Vital INP zu befassen

Google hat kürzlich ihren Artikel zu INP aktualisiert. INP steht für “ Interaction to Next Paint “ und ist ein neuer Core Web Vital-Indikator, der gerade entwickelt wird. Er misst, wie flott deine Webseite auf Benutzerinteraktionen reagiert, indem er die Verzögerungen dieser Interaktionen während eines Besuchs beobachtet. Ziel des Spiels? Ein INP von 200ms oder weniger für ein Top-Benutzererlebnis!

Stell dir vor, du hast eine Webseite mit verschiedenen interaktiven Elementen wie Knöpfen, Formularen, Menüs und so weiter. Wenn ein Nutzer deine Seite besucht und mit diesen Elementen spielt, dauert es einen Moment, bis die Webseite auf diese Interaktion reagiert. Diese Reaktionszeit oder „Latenz“ ist genau das, was der INP-Indikator misst.

Egal, ob deine Seite wenige oder viele Interaktionen hat, ein hoher INP kann das Benutzererlebnis in den Keller fahren. Als erstes brauchst du Daten, um zu verstehen, ob der INP deiner Webseite eine Frischzellenkur braucht. Felddaten von einem Real User Monitoring (RUM) Anbieter können dir wertvolle Einblicke liefern, wie zum Beispiel den INP-Wert einer Seite und die spezifische Interaktion, die ihn verursacht.

Falls du keinen RUM-Anbieter nutzt, kann der Chrome User Experience Report (CrUX) über PageSpeed Insights die Lücken füllen. Er bietet eine Zusammenfassung von Metriken für Millionen von Websites, einschließlich INP. Aber denk dran, ein RUM-Anbieter oder deine eigene RUM-Lösung ist immer der King.

Hast du langsame Interaktionen identifiziert, geht’s ans Optimieren. Jede Interaktion besteht aus drei Phasen: der Eingabeverzögerung, der Verarbeitungszeit und der Präsentationsverzögerung. Jede Phase steuert zur Gesamtlatenz bei, also ist es essentiell, jeden Teil zu optimieren. Die Minimierung der Eingabeverzögerung ist hier besonders wichtig.

Die Optimierung von Event-Callbacks ist ein absolutes Muss. Ist deine Interaktionslogik komplex, ziehe in Erwägung, die Arbeit in Event-Callbacks in separate Aufgaben zu teilen, zum Beispiel mittels Methoden wie setTimeout. Das hilft, lange Aufgaben zu vermeiden, die den Haupt-Thread blockieren könnten.

Auch die Verbesserung der Bildaufbauzeit spielt eine große Rolle. Strukturiere deinen Code so, dass nur die Logik, die für visuelle Updates vor dem nächsten Frame benötigt wird, ausgeführt wird. Alles andere kann zu einem späteren Zeitpunkt erledigt werden. Und vermeide Layout-Wechsel, um die Darstellungsleistung zu verbessern.

Zum Schluss nicht vergessen: Die Verbesserung des INP ist ein Prozess, der step by step läuft. Optimiere stetig und mit der Zeit kannst du die Reaktionsfähigkeit deiner Seite so verbessern, dass die Nutzer happy sind. Es erfordert Einsatz, aber das Ergebnis ist ein besseres Benutzererlebnis, und das ist die investierte Zeit definitiv wert!

Tiefer in das Thema einsteigen könnt Ihr hier https://remkusdevries.com/the-time-to-focus-on-inp-is-now/