Interaction to Next Paint (INP)

Was diese Prüfung macht

Liest INP aus PageSpeed Insights. INP misst die langsamste 98.-Perzentil-Interaktion (Klick, Tap, Tastendruck) während einer Seitensitzung — in Millisekunden. Seit März 2024 hat INP First Input Delay (FID) als drittes Core Web Vital ersetzt.

INP-Wert	Verdikt
≤ 200 ms	Gut
200–500 ms	Verbesserungswürdig
> 500 ms	Schlecht

Warum es wichtig ist

INP ist die Performance-Metrik, die am nächsten an „Fühlt sich diese Seite schnell an?” herankommt. Anders als LCP (misst Laden) oder CLS (misst Stabilität) misst INP die Interaktivität während der gesamten Sitzung, nicht nur beim Laden.

Schlechter INP ist fast immer ein JavaScript-Problem. Der Main-Thread ist mit deinen Skripten beschäftigt, also reiht sich der Click-Handler hinter dem an, was gerade läuft, und der Bildschirm hängt.

Wie du es behebst

1. Finde deine schlimmsten Interaktionen. In den Chrome DevTools, öffne den Performance-Tab und zeichne eine Sitzung auf, die die langsame Interaktion enthält. Such nach Long Tasks (>50 ms) direkt nach dem Click-Event.

2. Zerlege lange Tasks. Jedes synchrone JavaScript, das länger als 50 ms läuft, blockiert Nutzereingaben. Teile mit await-freundlichen Stücken:

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Moderne Browser haben außerdem scheduler.yield() (Chromium 129+), das sauberer ist.

3. Verzögere unkritische Skripte. Verschiebe Analytics, Werbung, A/B-Test-Snippets und Chat-Widgets so, dass sie erst nach der ersten Interaktion laden (oder nutze requestIdleCallback).

4. Nutze content-visibility: auto auf Abschnitten außerhalb des Viewports. Der Browser überspringt Layout und Paint für verborgenen Inhalt, bis er in den Viewport scrollt.

5. Leichtere React/Vue/Svelte-Re-Renders. Ein häufiger INP-Killer: Ein Click-Handler löst ein State-Update aus, das 500 Komponenten neu rendert. Nutze Memoisierung (React.memo, useMemo), Virtualisierung für lange Listen und granulare State-Slices.

Häufig gestellte Fragen

Zeigt PageSpeed Insights INP?

Ja — sowohl Lab als auch Field. Field-INP kommt aus dem Chrome User Experience Report (CrUX) für Sites mit ausreichend Traffic; kleinere Sites sehen nur lab-simuliertes INP.

Ist INP dasselbe wie FID?

Nein. FID hat nur die Verzögerung der ersten Interaktion gemessen. INP misst den Worst-Case über die gesamte Sitzung, einschließlich der Laufzeit des Click-Handlers und des nächsten Paints. INP ist etwa 5× schwerer zu optimieren als FID es war.

Meine Seite ist meistens statisch. Warum ist INP schlecht?

Selbst eine statische Seite hat oft schwere Drittanbieter-Skripte (Analytics, Chat, Consent-Banner), die den Main-Thread blockieren. Audite deine <script>-Tags und verzögere alles, was nicht kritisch für den First Paint ist.