Interaction to Next Paint (INP)

Definition von Interaction to Next Paint (INP)

Interaction to Next Paint (INP) ist eine Core-Web-Vitals-Metrik, die misst, wie schnell eine Webseite auf Benutzerinteraktionen reagiert, indem sie die Zeit erfasst, die zwischen dem Auslösen einer Aktion durch den Benutzer (z. B. Klicken eines Buttons, Tippen auf einem Touchscreen oder Drücken einer Taste) und der Darstellung der nächsten visuellen Aktualisierung durch den Browser vergeht. Eingeführt vom Chrome-Team von Google im Mai 2022 als experimentelle Metrik und im März 2024 offiziell zu einem stabilen Core Web Vital erhoben, hat INP First Input Delay (FID) als primäre Reaktionsfähigkeitsmetrik zur Bewertung der Seitenerfahrung abgelöst. Im Gegensatz zu FID, das nur die Verzögerung der ersten Interaktion auf einer Seite maß, bietet INP eine umfassende Bewertung der Reaktionsfähigkeit, indem es alle Interaktionen während der gesamten Benutzersitzung beobachtet. Diese Umstellung spiegelt einen ganzheitlicheren Ansatz zur Messung der Benutzererfahrung wider und erkennt an, dass 90 % der Zeit eines Benutzers auf einer Seite nach dem Laden stattfinden, was eine gleichbleibende Reaktionsfähigkeit während der gesamten Sitzung für die Benutzerzufriedenheit und die SEO-Leistung entscheidend macht.

Historischer Kontext und Entwicklung der Reaktionsfähigkeitsmetriken

Die Einführung von INP stellt eine bedeutende Weiterentwicklung dar, wie Google die Reaktionsfähigkeit von Websites misst und bewertet. Jahrelang diente First Input Delay (FID) als primäre Reaktionsfähigkeitsmetrik innerhalb der Core Web Vitals und konzentrierte sich ausschließlich auf die Eingabeverzögerungskomponente der ersten Benutzerinteraktion. Forschung und Praxistests offenbarten jedoch erhebliche Einschränkungen des FID-Ansatzes. Die Metrik erfasste nur die Verzögerung, bevor Ereignisbehandler ausgeführt wurden, und ignorierte die Zeit, die für die eigentliche Verarbeitung der Interaktion und die Darstellung der visuellen Antwort benötigt wurde. Darüber hinaus bedeutete die Fokussierung von FID auf die erste Interaktion, dass Seiten mit schlechter Reaktionsfähigkeit später in der Benutzersitzung immer noch gute FID-Werte erzielen konnten, was ein irreführendes Bild der gesamten Seitenreaktionsfähigkeit ergab. Als Reaktion auf diese Einschränkungen begann das Chrome-Team von Google 2021 mit der Erforschung alternativer Metriken und kündigte schließlich im Mai 2022 INP als experimentelle Metrik an. Nach fast zwei Jahren Community-Tests und Feedback-Sammlung wurde INP am 12. März 2024 offiziell zu einem stabilen Core Web Vital und ersetzte FID vollständig. Dieser Übergang unterstreicht Googles Engagement für genauere, benutzerzentrierte Leistungsmetriken, die reale Browsererfahrungen besser widerspiegeln.

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

Jetzt starten Kontakt

Wie Interaction to Next Paint funktioniert: Technische Aufschlüsselung

INP misst die Reaktionsfähigkeit, indem es drei verschiedene Phasen der Benutzerinteraktion verfolgt: Eingabeverzögerung, Verarbeitungszeit und Darstellungsverzögerung. Die Eingabeverzögerung stellt die Zeit zwischen dem Auslösen einer Aktion durch den Benutzer und dem Beginn der Ausführung der zugehörigen Ereignisbehandler durch den Browser dar, die oft durch lange Aufgaben oder Hintergrundverarbeitung verursacht wird, die den Hauptthread blockieren. Die Verarbeitungszeit umfasst die Dauer, die für die Ausführung aller Ereignisbehandler-Callbacks erforderlich ist, einschließlich des JavaScript-Codes, der auf die Benutzeraktion reagiert. Schließlich ist die Darstellungsverzögerung die Zeit zwischen dem Abschluss der Ereignisbehandler und der Darstellung des nächsten Frames durch den Browser, was Neuberechnungen des Layouts, Style-Updates und Render-Arbeiten umfassen kann. Der gesamte INP-Wert stellt die Summe dieser drei Komponenten für eine einzelne Interaktion dar. Wichtig ist, dass INP als das 98. Perzentil aller Interaktionen auf einer Seite berechnet wird. Das bedeutet, wenn eine Seite viele Interaktionen erhält, ignoriert Google die schlechtesten 2 % als Ausreißer und meldet die Reaktionsfähigkeit, die die überwältigende Mehrheit der Benutzer erlebt. Bei Seiten mit weniger als 50 Interaktionen gibt INP in der Regel die schlechteste beobachtete Interaktion aus. Dieser perzentilbasierte Ansatz stellt sicher, dass gelegentliche Leistungsschwankungen Websites, die grundsätzlich reaktionsschnell sind, nicht übermäßig bestrafen.

