Interaction to Next Paint (INP) ist eine der drei Core Web Vitals von Google und misst die Reaktionsfähigkeit einer Webseite über die gesamte Sitzung hinweg. Anders als der Vorgänger First Input Delay (FID), der nur die erste Nutzer-Interaktion betrachtete, schaut INP auf alle Interaktionen – Clicks, Taps, Tastatureingaben – und nimmt die langsamste (mit kleiner Toleranz) als Messwert. INP ist seit März 2024 das offizielle Responsiveness-Signal innerhalb der Core Web Vitals und damit ein direkter Ranking-Faktor.
Was misst INP genau?
INP misst die Zeit von einer Nutzer-Interaktion bis zum nächsten Paint – also bis der Browser eine sichtbare Reaktion (Hover-State, Button-Animation, neu gerenderter Inhalt) auf den Bildschirm bringt. Erfasst werden drei Phasen:
- Input Delay – Wartezeit, bis der Browser auf den Event-Listener kommt (Main-Thread blockiert)
- Processing Time – Laufzeit des JavaScript-Event-Handlers
- Presentation Delay – Zeit für Layout, Paint und Compositing
Aus allen Interaktionen einer Sitzung wird die langsamste typische genommen (technisch: 98. Perzentil bei vielen Interaktionen, langsamster Wert bei wenigen).
Schwellenwerte
| Wert | Bewertung |
|---|---|
| ≤ 200 ms | gut (grün) |
| 200 – 500 ms | verbesserungswürdig (orange) |
| > 500 ms | schlecht (rot) |
Auch INP wird am 75. Perzentil des realen Nutzer-Traffics ausgewiesen.
Typische Ursachen für schlechtes INP
- Long Tasks auf dem Main-Thread – Funktionen, die länger als 50 ms laufen, blockieren weitere Interaktionen
- Schwere JavaScript-Event-Handler – komplexe State-Updates, DOM-Reflows, große JSON-Parsing-Aufrufe
- Schlechtes Framework-Setup – unnötige Re-Renders in React/Vue, fehlende Virtualisierung großer Listen
- Third-Party-Scripts – Werbe-Tags, Tracker und A/B-Test-Tools, die nach jedem Klick eigene Code-Pfade ausführen
- Layout-Thrashing – DOM-Reads und -Writes wechseln sich ab und zwingen den Browser zu Sync-Layouts
- Synchrone Storage-Zugriffe –
localStorage-Writes blockieren den Main-Thread
Wie wird INP optimiert?
- Long Tasks aufbrechen –
await scheduler.yield()odersetTimeout(..., 0)zwischen Aufgaben, damit der Browser dazwischen rendern kann - Event-Handler verschlanken – nur das Nötigste im Handler erledigen, alles andere in einen
requestIdleCallbackoder Web Worker auslagern - Debouncing / Throttling für teure Operationen (z. B. Such-Vorschläge bei jeder Tastatureingabe)
- DOM-Updates batchen – z. B. mit
requestAnimationFramesynchronisieren - Third-Party-Scripts auditieren – jede Tracking-Bibliothek frisst Interaktivität
- Modernes Framework-Tooling – React 18+ Concurrent Mode, Vue 3 Suspense, virtualisierte Listen
- CSS-only-Lösungen statt JS, wo möglich (
:hover,:focus-visible,details-Elemente)
INP vs. FID
INP hat First Input Delay (FID) im März 2024 als Core Web Vital abgelöst. FID hatte zwei Schwächen: Es betrachtete nur die erste Interaktion und maß nur den Input Delay, nicht die Gesamt-Latenz. INP ist deutlich aussagekräftiger – aber auch deutlich schwerer zu erreichen, weil jeder Klick auf eine Seite mitgemessen wird.
Tools für die Messung
- Google PageSpeed Insights – Field-Daten + Lab-Hinweise
- Lighthouse zeigt INP-Approximationen im Performance-Audit
- Chrome DevTools / Performance Panel – jede Interaktion lässt sich aufzeichnen und analysieren
- Google Search Console – INP-Verlauf nach echten Nutzern
- web-vitals JS-Library für eigenes Real-User-Monitoring
Häufige Fragen zu INP
Warum ist INP plötzlich schlechter als FID? Weil INP mehr misst. FID hat oft 0–50 ms angezeigt, weil das erste Input Delay extrem klein war. INP betrachtet die gesamte Sitzung und alle Phasen einer Interaktion – Werte um 300–500 ms sind plötzlich häufig.
Was hilft am schnellsten gegen schlechtes INP? Erste Maßnahme: Long Tasks identifizieren (Performance-Panel der DevTools). Häufig stecken Third-Party-Scripts oder eigene Event-Handler dahinter, die sich gezielt entlasten lassen.
Gilt INP auch für die initiale Ladephase? Nein, INP misst nur Interaktionen nach dem Laden. Für die Ladephase ist LCP das passende Signal.
Fazit
INP ist die anspruchsvollste der drei Core Web Vitals – und gleichzeitig die, bei der sich Optimierung am direktesten im Nutzungserlebnis bemerkbar macht: Jede schnellere Reaktion fühlt sich „weniger ruckelig“ an. Wir analysieren INP gerne im Rahmen eines technischen SEO-Audits und entlasten den Main-Thread gezielt – melde dich für ein unverbindliches Beratungsgespräch.