INP Sub-Metriken

Was sind INP Sub-Metriken?

Wenn Ihr INP-Wert zu hoch ist, zeigen Ihnen die Sub-Metriken genau, wo das Problem liegt: Blockiert schweres JavaScript die Eingabe (Input Delay), dauert die Verarbeitung zu lange (Processing Time) oder stockt das Rendering (Presentation Delay)? Ohne diese Aufschlüsselung optimieren Sie im Dunkeln. Diese granulare Analyse spart Ihnen Zeit und ermöglicht gezielte Verbesserungen, die sich direkt auf Ihre Core Web Vitals und Rankings auswirken.

INP Sub-Metriken zerlegen den Interaction to Next Paint (INP) — einen der drei Core Web Vitals — in seine drei Bestandteile: Input Delay, Processing Time und Presentation Delay. Diese Aufteilung ist entscheidend für die gezielte Optimierung, weil jede Komponente unterschiedliche Ursachen und Lösungen hat.

Der Input Delay misst die Zeit zwischen der Nutzerinteraktion (Klick, Tippen) und dem Beginn der Event-Handler-Ausführung. Ein hoher Input Delay deutet auf einen blockierten Main Thread hin — häufig durch laufende JavaScript-Tasks. Die Processing Time ist die Dauer der eigentlichen Event-Handler-Ausführung. Aufwändige Berechnungen, DOM-Manipulationen oder synchrone API-Aufrufe verlängern diese Phase. Der Presentation Delay schließlich misst die Zeit vom Ende der Verarbeitung bis zum nächsten Paint — also bis der Browser die visuellen Änderungen tatsächlich auf dem Bildschirm darstellt. Layout-Berechnungen und Paint-Operationen sind hier die Hauptverursacher.

Für die Optimierung analysieren Sie zunächst, welche Sub-Metrik den größten Anteil am INP hat. Bei hohem Input Delay helfen Code-Splitting und das Aufteilen langer Tasks. Bei hoher Processing Time optimieren Sie Ihre Event-Handler. Bei hohem Presentation Delay reduzieren Sie Layout-Thrashing und nutzen CSS-Containment. Moderne Architekturen wie Islands Architecture oder Selective Hydration reduzieren alle drei Komponenten gleichzeitig.