Interaction to Next Paint (INP)

TL;DR

INP misst, wie schnell eine Seite auf alle Nutzer-Interaktionen reagiert – nicht nur die erste. Es ist der strengste Core Web Vital und zwingt zu sauberem JavaScript.

Was ist INP?

Interaction to Next Paint (INP) misst die Zeit von einer Nutzeraktion (Klick, Tap, Tastendruck) bis zum visuellen Feedback. Im Gegensatz zu FID, das nur die erste Interaktion maß, betrachtet INP die gesamte Sitzung.

INP hat FID im März 2024 als Core Web Vital ersetzt.

Gute INP-Werte

• Gut: ≤ 200 Millisekunden
• Verbesserungswürdig: 200 – 500ms
• Schlecht: > 500ms

Warum INP wichtiger ist als FID

FID maß nur die erste Interaktion – eine Seite konnte trotzdem später träge werden. INP erfasst alle Interaktionen und nimmt statistisch den schlechtesten Wert. Das gibt ein realistischeres Bild der tatsächlichen Nutzererfahrung.

Was INP verschlechtert

• Long Tasks (JavaScript > 50ms)
• Zu viel JavaScript insgesamt
• Blockierender Hauptthread
• Ineffiziente Event Handler
• Große DOM-Manipulationen

INP verbessern

• JavaScript aufteilen: Long Tasks in kleine Chunks teilen
• Yield zum Main Thread: scheduler.yield() nutzen
• Debounce/Throttle: Häufige Events drosseln
• Web Worker: Schwere Berechnungen auslagern
• Weniger JavaScript: Braucht ihr das wirklich alles?

INP und Nachhaltigkeit

Gutes INP bedeutet effizientes JavaScript:

• Weniger CPU-Arbeit pro Interaktion
• Längere Akkulaufzeit auf Mobilgeräten
• Schnellere Reaktionen = bessere UX = weniger Frust

Fazit

INP ist anspruchsvoll, aber fair. Es zwingt zu sauberem, effizientem JavaScript – was sowohl Nutzer als auch die Umwelt freut.