Vergleichstabelle: INP vs. FID vs. andere Leistungsmetriken

Stay Updated on AI Visibility Trends

Get the latest insights on AI mentions, brand monitoring, and optimization strategies.

Email address

Subscribe

Leistungsschwellenwerte und reale Statistiken

Google definiert INP-Leistungsschwellenwerte am 75. Perzentil der Seitenaufrufe, unterteilt nach Gerätetyp (mobil und Desktop). Ein INP unter 200 Millisekunden zeigt eine gute Reaktionsfähigkeit an, was bedeutet, dass die Seite schnell auf Benutzerinteraktionen reagiert und sofortiges visuelles Feedback bietet. Ein INP zwischen 200 und 500 Millisekunden fällt in die Kategorie „verbesserungswürdig" und deutet darauf hin, dass die Seite zwar funktionsfähig ist, Benutzer jedoch spürbare Verzögerungen wahrnehmen können, die die Zufriedenheit beeinträchtigen könnten. Ein INP über 500 Millisekunden wird als schlecht eingestuft und weist auf erhebliche Reaktionsfähigkeitsprobleme hin, die Benutzer wahrscheinlich frustrieren und sich negativ auf Engagement und Konversionen auswirken. Laut dem Web Almanac 2024 des HTTP Archive erreichten 74 % der mobilen Websites und 97 % der Desktop-Websites gute INP-Werte, was eine erhebliche Leistungslücke zwischen mobilen und Desktop-Erfahrungen offenbart. Diese Differenz von 23 Prozentpunkten unterstreicht die anhaltenden Herausforderungen für Entwickler bei der Optimierung der Reaktionsfähigkeit für mobile Geräte, die in der Regel über weniger Rechenleistung und variablere Netzwerkbedingungen verfügen als Desktop-Computer. Die Daten verdeutlichen, warum INP-Optimierung für die Mobile-First-Webentwicklung entscheidend ist, da mobile Benutzer für die meisten Websites den Großteil des Web-Traffics ausmachen.

Die Rolle von INP in Core Web Vitals und seine SEO-Auswirkungen

INP ist eine von drei Core-Web-Vitals-Metriken, die Google verwendet, um die Seitenerfahrung zu bewerten und Suchrankings zu bestimmen, neben Largest Contentful Paint (LCP) für die Ladeleistung und Cumulative Layout Shift (CLS) für die visuelle Stabilität. Google hat ausdrücklich erklärt, dass Core Web Vitals Ranking-Faktoren sind, was bedeutet, dass Seiten mit schlechten INP-Werten eine geringere Sichtbarkeit in den Suchergebnissen erfahren können. Dies macht die INP-Optimierung nicht nur zu einem Anliegen der Benutzererfahrung, sondern zu einer kritischen SEO-Notwendigkeit. Die geschäftlichen Auswirkungen der INP-Optimierung wurden durch reale Fallstudien belegt: RedBus, eine Online-Plattform für Bustickets, erzielte eine Umsatzsteigerung von 7 %, indem der INP-Wert der Website von 870–900 ms auf 350–370 ms optimiert wurde – durch Techniken wie Entprellen von Scroll-Ereignisbehandlern, Optimierung des Zustandsmanagements von Eingabekomponenten und Reduzierung unnötiger Neu-Renderings. Diese Fallstudie zeigt, dass INP-Verbesserungen direkt mit verbesserten Geschäftskennzahlen korrelieren, darunter höhere Konversionsraten, niedrigere Absprungraten und verbesserte Benutzerbindung. Für E-Commerce-Seiten, SaaS-Plattformen und jedes Unternehmen, das auf Benutzerinteraktionen angewiesen ist, stellt die INP-Optimierung eine Investition mit hohem ROI sowohl in die Benutzererfahrung als auch in die Suchsichtbarkeit dar.

Wichtige Optimierungsstrategien zur Verbesserung von INP

