Core/Dash Dimension: Input Type (INP)

Dimension: Input Type INP (inpit)

Die Input Type (INP)-Dimension zeichnet den DOM-Eventtyp auf, der die einzelne schlechteste Interaktion während eines Seitenbesuchs eines Benutzers ausgelöst hat. Der Wert ist der rohe Eventname aus der Event Timing API des Browsers: click, keydown, pointerdown, pointerup, keypress und einige andere.

INP ist eine Worst-Case-Metrik. Sie bildet keinen Durchschnitt der Interaktionen. Sie findet die eine Interaktion, die vom Input bis zum nächsten Paint am längsten gedauert hat, und meldet diese Dauer. Die Input Type-Dimension sagt Ihnen, was der Benutzer in genau diesem Moment getan hat. Das ist der Unterschied zwischen „INP beträgt 450ms" und „INP beträgt 450ms, weil der Benutzer in Ihr Suchfeld getippt hat."

Die Event Timing API gruppiert zusammengehörige Events zu einer einzigen logischen Interaktion. Ein Tippen auf einen Touchscreen löst pointerdown, pointerup und click als eine Gruppe aus. Der einzelne längste Event-Handler innerhalb dieser Gruppe bestimmt die Interaktionslatenz. CoreDash zeichnet den Eventtyp des längsten Handlers auf, also denjenigen, der die Interaktion langsam gemacht hat.

Warum Input Type für INP wichtig ist

Jeder Input Type bildet auf einen anderen Teil Ihrer JavaScript-Codebasis ab. Wenn Sie keydown als dominierenden Input Type auf einer Seite mit schlechtem INP sehen, wissen Sie sofort, dass das Problem in Ihren Tastaturanschlag-Handlern liegt: Autocomplete, Suche-während-der-Eingabe, Formularvalidierung bei jedem Tastendruck. Wenn Sie click sehen, liegt das Problem in Ihren Button- und Link-Handlern: Navigationslogik, Statusaktualisierungen, Modal-Öffnungen, synchron ausgelöste Analytics-Aufrufe.

Ohne diese Dimension beginnt eine INP-Untersuchung mit Profiling-Sitzungen, Reproduktionsschritten und dem Raten, welche Interaktion der Benutzer am 75. Perzentil versucht hat. Mit der Input Type-Dimension springen Sie direkt zum relevanten Handler. Die Zeitersparnis ist real.

Input Type zeigt auch Plattformunterschiede auf. Eine Website mit intensiver Tastaturnavigation durch Power-User wird einen hohen Anteil an keydown-Events zeigen, die schlechte INP-Werte verursachen. Ein Produkt, das hauptsächlich auf Mobilgeräten genutzt wird, wird pointerdown als dominierend zeigen. Dieselbe Seite, derselbe INP-Wert, dieselbe Lösung auf verschiedene Handler angewendet, abhängig davon, wer Ihre Benutzer tatsächlich sind.

Die Input Types

click und pointerdown

Dies sind die häufigsten Input Types in CoreDash-Daten und machen etwa 75% der Worst-INP-Events aus. Auf dem Desktop repräsentiert click das Loslassen einer Maustaste. Auf Mobilgeräten löst ein Tippen die vollständige Kette aus: pointerdown wird zuerst ausgelöst, wenn der Finger den Bildschirm berührt, dann pointerup beim Abheben und schließlich click am Ende. CoreDash zeichnet dasjenige Event in dieser Kette auf, das den längsten Handler hatte.

Click-Handler sind der primäre Ort für schwere synchrone JavaScript-Arbeit. Ein einzelner Klick auf ein Navigationselement kann Statusmanagement-Aktualisierungen, DOM-Mutationen, Analytics-Events und ein erneutes Rendern in derselben Aufgabe auslösen. Jede Millisekunde synchroner Arbeit in einem Click-Handler ist eine Millisekunde, die zum INP addiert wird.

Die Lösung für langsame Click-Handler ist Task-Zerlegung. Verwenden Sie scheduler.yield(), um den Handler in kleinere Aufgaben aufzuteilen und den Browser dazwischen rendern zu lassen. Verschieben Sie nicht-kritische Arbeit wie Analytics-Aufrufe in ein setTimeout mit Null-Verzögerung, oder verschieben Sie sie vollständig auf requestIdleCallback. Der Browser muss nur die Arbeit abschließen, die die visuelle Antwort beeinflusst, bevor der nächste Paint erfolgt. Alles andere kann warten.

keydown

Tastatureingaben machen etwa 15% der Worst-INP-Events in CoreDash-Daten aus, erzeugen aber einige der extremsten Werte. Der Grund ist die Häufigkeit: Ein Benutzer, der in ein Suchfeld tippt, löst bei jedem einzelnen Tastendruck keydown aus. Wenn Ihr Handler 200ms benötigt, erlebt der Benutzer nach jedem eingegebenen Zeichen 200ms Verzögerung. Eine Suchanfrage mit 10 Zeichen wird zu 2 Sekunden kumulierter Blockierungszeit.

