INP — der neue Core Web Vital: Was ändert sich für KMU-Websites?

Was ist INP?

INP (Interaction to Next Paint) misst die Zeit zwischen einer Nutzerinteraktion und dem nächsten sichtbaren Frame. Google's Ziel: unter 200 ms.

Warum Google FID durch INP ersetzen musste

FID hatte ein fundamentales Problem: Es maß nur die erste Interaktion und nur die Verzögerung, nicht die gesamte Verarbeitungszeit. Eine Seite mit FID 15 ms („gut”) konnte trotzdem eine miserable Nutzererfahrung haben, wenn die zweite oder dritte Interaktion 500 ms brauchte.

INP behebt das. Es trackt alle Interaktionen während eines Seitenbesuchs und reportet das Maximum — nicht den Durchschnitt, nicht den Median, sondern die schlechteste Erfahrung. Das macht INP zum härtesten der drei Core Web Vitals.

Für wen INP relevant ist — und für wen nicht

INP ist kritisch für:

• Online-Shops (Warenkorb-Interaktionen, Filter, Suche)
• SaaS-Dashboards (Daten-Filterung, Tab-Wechsel, Formular-Validierung)
• Interaktive Karten/Planer (Arzttermin-Buchung, Tischreservierung)
• Content-Editoren (Rich Text, Drag-and-Drop)

INP ist unkritisch für:

• Reine Marketing-Seiten ohne Formulare
• Statische Blog-Artikel ohne Kommentarfunktion
• Landing-Pages mit nur einem CTA-Button ohne JS-Logik

Für die meisten KMU-Websites, die primär aus statischen Marketing-Pages bestehen, ist INP kein Problem. Die Seiten haben kaum JavaScript, jede Interaktion ist ein nativer Browser-Link-Klick — keine Verarbeitungszeit, kein INP-Risiko.

Die drei Phasen einer Interaktion

INP setzt sich aus drei Phasen zusammen, die Lighthouse im Detail aufschlüsselt:

1. Input Delay (~10–30 %): Die Zeit vom physischen Klick bis zum Start des Event-Handlers. Hauptursache: langlaufende JavaScript-Tasks auf dem Main-Thread.
2. Processing Time (~40–70 %): Die Zeit, die der Event-Handler braucht — State-Updates, DOM-Manipulationen, API-Calls.
3. Presentation Delay (~10–20 %): Die Zeit vom Ende des Event-Handlers bis zum tatsächlichen Rendering des neuen Frame.

Der wichtigste Hebel ist Phase 1: Input Delay. Wenn der Main-Thread mit einer 300-ms-JavaScript-Funktion blockiert ist, hilft der schnellste Event-Handler nichts.

Vier Optimierungsstrategien für gutes INP

1. Langlaufende Tasks aufteilen

JavaScript läuft auf einem einzigen Main-Thread. Ein while-Loop, der 200 ms läuft, blockiert alle Interaktionen für 200 ms — INP schießt auf 200+ ms.

// Schlecht — blockiert den Main-Thread
for (let i = 0; i < 100000; i++) {
  processItem(data[i]);
}

// Gut — Tasks mit setTimeout aufteilen
function processItems(items, start = 0) {
  const chunk = items.slice(start, start + 100);
  chunk.forEach(processItem);
  if (start + 100 < items.length) {
    setTimeout(() => processItems(items, start + 100), 1);
  }
}

2. Debounce und Throttle für häufige Events

scroll-, resize- und input-Events feuern dutzende Male pro Sekunde. Ohne Ratenbegrenzung produziert das hunderte Tasks auf dem Main-Thread.

// Debounce: Handler läuft nur, wenn 150 ms keine weiteren Events kamen
inputEl.addEventListener('input', debounce(handleSearch, 150));

3. requestAnimationFrame für visuelle Updates

Direkte DOM-Änderungen im Event-Handler sind schnell, aber unkoordiniert. requestAnimationFrame synchronisiert visuelle Updates mit dem Browser-Rendering-Zyklus.

4. scheduler.postTask() für Priorisierung

Die Scheduler-API erlaubt Priorisierung von Tasks. Kritische Interaktionen bekommen 'user-blocking'-Priorität und werden vor Analytics-Tasks ausgeführt.

scheduler.postTask(() => updateUI(), { priority: 'user-blocking' });
scheduler.postTask(() => sendAnalytics(), { priority: 'background' });

INP messen und debuggen

• Chrome DevTools Performance Panel: Zeigt lange Tasks, Input-Delays und die INP-Phasen im Detail.
• Web Vitals Extension: Chrome-Extension, die alle drei CWV in Echtzeit anzeigt.
• PageSpeed Insights: Zeigt INP aus CrUX-Field-Data (falls genug Traffic vorhanden).

Praxis-Tipp: INP-Debugging lohnt sich erst, wenn der Wert über 200 ms liegt. Eine statische Marketing-Site mit INP 50 ms braucht keine Optimierung.

Weiterführend auf mekyn.com

→ Zur Pillar-Page: Seo → Verwandt: Lcp Unter 2 Sekunden → Verwandt: Cls Null → Tool: Kontrast Rechner

---

Externe Quellen:

• Web Dev — INP — Google’s offizielle INP-Dokumentation
• Core Web Vitals
• Scheduler API — MDN-Referenz