Eine Seite bestand den Lab Performance Review und fühlte sich für echte Nutzer trotzdem kaputt an. Der Hero erschien schnell, das Layout blieb stabil. Der langsame Moment kam später, als ein Filter geöffnet wurde, nachdem die Anwendung hydriert und mehrere Third-Party Scripts ihre Arbeit begonnen hatten. Der Klick wartete hinter einem belegten Main Thread.
Deshalb entlarvt INP auch polierte Builds. Das Laden kann fertig aussehen, obwohl die Kapazität für Interaktion bereits verbraucht ist.
INP misst die Wartezeit bis zur sichtbaren Reaktion
Interaction to Next Paint beobachtet Klicks, Taps und Tastatureingaben während des gesamten Besuchs. Die Metrik umfasst die Verzögerung bis zum Event Handler, dessen Ausführung und den Presentation Delay bis zum nächsten gemalten Ergebnis. Die offizielle INP Anleitung erklärt, dass der gemeldete Wert die langsamste Interaktion repräsentiert, mit einer Ausreisserbehandlung für stark interaktive Seiten.
Googles aktueller Optimierungsleitfaden stuft INP von 200 Millisekunden oder weniger am relevanten Feldperzentil als gut ein. Diese Zahl erlaubt nicht, eine im Lab reproduzierbare langsame Steuerung zu ignorieren. Eine einzelne schmerzhafte Checkout oder Navigation Interaction verdient weiterhin Reparatur.
Long Tasks erzeugen Input Delay
Der Main Thread des Browsers verarbeitet nur eine Aufgabe gleichzeitig. Wird JavaScript gerade geparst, ausgewertet oder ausgeführt, wartet die Eingabe. Grosse State Updates, synchrone Datentransformation, teure Component Trees und viele kleine direkt folgende Tasks können den Raum vor dem Event Handler belegen.
Der web.dev Leitfaden zum Optimieren von Long Tasks beschreibt Yielding, damit höher priorisierte Arbeit wie Interaktion früher laufen kann. Die praktische Lösung ist nicht, wahllos Timer zu verteilen. Arbeit wird reduziert, der Rest geteilt und an Grenzen unterbrochen, an denen ein Zwischenzustand sicher ist.
Profiliert wird die tatsächlich langsame Interaktion. Ein Long Task an anderer Stelle kann irrelevant sein.
Hydration verschiebt das Problem hinter den ersten Paint
Server Rendering kann schnell sichtbar werden, während der Client noch einen grossen Component Tree lädt, parst und hydriert. Nutzer sehen ein Control, bevor der Main Thread reagieren kann. Startet Hydration zusätzlich Effects, Datennormalisierung oder Layoutmessung, konkurriert eine frühe Eingabe mit Startup Arbeit.
Statische Regionen bleiben ausserhalb unnötiger Client Boundaries. Interaktive Islands werden bewusst hydriert. Grosse Zustände aus Browser Storage werden nicht im ersten Eingabefenster aufgebaut. Klicks werden während des Ladens getestet, nicht erst bei Network Idle.
Ein kleines Bundle hilft, doch die Form der Ausführung zählt. Komprimiertes Script kann weiterhin einen dichten Main-Thread Block erzeugen.
Third-Party Scripts teilen denselben Thread
Consent Manager, Analytics, Chat Widgets, Experimente und Werbung haben kein separates Performancebudget. Async Loading verändert den Zeitpunkt, nicht zwingend die Main-Thread Arbeit. Die Anleitung für Field Debugging empfiehlt, Target Element, Interaktionstyp und Zeitpunkt zu erfassen, damit Feldregressionen mit der umgebenden Arbeit verbunden werden können.
Jeder Third Party braucht Owner und gemessenen Zweck. Nicht notwendiger Code wird verzögert, doppelte Tags verschwinden und Vendor Updates werden erneut getestet. Ein Script, das weder profiliert noch deaktiviert werden kann, ist operatives Risiko.
Diese Woche die beissende Interaktion finden
Field Data zeigt zuerst die Elemente hinter langsamem INP. Interaktionen während des Ladens werden von späteren getrennt, mobile von Desktop. Dieselbe Aktion wird unter CPU Druck mit aktiven Production Scripts reproduziert.
Input Delay, Handler Duration und Presentation Delay werden einzeln erfasst. Kontrollläufe entfernen Third Parties, verkleinern Hydration Boundaries und teilen den bestätigten Long Task. Danach folgt eine neue Feldmessung.
Nicht ein allgemeiner Score ist der Startpunkt, sondern der Klick ohne Antwort. INP verbessert sich, wenn der Main Thread Raum für echte Absicht hat, nicht wenn die Seite lediglich fertig geladen aussieht.
