Ratgeber · Web-Performance 2026
Interaction to Next Paint: die neue Antwort-Metrik
Warum INP härter ist als FID, was das 98. Perzentil der Interaktionen bedeutet und wo lange Tasks im Hauptthread typischerweise herkommen.
Von Mateusz Viola
Betreiber & redaktionelle Verantwortung pagespeed-test.de
Veröffentlicht
Aktualisiert:
Was ist INP?
Interaction to Next Paint misst die Verzögerung zwischen einer User-Eingabe (Klick, Tastendruck, Touch) und der nächsten visuellen Rückmeldung auf dem Bildschirm. INP ersetzt seit März 2024 die alte Metrik First Input Delay (FID).
Warum INP härter ist als FID
FID hat nur die erste Interaktion gemessen, und auch nur die Verzögerung bis zum Start der Verarbeitung - nicht bis zum sichtbaren Ergebnis. INP hingegen:
- misst alle Interaktionen während der Session
- misst die komplette Zeit von Input bis zum nächsten Paint (also inklusive Verarbeitung UND Rendering)
- reportet das 98. Perzentil - der schlechteste Wert bestimmt die Note
Konsequenz: Seiten die mit FID Bestnoten hatten, fallen oft in die "Needs Improvement" oder "Poor"-Kategorie bei INP. Vor allem komplexe SPAs sind betroffen.
Schwellwerte
| Bewertung | INP |
|---|---|
| Good | ≤ 200 ms |
| Needs Improvement | 200 - 500 ms |
| Poor | > 500 ms |
Wo INP-Probleme typischerweise herkommen
INP wird fast immer durch lange Tasks im Hauptthread verursacht. Häufige Schuldige:
- Schwere React-Komponenten die bei jedem State-Change re-rendern (kein useMemo/useCallback)
- Third-Party-Scripts die synchron im Klick-Handler laufen (z.B. GA-Events ohne sendBeacon)
- Riesige Listen ohne Virtualisierung - Re-render bei Filter blockiert 500+ ms
- Synchron geladene Module beim ersten Klick (Code-Splitting fehlt)
Konkrete INP-Fixes
Die drei wichtigsten Hebel in praktischer Reihenfolge:
- requestIdleCallback / scheduler.yield() für nicht-kritische Arbeit nach dem Klick. Zuerst Visual-Feedback geben, dann den Rest in Idle-Frames erledigen.
- Debouncing schwerer Filter-Operationen - nicht bei jedem Tastendruck filtern, sondern mit ~200 ms Debounce.
- Web Workers für CPU-intensive Aufgaben (Bild-Verarbeitung, große Berechnungen) - damit der Hauptthread frei bleibt.
INP messen
Im DevTools Performance Panel zeigt die Interactions-Spur jede gemessene Interaktion mit ihrem INP-Wert. Im Field die web-vitals-Library:
import { onINP } from 'web-vitals';
onINP((metric) => console.log(metric.value));Lass diese Daten ein paar Tage über ein eigenes Analytics-Tool laufen - CrUX zeigt erst nach 28 Tagen aussagekräftige Werte.