Interaktion zum nächsten Bild (INP)

Interaction to Next Paint (INP) ist eine Kennzahl, die misst, wie schnell eine Website auf Benutzerinteraktionen wie Klicks, Antippen und Tastendrucke reagiert. Der Wert gibt an, wie viele Millisekunden zwischen der Ausführung einer Aktion durch einen Besucher und der Anzeige eines visuellen Feedbacks durch den Browser vergehen. Google verwendet INP seit März 2024 als offizielle Core Web Vitals-Kennzahl und ersetzt damit die First Input Delay. Ein niedriger INP-Wert bedeutet, dass sich Ihre Website schnell anfühlt, ein hoher Wert führt zu Frustration und erhöht die Wahrscheinlichkeit, dass Besucher die Website abbrechen.

Wie Interaction to Next Paint funktioniert und was es misst

INP misst die längste Interaktionsverzögerung während des gesamten Besuchs auf einer Seite. Jedes Mal, wenn ein Besucher klickt, tippt oder eine Taste drückt, startet der Browser eine Reihe von Aktionen: Verarbeitung des Ereignisses, Ausführung von JavaScript, Anpassung des DOM und Neuzeichnen des Bildschirms. INP betrachtet die Zeit zwischen der Nutzeraktion und dem Zeitpunkt, an dem der nächste Frame sichtbar wird. Google nimmt nicht die durchschnittliche Verzögerung, sondern das 75. Perzentil aller Interaktionen: den Wert, den 75 Prozent Ihrer Besucher erfahren. Ein Wert unter 200 Millisekunden ist gut, zwischen 200 und 500 Millisekunden sollte besser sein, über 500 Millisekunden ist schlecht. In der Praxis sehen wir bei KMU-Websites oft Werte zwischen 300 und 800 Millisekunden, vor allem auf mobilen Geräten und bei Seiten mit viel JavaScript.

Warum Google INP eingeführt und First Input Delay ersetzt hat

Bei der ersten Eingabeverzögerung wurde nur die allererste Interaktion auf einer Seite gemessen und nur die Verarbeitungszeit, nicht aber das visuelle Feedback betrachtet. Dies ergab ein unvollständiges Bild: Ein Besucher konnte zehnmal klicken und neunmal eine langsame Antwort erhalten, aber der FID-Wert blieb grün. INP misst alle Interaktionen während des Besuchs und berücksichtigt den gesamten Zyklus, bis der Browser etwas anzeigt. Dadurch wird die Metrik viel repräsentativer für die wahrgenommene Geschwindigkeit. Google kündigte die Änderung bereits im Jahr 2022 an und machte INP im März 2024 offiziell zum Bestandteil der Core Web Vitals. Websites, die bei INP gut abschneiden, erhalten einen leichten Rankingschub; schlechte Werte können Besucher und Konversionen kosten.

Was macht eine gute INP-Bewertung für KMU-Websites aus?

Een lage INP-score zorgt ervoor dat je website direct aanvoelt. Bezoekers klikken op een knop en zien meteen feedback, waardoor ze vertrouwen houden en doorklikkken naar de volgende stap. Bij webshops merken we dat een verbetering van 400 naar 180 milliseconden het afbreekpercentage in het bestelproces met 8 tot 12 procent kan verlagen. Voor B2B-websites met formulieren of configurators is een goede INP essentieel: als een bezoeker een optie selecteert en er gebeurt niets zichtbaars, denkt hij dat de site kapot is. Een doordachte SEO-strategie houdt altijd rekening met Core Web Vitals, omdat Google snelheid en gebruikerservaring meeneemt in de ranking. Je kunt je INP-score monitoren via Google Search Console en PageSpeed Insights, waar je ook concrete verbeterpunten krijgt per pagina.

INP is vooral waardevol voor pagina's waar bezoekers actief handelingen verrichten: formulieren invullen, producten filteren, menu's openen of door content scrollen. Hieronder vier concrete situaties waarin INP het verschil maakt tussen een vloeiende ervaring en een trage, frustrerende website.

Webshops mit Filtern und Produktkonfiguration

In einem Webshop verwenden Besucher Filter, um Produkte nach Größe, Farbe, Preis oder Lagerbestand auszuwählen. Jeder Klick auf eine Filteroption löst ein JavaScript aus, das die Produktliste aktualisiert. Wenn diese Aktualisierung 600 Millisekunden dauert, fühlt sich der Webshop langsam an und die Besucher brechen ab. Ein guter INP-Wert unter 200 Millisekunden sorgt dafür, dass die neue Produktliste fast sofort erscheint. Bei Webshops mit 500 bis 2.000 Produkten sehen wir häufig, dass umfangreiche JavaScript-Bibliotheken oder nicht optimierte Datenbankabfragen den INP-Wert in die Höhe treiben. Durch die serverseitige Verarbeitung von Filtern oder die Anwendung von Lazy Loading können Sie den Wert um 40 bis 60 Prozent verbessern. Dies führt direkt zu mehr Besuchen auf der Produktseite und einer höheren Konversion, da die Besucher schneller finden, wonach sie suchen.

