INP verbessern: Interaction to Next Paint verstehen

Was ist INP?

Seit März 2024 ist der INP – Interaction to Next Paint – die offizielle Nachfolge-Kennzahl der früheren FID (First Input Delay). Er misst, wie schnell deine Website auf Eingaben reagiert: Klicks, Tippen, Wischen und Tastatureingaben. Der Zielwert liegt bei unter 200 Millisekunden; alles darüber gilt als verbesserungswürdig, ab 500 Millisekunden als schlecht.

Für Google ist der INP ein Kernsignal der User Experience. Eine Seite, die träge auf Eingaben reagiert, fühlt sich kaputt an – selbst wenn sie inhaltlich perfekt ist und blitzschnell lädt. Der INP ist damit einer der drei Core Web Vitals, die auch dein VitoScore in der Kategorie Performance bewertet.

Was misst der INP genau?

Der INP erfasst die Zeit vom Moment der Eingabe bis zum nächsten sichtbaren Frame. Entscheidend ist die langsamste typische Interaktion einer Sitzung, nicht der Durchschnitt: Google wertet das 75. Perzentil über alle Seitenbesuche. Ein einziger hängender Klick genügt also, um den Wert schlecht aussehen zu lassen – besonders bei Seiten, die viel JavaScript ausführen.

Der Unterschied zur alten FID: Die FID maß nur, wie lange der Browser brauchte, bis der Event-Handler startete. Der INP geht einen Schritt weiter und zählt die gesamte Verarbeitung bis zum Rendern des nächsten Frames – inklusive langer Tasks, die den Haupt-Thread blockieren. Deshalb ist der INP deutlich strenger und näher an dem, was Nutzer wirklich erleben.

Warum ein schlechter INP weh tut

Die Reaktionsfähigkeit prägt den ersten Eindruck einer Website stärker als jede andere Kennzahl. Studien zu Nutzererfahrung zeigen immer wieder: Wartezeiten auf Eingaben führen zu mehr Absprüngen, weniger Klicks und geringerer Konversionsrate. Auf Mobilgeräten, wo Tippen unmittelbar sein muss, wiegt ein hoher INP doppelt schwer – und Google bewertet die mobile Erfahrung bevorzugt.

Ein gutes Beispiel: Ein Button, der erst nach einer halben Sekunde reagiert, fühlt sich für Nutzer wie ein Fehler an. Viele klicken erneut oder verlassen die Seite. Genau dieses Verhalten misst der INP – und genau deshalb lohnt sich die Optimierung direkt.

Die häufigsten Ursachen für hohe INP-Werte

• zu viel JavaScript auf dem Haupt-Thread des Browsers
• lange Tasks, die Eingaben blockieren
• schwere Drittanbieter-Skripte wie Tracking, Chats und Widgets
• Layout-Thrash durch ständiges Wechseln von Lesen und Schreiben im DOM
• fehlendes Debouncing bei Eingabe-Events, etwa bei Sucheingaben

So misst du deinen INP

Im kostenlosen VitoScore-Check siehst du den INP-Wert deiner Seite direkt im Performance-Bericht – als Laborwert aus Lighthouse. Echte Nutzerdaten liefert die Google Search Console unter „Core Web Vitals" oder der CrUX-Bericht. Wichtig ist die Kombination: Optimiere zuerst mit dem Laborwert, verifiziere danach mit den Felddaten. Eine einzelne Messung kann irreführen, deshalb solltest du mehrere Messungen über unterschiedliche Tageszeiten vergleichen.

Maßnahmen, die wirklich helfen

1. JavaScript aufteilen und verzögern

Große Bundles blockieren den Haupt-Thread. Teile sie per Code Splitting auf, lade nur das, was die aktuelle Seite braucht, und verschiebe alles andere mit defer oder async. Faustregel: Jedes Kilobyte JavaScript, das beim Laden nicht gebraucht wird, kostet dich später Reaktionszeit.

2. Long Tasks vermeiden

Ein Task über 50 Millisekunden blockiert Eingaben spürbar. Zerlege aufwendige Arbeit in kleinere Häppchen und gib dem Browser zwischendurch Luft:

async function arbeiteInHaeppchen(liste) {
  for (const eintrag of liste) {
    verarbeite(eintrag);
    // Der Browser kann zwischen den Häppchen Eingaben rendern
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

3. Drittanbieter-Skripte prüfen

Tracking, Chat-Widgets und Partner-Skripte gehören zu den häufigsten INP-Verursachern. Prüfe jedes externe Skript auf seine Notwendigkeit – oft reichen zwei von fünf Einbindungen. Wo möglich, Skripte erst nach der ersten Interaktion nachladen oder ganz durch leichte Eigenlösungen ersetzen.

4. Eingaben priorisieren

Antworte sofort auf Eingaben und verschiebe teure Nebenrechnungen:

• das UI-Update sofort rendern, Datenverarbeitung in den Hintergrund
• requestIdleCallback für Aufgaben ohne Eile
• Eingabe-Handler mit Debounce oder Throttle entlasten

5. Sichtbares Rendering optimieren

Verwende requestAnimationFrame für visuelle Änderungen und vermeide Layout-Thrash – das ständige Wechseln von synchronem Lesen (etwa offsetHeight) und Schreiben im DOM. Sammle alle Messwerte zuerst, schreibe dann einmal ins DOM. Das reduziert Reflows und hält den Haupt-Thread frei.

INP und dein VitoScore

Der INP fließt direkt in deinen VitoScore-Bericht ein – zusammen mit LCP und CLS bildet er das Performance-Fundament deines Scores. Wie du die drei Kennzahlen richtig liest und priorisierst, erklären wir in Core Web Vitals im Detail. Und wenn Layout-Sprünge dein Thema sind: CLS senken: Layout-Sprünge sicher vermeiden zeigt die passenden Maßnahmen.

Fazit

Ein guter INP ist kein Zufall, sondern das Ergebnis konsequenter JavaScript-Disziplin: weniger Code, kleinere Tasks, kontrollierte Drittanbieter und Eingaben, die sofort eine Antwort bekommen. Starte mit einer Messung, behebe die schwersten Verursacher zuerst und beobachte, wie sich der Wert über die nächsten Messungen verbessert. Die größten Gewinne erzielst du fast immer, wenn du ein einziges schweres Skript entfernst oder einen langen Task zerlegst.

Weitere Praxis-Tipps findest du in der Kategorie Praxis-Tipps und im großen Core-Web-Vitals-Guide.