# Interaction to Next Paint (INP)

## INP vs. FID — der Unterschied

FID mass nur die erste Interaktion und nur die Input-Delay-Komponente. INP hingegen betrachtet alle Interaktionen und misst die gesamte Verarbeitungskette: Input Delay + Processing Time + Presentation Delay. Das macht INP aussagekräftiger für reale Nutzererfahrungen — eine Seite, die beim ersten Klick schnell reagiert, aber beim dritten stockt, wird mit FID gut bewertet, mit INP nicht.

## Was ein guter INP-Wert ist

Die Google-Schwellen: < 200 ms = gut, 200–500 ms = verbesserungswürdig, > 500 ms = schlecht. Entscheidend ist der 75. Perzentil-Wert (p75) — also der Wert, den 75 % aller Nutzer erleben. Ein einzelner Ausreißer nach oben verdirbt den Score nicht, aber konsistent schlechte Werte schon. INP wird aus CrUX-Field-Daten berechnet, nicht aus Lab-Tests.

## Ursachen für hohen INP

Die häufigsten Ursachen: lange JavaScript-Tasks (> 50 ms), die den Main-Thread blockieren; komplexe Event-Handler, die synchron DOM-Updates triggern; zu viele Layout-Trashing-Operationen; grosse Rendering-Updates nach User-Input. Single-Page-Apps mit client-seitigem Routing sind besonders anfällig, weil sie oft den kompletten DOM-Baum neu aufbauen.

## Optimierung: INP unter 200 ms

Brechen Sie lange Tasks in kleinere Chunks (z. B. mit `scheduler.postTask()` oder `setTimeout`). Vermeiden Sie Layout-Trashing — lesen und schreiben Sie DOM-Eigenschaften in getrennten Phasen. Nutzen Sie `requestAnimationFrame` für visuelle Updates. Für React-Apps: setzen Sie auf concurrent rendering (React 18+), vermeiden Sie unnötige Re-Renders via `React.memo`, und delegieren Sie Events statt sie an jedes List-Item zu binden.

## Tools zur Messung

Der Chrome User Experience Report (CrUX), der Web Vitals-Report in der Search Console, die Web-Vitals-JavaScript-Bibliothek und der mekyn DACH CWV Tracker zeigen reale INP-Daten. Lighthouse und PageSpeed Insights zeigen INP nur als Lab-Wert (TBT als Proxy) — das ist ein Hinweis, aber nicht der echte INP.

## Auf einen Blick

- Eingeführt: März 2024 als FID-Ersatz
- Google-Schwelle: INP < 200 ms (p75)
- Misst alle Interaktionen, nicht nur die erste
- Besonders kritisch für SPAs mit langen JS-Tasks

## Häufige Fragen zu Interaction to Next Paint (INP)

### Was ist INP?  
Detaillierte Antwort finden Sie in der Erklärung oben. Für eine praktische Anwendung empfehlen wir unsere Tools.

### Was ist ein guter INP-Wert?  
Detaillierte Antwort finden Sie in der Erklärung oben. Für eine praktische Anwendung empfehlen wir unsere Tools.

### INP vs. FID — was ist der Unterschied?  
Detaillierte Antwort finden Sie in der Erklärung oben. Für eine praktische Anwendung empfehlen wir unsere Tools.