Entwickler können mehrere evidenzbasierte Strategien anwenden, um INP zu reduzieren und die Seitenreaktionsfähigkeit zu verbessern. Die Reduzierung der Eingabeverzögerung erfordert die Minimierung der Hintergrundverarbeitung, die den Hauptthread blockiert, z. B. durch Aufteilung langer Aufgaben mit der scheduler.yield()-API, das Zurückstellen nicht kritischer JavaScript-Ausführungen und die Optimierung des Ladens von Drittanbieter-Skripten. Die Optimierung der Verarbeitungszeit beinhaltet die Straffung von Ereignisbehandler-Callbacks, sodass nur wesentliche Arbeiten ausgeführt werden, den Einsatz von Techniken wie Entprellen und Drosselung zur Begrenzung der Ausführungshäufigkeit von Ereignisbehandlern sowie die Nutzung von Frameworks wie React, um unnötige Komponenten-Neu-Renderings durch Memoization zu verhindern. Die Reduzierung der Darstellungsverzögerung kann durch Minimierung der DOM-Komplexität, Verwendung von CSS-Containment zur Begrenzung des Rendering-Umfangs und Zurückstellen nicht kritischer visueller Aktualisierungen erreicht werden. Darüber hinaus sollten Entwickler Interaktionen mit Chrome DevTools profilieren, um zu identifizieren, welche spezifischen Funktionen und Skripte am meisten zu INP-Verzögerungen beitragen, und dann Optimierungen mit der höchsten Wirkung priorisieren. Real User Monitoring (RUM)-Lösungen liefern wertvolle Daten darüber, mit welchen Seitenelementen Benutzer am häufigsten interagieren und welche Interaktionen am langsamsten sind, was datengesteuerte Optimierungsentscheidungen ermöglicht. Die web-vitals-JavaScript-Bibliothek ermöglicht es Entwicklern, INP programmatisch zu messen und Daten an Analyseplattformen zu senden, was eine kontinuierliche Überwachung und Verbesserung erleichtert.

Messung von INP: Tools und Methoden

INP kann sowohl durch Felddaten als auch durch Labortests gemessen werden, wobei Felddaten von echten Benutzern die genaueste Darstellung der tatsächlichen Leistung liefern. Google PageSpeed Insights zeigt INP-Metriken basierend auf Daten des Chrome User Experience Report (CrUX) und zeigt das 75. Perzentil der realen Benutzererfahrungen für Seiten mit ausreichend Traffic. Die Google Search Console enthält einen INP-Bericht im Bereich Core Web Vitals, der Website-Betreibern ermöglicht, Seiten mit schlechter Reaktionsfähigkeit zu identifizieren und Verbesserungen im Laufe der Zeit zu verfolgen. Der Performance-Tab von Chrome DevTools ermöglicht Entwicklern, einzelne Interaktionen aufzuzeichnen und zu analysieren und zeigt die Aufschlüsselung der Komponenten Eingabeverzögerung, Verarbeitungszeit und Darstellungsverzögerung. Die web-vitals-JavaScript-Bibliothek bietet eine programmatische Möglichkeit, INP in Produktionsumgebungen zu messen und Daten an benutzerdefinierte Analyse-Backends zu senden. Real User Monitoring (RUM)-Lösungen wie DebugBear, Datadog und New Relic bieten detaillierte Einblicke in die INP-Leistung, einschließlich Zuordnungsdaten, die zeigen, welche Skripte und Komponenten zu Verzögerungen beitragen. Das INP-Debugger-Tool identifiziert automatisch anklickbare Seitenelemente und simuliert Interaktionen, um langsame Interaktionen in einer Laborumgebung zu identifizieren. Für eine umfassende INP-Optimierung sollten Entwickler mehrere Messansätze kombinieren: CrUX-Daten verwenden, um die Baseline-Leistung zu verstehen, RUM, um problematische Interaktionen in der Produktion zu identifizieren, und DevTools, um Ursachen zu diagnostizieren und Korrekturen zu validieren.

INP und KI-Suchintegration: Auswirkungen für AmICited-Benutzer

Da KI-gestützte Suchsysteme wie ChatGPT, Perplexity, Google AI Overviews und Claude zunehmend Webinhalte referenzieren und zitieren, wird die Seitenreaktionsfähigkeit zu einem Faktor bei der Bewertung und den Zitierungsmustern von KI-Systemen. Obwohl INP nicht direkt beeinflusst, ob ein KI-System Ihre Inhalte zitiert, können Seiten mit schlechter Reaktionsfähigkeit niedrigere Engagement-Metriken (Absprungrate, Verweildauer, Interaktionstiefe) aufweisen, die indirekt die Qualitätssignale von Inhalten beeinflussen. Darüber hinaus priorisieren KI-Systeme zunehmend Benutzererfahrungssignale bei der Bewertung der Glaubwürdigkeit und Relevanz von Quellen. Eine Seite, die schnell auf Benutzerinteraktionen reagiert, demonstriert technische Kompetenz und Professionalität, was möglicherweise beeinflusst, wie KI-Systeme Inhalte für Zitierungen bewerten und einordnen. Für Organisationen, die AmICited zur Überwachung ihrer Marken- und Domain-Präsenz in KI-Antworten nutzen, wird das Verständnis von INP Teil einer ganzheitlichen Content-Optimierungsstrategie. Seiten, die sowohl reaktionsschnell (guter INP) als auch qualitativ hochwertig und autoritativ sind, werden mit größerer Wahrscheinlichkeit von KI-Systemen zitiert. Da KI-Systeme zudem immer ausgefeilter werden, wenn es um die Bewertung von Benutzererfahrungssignalen geht, könnte die Aufrechterhaltung guter INP-Werte zu einem zunehmend wichtigen Faktor bei KI-Zitierungsmustern werden, was die INP-Optimierung nicht nur für die traditionelle SEO, sondern auch für die aufkommende KI-Such-Sichtbarkeit relevant macht.

