Was ist INP?
Interaction to Next Paint (INP) misst die Reaktionszeit einer Webseite nach einer Benutzerinteraktion – also wie lange es dauert, bis nach einem Klick, einer Tastatureingabe oder einem Touch-Ereignis eine sichtbare Reaktion im Frontend erfolgt. Damit ersetzt INP ab März 2024 den bisherigen Metrikwert FID (First Input Delay) in den Core Web Vitals.
Warum ist das wichtig?
Weil Ladezeit allein nicht mehr ausreicht – echte Nutzererfahrung zählt. Wenn eine Seite zwar schnell lädt, aber träge auf Klicks reagiert, entsteht Frustration. Google erkennt das und wertet solche Seiten ab.
So funktioniert INP im Detail
| Metrik | Bedeutung |
|---|---|
| INP < 200 ms | Gut – die Seite reagiert sehr schnell auf Nutzerinteraktionen |
| INP 200–500 ms | Verbesserungswürdig – spürbare Verzögerung |
| INP > 500 ms | Schlecht – deutliche Reaktionsverzögerung, negativ für SEO |
Was wird gemessen?
- Maus-Klicks (z. B. auf Buttons, Links)
- Tastatureingaben (z. B. Formulareingabe)
- Touch-Gesten (auf mobilen Geräten)
- Sichtbare Reaktion (z. B. ein Menü öffnet sich, eine Animation startet)
Gemessen wird die langsamste Interaktion während des Seitenbesuchs – nicht der Durchschnitt. Das macht INP besonders kritisch.
Ursachen für einen schlechten INP-Wert
- JavaScript-Blocking: Wenn die Haupt-Thread-Auslastung zu hoch ist
- Unoptimierte Event-Handler: z. B. Click-Listener mit zu viel Logik
- Langsame Render-Zyklen: z. B. DOM-Updates oder Repaints nach Klick
- Große Frameworks oder Libraries, die viele Ressourcen binden
INP optimieren – praktische Tipps
- Input-Handling optimieren
→ Event-Handler so schlank wie möglich halten – Logik ggf. verzögern. - UI-Reaktionen priorisieren
→ Sichtbare Änderungen (z. B. Klassenwechsel, Animationen) zuerst ausführen. - Web Worker und Idle Time nutzen
→ Aufwendige Berechnungen auslagern, um Haupt-Thread zu entlasten. - Performance-Tools einsetzen
→ Chrome DevTools, Lighthouse oder PageSpeed Insights zeigen INP-Werte im Detail an. - Code-Splitting & Lazy Loading
→ Nicht benötigte Ressourcen beim Initial-Load ausklammern.
Beispiel: INP-Optimierung in der Praxis
Ein Button löst bei Klick eine AJAX-Anfrage aus, lädt Daten und zeigt diese in einer Modalbox an.
Problem: Die Datenverarbeitung erfolgt synchron im Event-Handler. Die Modalbox öffnet sich mit Verzögerung.
Lösung:
- Modalbox sofort anzeigen (evtl. mit Ladespinner)
- Datenverarbeitung asynchron auslagern
- UI-Feedback priorisieren
Fazit
Interaction to Next Paint (INP) steht für ein neues Qualitätsniveau bei Webperformance. Seitenbetreiber, die schnelle Interaktionen liefern, profitieren direkt durch bessere Rankings. Besonders Agenturen, Entwickler und SEO-Verantwortliche sollten 2025 den INP-Wert zur Priorität machen – er ist mehr als ein technischer Indikator, sondern spiegelt reale Nutzererfahrung.
