INP (Interaction to Next Paint) ist die Web-Performance-Metrik, mit der Google misst, wie schnell eine Seite auf Eingaben reagiert. Seit dem 12. März 2024 gehört sie zu den offiziellen Core Web Vitals und ersetzt dort die ältere Metrik First Input Delay (FID). Eine Seite gilt als reaktionsschnell, wenn ihre INP bei 75 Prozent der realen Nutzer bei 200 Millisekunden oder weniger liegt.
Was genau misst INP?
INP erfasst die Zeit vom Moment einer Interaktion (Klick, Tippen, Tastendruck) bis zum nächsten sichtbaren Paint der Seite. Anders als FID, das nur die erste Interaktion einer Sitzung betrachtete, bewertet INP alle Interaktionen und meldet den schlechtesten beziehungsweise typischen Wert der Seite. Gemessen wird dabei nicht nur der Event-Handler selbst, sondern auch die anschließende Arbeit des Browsers bis das Ergebnis sichtbar wird.
Eine Interaktion besteht aus drei Phasen: der Eingabe (Input Delay), der Verarbeitung (Processing Time) und der Darstellung (Presentation Delay). Lange Tasks blockieren den Haupt-Thread des Browsers und treiben die INP nach oben. Ein einzelner JavaScript-Listener mit 300 Millisekunden Laufzeit sorgt dafür, dass die Seite für diese Interaktion durchfällt.
INP verbessern
- Lange Tasks vermeiden oder aufteilen: große Berechnungen in kleinere Schritte zerlegen, Arbeit an den Browser abgeben (z. B.
scheduler.postTask). - Event-Handler schlank halten: unnötige Arbeit aus Klick- und Tastatur-Listenern entfernen, debounce bei wiederholten Ereignissen.
- Drittanbieter-Skripte (Analytics, Werbung, Chat-Widgets) sparsam und asynchron laden — sie blockieren den Haupt-Thread oft stärker als der eigene Code.
- Lazy Loading großer Elemente, damit spätere Interaktionen nicht durch Nachladen behindert werden.
Einordnung
INP gehört zu den drei Core Web Vitals neben LCP (Laden) und CLS (Stabilität): LCP sagt, wann die Seite sichtbar wird, INP, wann sie bedienbar ist, CLS, ob sie sich dabei ruhig verhält. Gemessen wird die Metrik über das Performance-API oder mit Tools wie Lighthouse und PageSpeed Insights. Vorbereitet wird die Seite dafür im Browser, der den Haupt-Thread und das Event-Handling bereitstellt.
Verwandte Grundlagen: LCP: Largest Contentful Paint, CLS: Cumulative Layout Shift, First Contentful Paint (FCP), PageSpeed Insights, SEO.