Was ist INP (Interaction to Next Paint)? Das Core Web Vital erklärt
- vuetelemetry
- Leitfäden
- 7 Min. Lesezeit
INP hat FID im März 2024 als Core Web Vital abgelöst. Was Interaction to Next Paint misst, die Schwellenwerte good, needs-improvement und poor, warum es strenger als FID ist und wie man einen langsamen INP-Wert behebt.
INP, kurz für Interaction to Next Paint, ist eines von Googles Core Web Vitals, den Metriken, mit denen Google bewertet, wie gut sich eine Seite in der Nutzung anfühlt. INP misst die Reaktionsfähigkeit: Wenn Sie klicken, tippen oder eine Taste drücken, wie lange braucht die Seite, um sichtbar zu reagieren? Es wurde am 12 March 2024 zu einem offiziellen Core Web Vital und ersetzte das ältere First Input Delay (FID).
Der Name beschreibt genau, was gemessen wird. Vom Moment Ihrer Interaktion an misst INP die Zeit, bis das nächste Bild gezeichnet wird, das heißt, bis Sie tatsächlich etwas auf dem Bildschirm sich verändern sehen. Ein niedriger INP bedeutet, dass die Seite fast sofort reagiert; ein hoher INP bedeutet, dass Sie eine Schaltfläche antippen und sie sich einen Moment lang wie festgefroren anfühlt, bevor etwas passiert.
Googles Schwellenwerte, gemessen am 75th percentile der realen Nutzerinteraktionen, sind unkompliziert. Ein INP von 200 milliseconds oder weniger ist Good. Zwischen 200 und 500 milliseconds ist Needs improvement. Über 500 milliseconds ist Poor. Der Teil mit dem 75th percentile ist wichtig: Ihre Seite muss bei den meisten Interaktionen reaktionsschnell sein, nicht nur im Durchschnitt.
FID, die von INP ersetzte Metrik, maß nur die Verzögerung, bevor der Browser mit der Verarbeitung Ihrer ersten Interaktion beginnen konnte, die Eingabeverzögerung, und nur für diese erste. Dadurch war es leicht zu bestehen, während sich eine Seite immer noch träge anfühlte. INP ist strenger, weil es die Interaktionen über den gesamten Besuch hinweg betrachtet und die volle Dauer misst: die Eingabeverzögerung, die Laufzeit Ihrer Event-Handler und die Zeit bis zur Darstellung des nächsten Bildes.
Mit anderen Worten: FID fragte, wie schnell die Seite einmal zu reagieren beginnen konnte. INP fragt, wie schnell die Seite tatsächlich reagiert, jedes Mal. Das entspricht viel eher dem, wie sich Reaktionsfähigkeit für einen Nutzer wirklich anfühlt.
Fast alle INP-Probleme entstehen dadurch, dass der main thread beschäftigt ist. JavaScript läuft auf einem einzigen main thread, und während eine lange Task läuft, kann der Browser weder auf einen Klick reagieren noch ein neues Bild zeichnen. Die üblichen Verursacher sind lang laufende JavaScript-Tasks, schwere Event-Handler, die auf einmal zu viel Arbeit erledigen, große oder komplexe DOM-Aktualisierungen und Frameworks, die mehr neu rendern als nötig.
INP zu beheben bedeutet vor allem, den main thread nicht zu blockieren. Zerlegen Sie lange Tasks in kleinere Teile und geben Sie zwischendurch die Kontrolle an den Browser zurück, damit er Eingaben verarbeiten kann. Verlagern Sie schwere, nicht dringende Arbeit aus der Interaktion heraus, zum Beispiel mit requestIdleCallback oder einem web worker. Halten Sie Event-Handler leicht, verwenden Sie Debounce für rauschende Ereignisse wie input und scroll, und vermeiden Sie es, große synchrone Layout- oder Re-Render-Arbeit als direkte Reaktion auf ein Antippen zu erzwingen.
INP beurteilt man am besten anhand von Felddaten, echten Nutzern auf echten Geräten, die Sie im Chrome User Experience Report und im Core-Web-Vitals-Bericht der Google Search Console sehen können. Zum Debuggen im Labor helfen Ihnen die JavaScript-Bibliothek web-vitals, das Performance-Panel in den Chrome DevTools und Lighthouse, die langsamen Interaktionen zu finden. Auf dieser Website können Sie mit unserem Web-Vitals-Checker Ihre gemessenen Werte eingeben und sofort sehen, ob sie Googles Schwellenwerte bestehen.
Es lohnt sich, den Umfang klarzustellen. Bei INP geht es nur um die Reaktionsfähigkeit. Es ist eines von drei Core Web Vitals, neben Largest Contentful Paint (Laden) und Cumulative Layout Shift (visuelle Stabilität). Eine Seite kann schnell laden und dennoch einen schlechten INP haben, wenn ihr JavaScript den main thread blockiert, sobald die Leute anfangen zu interagieren.
Fazit: INP belohnt Seiten, die während des gesamten Besuchs reaktionsschnell bleiben, nicht nur beim ersten Antippen. Wenn Ihre Website viel JavaScript ausliefert, ist INP das Core Web Vital, das am ehesten Aufmerksamkeit braucht, und die Lösung ist fast immer dieselbe Disziplin: weniger Arbeit auf dem main thread erledigen, und diese in kleineren Teilen.
