Was ist Interaction to Next Paint (INP)?

Interaction to Next Paint ist die Responsiveness-Metrik, die First Input Delay in den Core Web Vitals abgelöst hat. Sie misst, wie schnell eine Seite nach einer Nutzereingabe sichtbar reagiert - und zwar über die gesamte Session, nicht nur beim ersten Tap. In Storefronts mit vielen Filtern, Variantenauswahlen und Add-to-Cart-Buttons legt INP die echten Kosten von Client-JavaScript offen.

Definition

INP sampelt jede diskrete Interaktion - Klick, Tap, Keypress - und misst die Zeit bis zum nächsten Paint. Gemeldet wird im Wesentlichen die schlechteste Interaktion einer Session, bei vielen Eingaben das 98. Perzentil, in Millisekunden. Google bewertet bis 200 ms als gut und über 500 ms als schlecht. INP wird dominiert von Long Tasks auf dem Main Thread, teuren Event-Handlern, Layout-Thrashing und Hydration-Arbeit, die React, Vue oder Svelte nach dem Server-Rendering nachholen. Schwere Third-Party-Skripte aus dem content-management-system-cms-Tagmanager sind häufige Mitverursacher.

Warum es zählt

INP zeigt, was Shopper wirklich spüren: zähe Filter auf der PLP, einen verzögerten Mengen-Stepper oder ein träges Mega-Menü. Schlechte INP-Werte erhöhen Bounce-Rate und Warenkorbabbrüche und sind schwerer zu beheben als LCP, weil sie aus der Anwendungsarchitektur entstehen, nicht aus der Asset-Auslieferung. In composable-commerce-Stacks ist INP der beste Indikator für Hydration-Kosten und Bundle-Qualität. Als Vital fließt er über das Page-Experience-Signal auch in die search-engine-optimization-seo ein.

Anwendungsfälle

Teams mit Next.js, Remix oder Nuxt verbessern INP durch Code-Splitting der React-Bundles pro Route, das Defer von unkritischem First-Party-JS und Auslagerung schwerer Arbeit in Web Worker. Der Einsatz von React Server Components oder Islands Architecture in Astro entfernt Hydration auf großen Seitenbereichen und halbiert INP auf Kategorieseiten häufig. Edge Rendering auf Vercel Edge, Cloudflare Workers oder Netlify Edge bringt den Cache-Layer nah an die Nutzer, der echte Hebel bleibt aber weniger interaktives Client-JS. Teams instrumentieren INP pro Route mit der web-vitals-Bibliothek und setzen INP-Budgets als Release-Gate.

Verwandt

Mehr dazu: Performance and Core Web Vitals · Composable Headless Frontend.