INP-Probleme erklärt: Ursachen langsamer Interaktionen und wie man sie behebt
Interaction to Next Paint (INP) ist ein Core Web Vital, das misst, wie schnell eine Seite auf Klicks, Tipps und Tastendrücke reagiert. Ein INP über 200 ms wirkt träge; über 500 ms wirkt er kaputt.
Fast jeder schlechte INP-Wert lässt sich auf eine von wenigen Grundursachen zurückführen. Jeder Leitfaden unten erklärt eine Ursache: wie man sie erkennt, warum sie auftritt und wie man sie behebt — mit Code.
Grundursachen
Ein langlaufender Event-Handler blockiert den Main Thread und verzögert den nächsten Paint. Wie man schwere Handler findet und mit scheduler.yield() oder Web Workers aufteilt.
Layout-Thrashing: wiederholte Reflows in einem Frame und wie du sie stoppstAbwechselnde DOM-Lese- und Schreibzugriffe zwingen den Browser, das Layout in einem einzigen Frame immer wieder neu zu berechnen. Wie man Lese- und Schreibzugriffe bündelt, um INP zu beheben.
Erzwungenes synchrones Layout: Geometrie nach dem Schreiben ins DOM lesenoffsetWidth oder getBoundingClientRect direkt nach einer DOM-Änderung zu lesen zwingt den Browser, das Layout in deiner JS-Aufgabe neu zu berechnen. Wie man es erkennt und behebt.
Main Thread blockiert: hoher Input Delay, bevor dein Handler überhaupt läuftWenn der Main Thread mit einer anderen langen Aufgabe beschäftigt ist, warten Klicks in einer Warteschlange, bevor dein Handler startet. Wie man die blockierende Aufgabe findet und aufteilt, um den INP-Input-Delay zu beheben.
Drittanbieter-Skripte blockieren Interaktionen: diagnostizieren und eindämmenAnalytics, Werbung und Chat-Widgets führen lange Aufgaben auf deinem Main Thread aus und ruinieren den INP. Wie man lange Aufgaben Dritten zuordnet und sie mit async, defer oder einem Worker eindämmt.
React-Re-Render-Kaskade: wenn ein Klick den ganzen Baum neu rendertEin State-Update hoch im React-Baum rendert bei jedem Klick Hunderte Komponenten neu. Wie man Render-Kaskaden findet und mit memo, useCallback und useTransition behebt.