Die häufigen Verursacher sind Suche-während-der-Eingabe-Implementierungen, die synchrone API-Anfragen auslösen oder bei jedem Tastendruck aufwendiges DOM-Diffing ausführen, und Formularvalidierungen, die das gesamte Formular bei jedem Tastendruck erneut prüfen. Diese Muster funktionieren gut im kleinen Maßstab und brechen unter realen Benutzerbedingungen zusammen.

Die Standardlösungen sind Debouncing und Auslagerung. Debouncen Sie Ihren Suchhandler, sodass er erst nach einer Tipp-Pause des Benutzers auslöst, typischerweise 200 bis 300 Millisekunden. Für komplexere Verarbeitungen wie Fuzzy-Suche über einen großen lokalen Datensatz verschieben Sie die Berechnung in einen Web Worker, damit der Main Thread frei bleibt, um den nächsten Frame nach jedem Keydown-Event zu rendern.

pointerup

Pointer-Up-Events machen etwa 8% der Worst-INP-Fälle in CoreDash-Daten aus. pointerup wird am Ende einer Touch- oder Klicksequenz ausgelöst, nach pointerdown. Einige Frameworks und UI-Bibliotheken binden ihr primäres „Klick"-Verhalten an pointerup statt an click, was den Handler früher im Interaktionslebenszyklus platziert.

Wenn pointerup als dominierender Input Type auftaucht, ist die Untersuchung dieselbe wie bei Click-Handlern: Finden Sie heraus, welches JavaScript im Handler ausgeführt wird, und trennen Sie die Arbeit, die den nächsten Paint blockieren muss, von Arbeit, die aufgeschoben werden kann. Der Unterschied zu click ist normalerweise eine Entscheidung auf Framework-Ebene, nicht auf Anwendungsebene, sodass die Lösung möglicherweise eine Anpassung erfordert, wie die Komponentenbibliothek die Interaktionsbindung handhabt.

Debugging-Workflow

1. Nach Input Type in CoreDash filtern: Öffnen Sie die INP-Aufschlüsselung für eine fehlschlagende URL und prüfen Sie, welcher Input Type die schlechtesten Interaktionen dominiert. Wenn ein Typ für mehr als die Hälfte Ihrer schlechten INP-Events verantwortlich ist, beginnen Sie dort. Die Verteilung sagt Ihnen, wo Sie Ihre Profiling-Zeit investieren sollten.
2. Mit der richtigen Interaktion reproduzieren: Öffnen Sie Chrome DevTools, aktivieren Sie Performance-Profiling und führen Sie genau den in CoreDash angezeigten Interaktionstyp aus. Eine keydown-dominierte Seite sollte durch Tippen getestet werden. Eine click-dominierte Seite sollte mit Mausklicks auf die Elemente getestet werden, mit denen Ihre Benutzer interagieren. Zeichnen Sie den Trace auf und identifizieren Sie die langen Aufgaben im Main Thread, die unmittelbar nach dem Input-Event ausgelöst werden.
3. Die typspezifische Lösung anwenden und verifizieren: Fügen Sie bei keydown-Problemen Debouncing hinzu und erstellen Sie ein neues Profil. Fügen Sie bei click-Problemen scheduler.yield()-Aufrufe an logischen Unterbrechungspunkten im Handler hinzu. Deployen Sie in eine Testumgebung, verwenden Sie WebPageTest mit Interaktionsskripten oder das Chrome DevTools Performance-Panel, und bestätigen Sie, dass die Aufgabendauer sinkt, bevor Sie ausliefern.

Technische Faustregel

• keydown dominiert Ihren schlechten INP: Fügen Sie Debouncing zu allen Such- und Autocomplete-Handlern hinzu. 200ms Verzögerung ist der Standard-Ausgangspunkt. Wenn die Berechnung selbst bei dieser Verzögerung aufwendig ist, verschieben Sie sie vom Main Thread in einen Web Worker.
• click oder pointerdown dominiert: Ihre Handler erledigen zu viel synchrone Arbeit, bevor der Browser rendern kann. Prüfen Sie jeden Click-Handler auf der fehlschlagenden URL. Entfernen Sie synchrone Analytics-Aufrufe. Unterbrechen Sie mehrstufige Logik mit scheduler.yield() zwischen den Schritten.
• pointerup dominiert: Prüfen Sie, ob Ihr Framework die Interaktionslogik an pointerup statt an click bindet. Die Lösung ist normalerweise dieselbe wie bei Click-Handlern, aber der Einstiegspunkt in der Codebasis ist ein anderer.
• Gemischte Verteilung ohne klaren Gewinner: Das Problem ist nicht ein einzelner Interaktionstyp. Erstellen Sie Profile der drei langsamsten einzelnen Interaktionen über alle Typen hinweg und beheben Sie sie in der Reihenfolge ihrer Auswirkung. Optimieren Sie nicht abstrakt.

Input Type ist ein Routing-Signal. Es sagt Ihnen nicht, was langsam ist. Es sagt Ihnen, wo Sie suchen müssen. Sobald Sie wissen, ob Ihre Benutzer klicken, tippen oder antippen, wenn INP bricht, wird jeder nachfolgende Untersuchungsschritt schneller und zielgerichteter.