INP verbessern: Was Interaction to Next Paint misst und wie du reagierst

Seit März 2024 ist Interaction to Next Paint (INP) der dritte offizielle Core-Web-Vitals-Wert und hat den veralteten FID (First Input Delay) ersetzt. INP misst nicht nur die erste Interaktion, sondern die schlechteste von allen: Klicks, Tastendrücke, Touch-Events über die gesamte Sitzung. Ein guter INP-Wert liegt unter 200 Millisekunden.

Was genau misst INP?

Wenn du auf einen Button klickst, passiert folgendes: Der Browser registriert den Klick (Input), verarbeitet Event-Handler in JavaScript und malt dann die sichtbare Reaktion auf dem Bildschirm (Next Paint). INP misst die Gesamtdauer dieser Kette für jede Interaktion auf der Seite.

Ein schlechter INP zeigt sich so: Du klickst auf einen Button und nichts passiert für 500ms oder länger. Die Seite fühlt sich "eingefroren" an. Das frustriert Besucher und Google wertet es als schlechte Nutzererfahrung.

Was verursacht schlechte INP-Werte?

Der häufigste Übeltäter ist JavaScript, das den Browser-Hauptthread blockiert. Wenn JavaScript läuft, kann der Browser nichts anderes tun, keine Klicks verarbeiten, keine Animationen rendern, keine Interaktionen registrieren. Konkrete Ursachen:

• Long Tasks: JavaScript-Aufgaben die länger als 50 Millisekunden laufen, blockieren den Hauptthread. Alles was danach kommt, muss warten.
• Umfangreiche Event-Handler: Ein onClick-Handler der viel Arbeit erledigt (DOM-Manipulation, API-Calls, komplexe Berechnungen) blockiert die Reaktion.
• Drittanbieter-Skripte: Analytics, Chat-Widgets, Social-Media-Buttons führen oft umfangreichen Code im Hauptthread aus. Mehr dazu in unserem Beitrag zu Drittanbieter-Skripten als Performance-Killer.
• Große JavaScript-Bundles: Wenn beim Klick auf eine Komponente erst großes JavaScript geparst und ausgeführt werden muss, entsteht eine spürbare Verzögerung.

Long Tasks finden: Performance-Tab in Chrome

Öffne Chrome DevTools, gehe zum "Performance"-Tab und starte eine Aufzeichnung. Führe die langsame Interaktion durch und stoppe die Aufzeichnung. Im Flame-Chart siehst du den Hauptthread. Lange rote Balken mit einem roten Dreieck oben rechts sind Long Tasks. Klicke drauf um zu sehen, welcher Code dafür verantwortlich ist.

Konkrete Maßnahmen zur INP-Verbesserung

• Event-Handler aufteilen: Nutze setTimeout(0) oder requestAnimationFrame um aufwendige Arbeit nach dem Rendern zu verschieben. So reagiert die UI sofort und die Arbeit passiert im Hintergrund.
• Drittanbieter-Skripte lazy laden: Binde Chat-Widgets, Analytics und Social-Buttons erst nach dem ersten User-Engagement ein, statt beim Seitenaufruf.
• JavaScript-Bundles aufteilen (Code Splitting): Lade nur das JavaScript, das für die aktuelle Seite wirklich gebraucht wird.
• Web Worker nutzen: Rechenintensive Aufgaben (Sortierung, Filterung großer Datensätze) aus dem Hauptthread in einen Worker auslagern.
• Scheduler API: Moderne Browser unterstützen die Scheduler API, mit der du Tasks nach Priorität einreihen kannst, ohne den Hauptthread zu blockieren.

INP messen: Richtige Tools

Da INP auf echten Nutzerdaten basiert, reicht Lighthouse allein nicht aus. Lighthouse simuliert nur Interaktionen, misst aber keinen echten INP über eine Sitzung.

• Google Search Console: Zeigt INP-Werte auf Basis von Chrome-Felddaten, geordnet nach guten, verbesserungswürdigen und schlechten Seiten.
• PageSpeed Insights: Kombiniert Lighthouse-Daten mit CrUX-Felddaten und zeigt INP wenn genug Daten vorhanden sind.
• Web Vitals Chrome Extension: Zeigt INP in Echtzeit beim Browsen an. Nützlich zur schnellen Überprüfung.

Ein schlechter INP-Wert hat oft viele kleine Ursachen statt einer großen. Das systematische Optimieren aller Core Web Vitals ist eine Aufgabe, die Erfahrung erfordert. rocks.optimize übernimmt das vollständig für dich.