Was Interaction to Next Paint misst
Interaction to Next Paint, kurz INP, misst, wie schnell eine Seite auf Klicks, Tippen und Tastatureingaben sichtbar reagiert. Gut sind bis 200 Millisekunden.
So funktioniert es
INP ist einer der drei Core Web Vitals und hat im März 2024 den älteren Wert First Input Delay abgelöst. Für jede Interaktion während eines Besuchs misst der Browser die Zeit von der Eingabe bis zum nächsten gezeichneten Bild. Sie besteht aus drei Teilen:
- Eingabeverzögerung: Der Hauptthread ist noch mit etwas anderem beschäftigt, meist mit einem Skript.
- Verarbeitung: Die Skripte, die auf die Eingabe reagieren, laufen.
- Darstellung: Der Browser berechnet das Layout neu und zeichnet.
Als INP zählt ungefähr die langsamste Interaktion eines Besuchs; bei sehr vielen Interaktionen bleiben einzelne Ausreißer außen vor. Gut sind bis 200 ms, über 500 ms gilt als schlecht, jeweils für drei von vier Seitenaufrufen.
INP lässt sich nur bei echten Besuchern messen. Im Labor klickt niemand; dort steht die Total Blocking Time (TBT) dafür: wie lange lange Aufgaben, also Skripte über 50 ms am Stück, den Hauptthread beim Laden blockieren. bytereport wertet sie mit gut bis 200 ms und schlecht über 600 ms.
Worauf es ankommt
- Weniger JavaScript. Was nicht läuft, blockiert nicht, siehe JavaScript.
- Lange Aufgaben teilen. Ein Skript, das 300 ms am Stück rechnet, blockiert jede Eingabe in dieser Zeit. In kleine Schritte geteilt, mit Pausen dazwischen, kann der Browser zwischendurch reagieren.
- Fremde Skripte später laden. Tracking, Chat und Werbung laufen oft genau dann, wenn Besucher zum ersten Mal klicken, siehe Drittanbieter.
- Schlankes HTML. Je mehr Elemente eine Seite hat, desto länger dauert jede Änderung am Layout, siehe Seitengewicht.
- Sofort sichtbare Rückmeldung. Zeig zuerst, dass die Eingabe angekommen ist, etwa einen gedrückten Knopf, und erledige die schwere Arbeit danach.
So verbesserst du ihn
INP ist Sache derjenigen, die die Skripte der Seite schreiben oder einbinden, also deiner Agentur oder deines Entwicklerteams. Im Tab „Performance“ der Chrome-Entwicklertools sehen sie, welche Interaktion langsam ist und welches Skript dabei läuft. Was im Tag-Manager eingebunden ist, prüft, wer ihn verwaltet.