INP steht für Interaction to Next Paint und ist eine fundamentale Kennzahl für die Nutzerfreundlichkeit (Page Experience), die die Reaktionszeit einer Website auf sämtliche Benutzerinteraktionen während des gesamten Seitenbesuchs erfasst. Im Gegensatz zu älteren Metriken misst INP die Zeitspanne in Millisekunden (ms), die zwischen einer Nutzeraktion (wie einem Klick, einem Fingertipp oder einem Tastendruck) und dem Moment vergeht, in dem der Browser das nächste visuelle Frame auf dem Bildschirm rendert. Eine niedrige INP sorgt dafür, dass sich eine Webpräsenz flüssig, direkt und reaktionsschnell anfühlt.
Warum ist INP ein kritischer SEO- und Rankingfaktor?
Die Reaktionsschnelligkeit einer Webpräsenz beeinflusst das Nutzerverhalten sowie wirtschaftliche Kennzahlen wie Conversion-Rates und Absprungraten direkt. Lange Verzögerungen nach einem Klick führen zu Frustration und signalisieren dem Besucher eine mangelhafte technische Qualität. Google hat Interaction to Next Paint im März 2024 offiziell als Core Web Vital eingeführt und damit den alten Standard First Input Delay (FID) abgelöst.
Während FID lediglich die allererste Interaktion eines Nutzers erfasste, bewertet INP alle Interaktionen über die gesamte Lebensdauer einer Seite hinweg. Für das Ranking bedeutet dies: Seiten mit einer mangelhaften INP-Performance werden in den organischen Suchergebnissen gegenüber reaktionsschnelleren Mitbewerbern benachteiligt. Ein guter und anzustrebender INP-Wert liegt laut Google bei maximal 200 Millisekunden.
Wie wird INP gemessen und berechnet?
Die Erhebung von INP-Daten erfolgt primär über reale Nutzerdaten (Field Data), die im Chrome User Experience Report (CrUX) anonymisiert erfasst werden. Um zu verstehen, wie die Metrik genau zustande kommt, muss eine Interaktion in ihre drei technischen Teilbereiche zerlegt werden:
- Input Delay (Eingabeverzögerung): Die Zeitspanne zwischen der Nutzeraktion und dem Moment, in dem der Browser mit der Ausführung des dazugehörigen Event-Handlers beginnen kann. Diese Verzögerung entsteht meistens, weil der Hauptthread des Browsers (Main Thread) noch mit anderen Aufgaben, etwa dem Parsen von umfangreichen Skripten, ausgelastet ist.
- Processing Time (Verarbeitungszeit): Die Dauer, die der JavaScript-Code in den entsprechenden Event-Callbacks benötigt, um vollständig durchzulaufen.
- Presentation Delay (Präsentationsverzögerung): Die Zeit, die der Browser nach Abschluss des JavaScripts benötigt, um das geänderte Layout neu zu berechnen (Recalculate Style, Layout) und die neuen Pixel physisch auf den Bildschirm zu bringen (Paint).
Der finale INP-Wert einer URL entspricht dem repräsentativen Höchstwert dieser gemessenen Interaktionszeiträume während eines Seitenbesuchs, wobei mathematische Ausreißer bei hochgradig interaktiven Seiten herausgefiltert werden.
Nachhaltige Maßnahmen zur Verbesserung von INP
Die Optimierung von Interaction to Next Paint unterscheidet sich grundlegend von klassischen Ladezeit-Optimierungen. Während allgemeine Techniken wie eine ganzheitliche Optimierung der Ladezeiten, Caching-Systeme, der Einsatz eines Content Delivery Networks (CDN) oder Lazy Loading die Bereitstellung der ersten sichtbaren Elemente (LCP) beschleunigen, erfordert INP geziete Eingriffe in die JavaScript-Architektur und die Rendering-Pipeline:
- Lange JavaScript-Tasks aufbrechen (Long Tasks minimieren): Jede JavaScript-Aufgabe, die den Hauptthread länger als 50 Millisekunden blockiert, gilt als „Long Task“. Wenn ein Nutzer währenddessen interagiert, wird die Eingabe blockiert. Entwickler sollten komplexe Berechnungen in kleinere Abschnitte aufteilen, beispielsweise durch den Einsatz moderner APIs wie
scheduler.yield()oder klassischer Fallbacks wiesetTimeout(). - Web Workers nutzen: Rechenintensive Operationen, die keine direkte Auswirkung auf das visuelle DOM haben (wie Datenanalysen oder komplexe Sortierungen), sollten über Web Workers auf separate Hintergrund-Threads ausgelagert werden. Dadurch bleibt der Hauptthread für Benutzereingaben unblockiert.
- Event-Handler optimieren (Debouncing & Throttling): Funktionen, die bei hochfrequenten Ereignissen (wie dem Tippen in Suchfelder oder Scroll-Events) ausgelöst werden, müssen via Debouncing oder Throttling zeitlich gedrosselt werden, um den Browser nicht mit unzähligen parallelen Rendering-Anfragen zu überlasten.
- DOM-Größe und Rendering-Komplexität reduzieren: Ein übermäßig großer DOM-Baum verlängert das Presentation Delay drastisch. Jede visuelle Änderung nach einem Klick zwingt den Browser zu aufwendigen Layout-Neuberechnungen. Schlanker HTML-Code und performantes, modulares CSS senken diese Rendering-Kosten spürbar.
- Einsatz von Performance-Tools: Zur Identifikation träger Skripte eignen sich Diagnose-Werkzeuge wie PageSpeed Insights oder das Performance-Panel der Chrome-Entwicklertools. Diese Tools helfen dabei, die genauen Ursachen für Verzögerungen beim allgemeinen PageSpeed und der Interaktivität präzise zu lokalisieren.
Häufige Fehler bei der INP-Optimierung
- Fokus rein auf die initiale Ladezeit: Ein weit verbreiteter Irrtum ist die Annahme, dass eine Website mit exzellentem Start-PageSpeed automatisch eine gute Interaktivität besitzt. Wenn nach dem Laden im Hintergrund massenhaft Skripte unkontrolliert ausgeführt werden, bleibt die Seite trotz schneller optischer Bereitstellung für den Nutzer träge.
- Überladene Third-Party-Skripte: Externe Tracking-Pixel, Chat-Widgets oder Werbe-Skripte blockieren den Hauptthread oft unvorhersehbar. Diese sollten streng limitiert, asynchron geladen oder bis nach der ersten kritischen Nutzerinteraktion verzögert werden.
- Synchrones Layout-Thrashing: Das gleichzeitige Ändern und sofortige Auslesen von DOM-Eigenschaften innerhalb einer JavaScript-Funktion zwingt den Browser zu synchronen, wiederholten Layout-Berechnungen mitten im Skriptablauf. Dies treibt die Verarbeitungszeit massiv in die Höhe.
Fazit
Interaction to Next Paint (INP) stellt einen wichtigen Wandel in der Beurteilung der Web-Performance dar. Weg von rein statischen Metriken, hin zu einer dynamischen Bewertung des echten Nutzergefühls über die gesamte Session. Wer seine JavaScript-Prozesse strukturiert optimiert, Long Tasks eliminiert und den Hauptthread entlastet, sichert sich dauerhaft stabile Platzierungen in den SERPs und steigert die Conversion-Rate nachhaltig.
Zuletzt aktualisiert: 30. Juni 2026 um 14:52 Uhr