Formulare und Seiten zur Lead-Generierung

Auf Kontaktformularen, Angebotsanfragen oder Anmeldeseiten sollte jede Eingabe ein sofortiges Feedback liefern: ein Häkchen für ein korrekt ausgefülltes Feld, eine Fehlermeldung für eine falsche E-Mail-Adresse oder ein Tooltip für ein Pflichtfeld. Wenn diese Rückmeldung erst nach 400 Millisekunden erscheint, weiß der Besucher nicht, ob seine Eingabe registriert wurde und füllt das Formular zweimal aus oder klickt weg. Ein niedriger INP-Wert sorgt für eine sofortige Validierung und ein Gefühl der Kontrolle. Bei B2B-Websites mit mehrstufigen Formularen haben wir festgestellt, dass eine Verbesserung des INP-Wertes von 500 auf 180 Millisekunden die Zahl der ausgefüllten Formulare um 15 bis 20 Prozent erhöht. Technisch gesehen erreichen Sie dies, indem Sie die Validierung clientseitig mit leichtgewichtigen Skripten durchführen und das umfangreiche Tracking von Drittanbietern erst nach der Übermittlung laden.

Mobile Websites mit Hamburger-Menüs und Akkordeons

Auf mobilen Geräten tippen Besucher auf ein Hamburger-Menü, ein Dropdown-Menü oder ein Akkordeon, um weitere Inhalte zu sehen. Wenn sich das Menü erst nach 500 Millisekunden öffnet, tippen sie erneut und sind irritiert. Ein guter INP-Wert von unter 200 Millisekunden sorgt dafür, dass sich das Menü sofort öffnet. Mobile Browser haben oft weniger Rechenleistung als Desktop-Browser, so dass JavaScript-lastige Interaktionen länger dauern. Durch die Verwendung von CSS-Animationen anstelle von JavaScript-Animationen und durch die Verlangsamung von Skripten von Drittanbietern mit async oder defer können Sie den INP-Wert auf mobilen Geräten um 30 bis 50 Prozent reduzieren. Dies ist von entscheidender Bedeutung, da mehr als 60 % der Besucher von KMU-Websites über Mobiltelefone kommen und Google die mobile Seite zuerst indexiert.

Dashboards und Anwendungen mit Echtzeitdaten

In Dashboards oder Webanwendungen klicken die Benutzer auf Registerkarten, Diagramme oder Datumsfilter, um Daten anzuzeigen. Wenn sich das Diagramm erst nach 700 Millisekunden aktualisiert, wirkt die Anwendung unübersichtlich und das Vertrauen der Nutzer in die Daten sinkt. Ein niedriger INP-Wert sorgt dafür, dass die Oberfläche auch bei komplexen Berechnungen sofort reagiert. In der Praxis zeigt sich, dass Dashboards, bei denen viele Daten abgerufen und gerendert werden, oft INP-Werte von über 600 Millisekunden aufweisen. Durch das Vorladen von Daten, die Anwendung von virtuellem Scrollen und die Verlagerung umfangreicher Berechnungen auf eine API können Sie den Wert senken. Dies verbessert die Nutzererfahrung und erhöht die Wahrscheinlichkeit, dass die Nutzer täglich wiederkommen.

Wann ist Interaction to Next Paint der richtige Fokus und wann nicht?

INP ist für jede Website relevant, auf der Besucher aktiv interagieren: klicken, tippen, tippen oder scrollen. Wenn Sie eine Website mit überwiegend statischem Inhalt und wenigen interaktiven Elementen haben, dann ist Largest Contentful Paint oder Cumulative Layout Shift wichtiger. Aber sobald Sie Formulare, Filter, Menüs oder Konfiguratoren haben, müssen Sie INP den Vorrang geben. Eine gute INP-Punktzahl erreichen Sie durch die Optimierung von JavaScript, den Verzicht auf Skripte von Drittanbietern und die Behandlung von Interaktionen auf dem Server oder mit leichtem client-seitigem Code. Beginnen Sie mit den Seiten, die den meisten Traffic und die meisten Konversionen generieren, denn dort wird eine Verbesserung die größte Wirkung haben.