Wie optimiert man Interaktionen, um den INP-Wert zu senken?

Kurze Antwort: INP senkt man, indem man die drei Bestandteile der langsamsten Interaktion (Eingabeverzögerung, Verarbeitungszeit, Darstellungsverzögerung) einzeln optimiert; das Ziel ist, Googles veröffentlichte Schwelle von 200 Millisekunden zu unterschreiten.

Reihenfolge des Vorgehens

• Diagnose: die schlechtesten Interaktionen in Felddaten finden (web-vitals-Events an GA4 senden), dann dieselbe Interaktion mit einer Performance-Aufnahme in den Chrome DevTools im Labor nachstellen.
• Eingabeverzögerung: lange Tasks aufteilen, schwere Arbeit mit scheduler.yield oder requestIdleCallback stückeln, unnötige Third-Party-Skripte verschieben.
• Verarbeitung: Event-Listener verschlanken, teure Berechnungen in einen Web Worker auslagern, Eingaben debouncen.
• Darstellung: große DOM-Updates verkleinern, Lese- und Schreibzugriffe trennen, die Layout Thrashing auslösen, CSS Containment nutzen.

Schnelles visuelles Feedback verbessert zusätzlich die Wahrnehmung: direkt nach dem Klick den Zustandswechsel zeigen, die schwere Arbeit danach abschließen. Validiert wird immer am 75. Perzentil der Felddaten; was auf einem starken Gerät flott wirkt, kann auf einem Mittelklasse-Android das Budget reißen.