Cookie-Einstellungen

Notwendige Cookies halten die Seite am Laufen. Analytics zeigt, welche Seiten nützlich sind. Die Wahl lässt sich jederzeit im Footer ändern.

Cookie-Richtlinie dieser Website – alle Details: Cookie-Kategorien, wie wir Ihre Auswahl im Browser speichern und wie Sie Ihre Einwilligung widerrufen.

Notwendig

Grundfunktionen der Seite und Ihre Einwilligung. Immer aktiv.

Analyse

Hilft zu verstehen, wie die Seite genutzt wird. Wird nur nach Ihrer Zustimmung geladen.

GitHubZIP herunterladen

Interaction to Next Paint (INP)

Interaction to Next Paint misst die Verzögerung von einer Nutzerinteraktion bis zum nächsten sichtbaren Update. Daran lässt sich ablesen, wie reaktionsschnell sich eine Seite bei der Nutzung anfühlt.

Eine echte Interaktion nachverfolgen

INP berücksichtigt die Interaktionen während eines Seitenbesuchs und meldet diejenige Interaktion, die die schlechteste Reaktionsfähigkeit am besten abbildet. Die Verzögerung kann aus der Verarbeitung der Eingabe, langen JavaScript-Aufgaben, synchroner Layoutarbeit oder einem Paint stammen, den andere Arbeit verzögert. Ein Klick, der am Ende gelingt, kann sich trotzdem träge anfühlen.

So prüfen Sie sie

Nutzen Sie Felddaten, um betroffene Seitengruppen zu finden. Zeichnen Sie anschließend einen Trace auf, während Sie eine realistische Tipp-, Klick- oder Tastenaktion wiederholen. Zerlegen Sie die Interaktion in Eingabeverzögerung, Verarbeitungszeit und Verzögerung der Darstellung. Testen Sie die Route mit einem eingeschränkten Gerätprofil, denn ein Desktop-Trace kann eine hohe Auslastung des Main-Threads verbergen.

Das Diagramm zeigt die Rendering- oder Messstufe, die dieses Leistungskonzept beschreibt.

So verbessern Sie sie

Entfernen Sie unnötige synchrone Arbeit aus dem Handler, teilen Sie lange Aufgaben auf, vermeiden Sie Layout-Thrashing und zeigen Sie den nächsten sinnvollen Zustand zügig an. Prüfen Sie, ob die Interaktion weiterhin abgeschlossen wird, per Tastatur bedienbar bleibt und die Seite nicht verschiebt. Vergleichen Sie Traces vor und nach der Änderung unter gleichen Bedingungen.

Grenzen und häufige Fehler

Optimieren Sie nicht nur den ersten Klick und ersetzen Sie die Interaktionsarbeit nicht durch einen oberflächlichen Spinner. Die Seite muss die Aufgabe der Nutzer tatsächlich bestätigen und abschließen.

Ordnen Sie einen INP-Befund ein, indem Sie die Interaktion in Eingabeverzögerung, Verarbeitungszeit und Verzögerung der Darstellung zerlegen. Halten Sie die genaue Klick-, Tipp- oder Tastaturaktion, das beteiligte Element und das Gerätprofil fest. Eine lange Aufgabe vor dem Handler deutet auf eine Konkurrenz um den Main-Thread hin. Ein langsamer Handler führt womöglich synchrone Berechnungen aus. Eine verzögerte Darstellung kann auf Style- oder Layoutarbeit nach dem Handler hindeuten. Ein Beispiel: Ein Filterklick, der eine große Liste synchron neu aufbaut, lässt sich verbessern, indem Sie den Umfang der Aktualisierung verringern und nicht wesentliche Arbeit aufteilen, damit der Browser zwischendurch Raum bekommt. Das Ergebnis muss aber weiterhin Fortschritt anzeigen und per Tastatur bedienbar bleiben. Reproduzieren Sie dieselbe Interaktion nach der Änderung und prüfen Sie sowohl den Trace als auch die sichtbare Reaktion.

FAQ

Was bedeutet Interaction to Next Paint (INP) in der Praxis?
Interaction to Next Paint misst die Verzögerung von einer Nutzerinteraktion bis zum nächsten sichtbaren Update. Daran lässt sich ablesen, wie reaktionsschnell sich eine Seite bei der Nutzung anfühlt.
Wie sollte Interaction to Next Paint (INP) bewertet werden?
INP berücksichtigt die Interaktionen während eines Seitenbesuchs und meldet diejenige Interaktion, die die schlechteste Reaktionsfähigkeit am besten abbildet. Die Verzögerung kann aus der Verarbeitung der Eingabe, langen JavaScript-Aufgaben, synchroner Layoutarbeit oder einem verzögerten Paint durch andere Arbeit stammen. Ein Klick, der am Ende gelingt, kann sich trotzdem träge anfühlen.