Fehlerbehebung bei häufigen INP-Problemen

Die meisten schlechten INP-Werte lassen sich auf eine der drei Komponenten der Metrik zurückführen, daher beginnt die Diagnose mit der Isolation der fehlerhaften Komponente. Hohe Eingabeverzögerung bedeutet in der Regel eine lange Aufgabe auf dem Hauptthread – oft ein gebündeltes Analyse- oder Anzeigenskript, das läuft, wenn der Benutzer klickt; die Lösung besteht darin, die Arbeit mit scheduler.yield() in kleinere Teile aufzuteilen oder nicht kritische Skripte bis nach dem Interaktionsfenster zurückzustellen. Lange Verarbeitungszeit rührt typischerweise von Ereignisbehandlern her, die mehr Arbeit als nötig verrichten, z. B. ein Suchfeld, das bei jedem Tastendruck einen API-Aufruf auslöst, anstatt die Eingabe zu entprellen, oder eine React-Komponente, die die gesamte Liste statt der einzelnen geänderten Zeile neu rendert – Memoization und Drosselung beheben beides. Lange Darstellungsverzögerung ist oft ein CSS- oder DOM-Problem: Komplexe Selektoren, Layout-Thrashing oder ein tief verschachtelter DOM zwingen den Browser, Styles und Layout neu zu berechnen, bevor er darstellen kann, was CSS-Containment und die Vereinfachung des DOM-Baums direkt angehen. Ein weniger offensichtlicher Fehlermodus sind Drittanbieter-Skripte, die INP selbst dann stillschweigend dominieren können, wenn der eigene Code schnell ist; eine Profilerstellung im Performance-Tab von Chrome DevTools ordnet die Verzögerung dem richtigen Skript zu. Wenn schließlich Labor- und Feld-INP-Werte stark voneinander abweichen, sollte überprüft werden, ob die getesteten Interaktionen mit den tatsächlichen Klicks der Benutzer übereinstimmen – synthetische Tests übersehen Interaktionen, die RUM-Daten erfassen.

Wichtige INP-Optimierungs-Checkliste

• Aktuelle INP-Leistung prüfen mit PageSpeed Insights, Search Console und Real User Monitoring-Tools, um Basis-Metriken zu ermitteln
• Langsame Interaktionen identifizieren durch RUM-Daten und Chrome DevTools, um zu verstehen, welche Seitenelemente und Benutzeraktionen Verzögerungen verursachen
• Lange Aufgaben aufteilen mit scheduler.yield() und asynchronen Mustern, um Eingabeverzögerungen während des Seitenladens und der Hintergrundverarbeitung zu verhindern
• Ereignisbehandler optimieren durch Reduzierung der Verarbeitungszeit, Entprellen häufiger Ereignisse und Zurückstellen nicht kritischer Arbeiten
• DOM-Komplexität minimieren, um Darstellungsverzögerungen und Render-Zeiten nach Abschluss der Ereignisbehandler zu reduzieren
• Code-Splitting und Lazy Loading implementieren, um die anfängliche JavaScript-Ausführung und Hintergrundverarbeitung zu reduzieren
• Drittanbieter-Skripte optimieren durch Zurückstellen nicht kritischer Skripte, Verwendung von Web Workern über Partytown oder Entfernen unnötiger Integrationen
• Framework-spezifische Optimierungen nutzen wie React.memo, Vue-Computed-Eigenschaften und Next.js-Code-Splitting, um unnötige Neu-Renderings zu verhindern
• Kontinuierlich überwachen mit RUM-Lösungen, um INP-Verbesserungen zu verfolgen und Regressionen zu identifizieren, bevor sie sich auf Benutzer auswirken
• Auf echten Geräten testen, einschließlich leistungsschwacher mobiler Geräte, um die Reaktionsfähigkeit über das gesamte Spektrum der Benutzerhardware sicherzustellen

+++