Interaction to Next Paint (INP) ist die neu eingeführte Core Web Vitals-Metrik zur Bewertung der interaktiven Reaktionsfähigkeit einer Website. Im Mai 2022 führte Google INP als neue Metrik ein, um die Einschränkungen der Core Web Vitals-Metrik First Input Delay (FID) zu beheben, mit der die Reaktionsfähigkeit von Webseiten gemessen wurde. Im März 2024, nach fast zweijährigen Tests, wurde INP offiziell als stabile Core Web Vital-Metrik zur Bewertung der Reaktionsfähigkeit von Webseiten hinzugefügt und ersetzte damit FID.
In diesem Artikel wird INP im Detail untersucht und beantwortet, warum es FID ersetzt hat, sowie Strategien zur Optimierung von INP, um eine bessere Bewertung zu erhalten und die SEO Ihrer Website zu verbessern.
Zusammenfassung der wichtigsten Konzepte von Interaction to Next Paint (INP)
Im Folgenden finden Sie eine Zusammenfassung der wichtigsten Konzepte, die in diesem Artikel behandelt werden:
Was ist Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) ist eine Metrik von Core Web Vitals, die die Reaktionsfähigkeit einer Webseite auf Benutzerinteraktionen misst. Konkret wird die Zeit zwischen einer Benutzerinteraktion und der Rückmeldung der Website bewertet. Im Folgenden werden die wichtigsten Benutzerinteraktionstypen aufgeführt, die INP berücksichtigt:
- Anklicken einer Maustaste.
- Drücken einer Taste auf einer physischen Tastatur oder einer Bildschirmtastatur.
- Tippen auf einem Touchscreen-Gerät.
Jede Interaktion besteht aus einer Reihe von Ereignissen. Beispielsweise umfassen "Tastendruck"-Interaktionen auf einer Tastatur mehrere Ereignisse, wie z. B. "Taste runter", "Taste drücken" und "Taste hoch". Das längste einzelne Ereignis innerhalb dieser Interaktion bestimmt die Gesamtlatenzzeit. Die Ereignisverzögerung setzt sich aus den folgenden Komponenten zusammen:
- Eingabeverzögerung - die Zeit zwischen dem Zeitpunkt, zu dem der Benutzer die Interaktion auf der Seite einleitet, und dem Zeitpunkt, zu dem die zugehörigen Aktionen oder Ereignis-Callbacks ausgeführt werden.
- Verarbeitungszeit - die Zeit, die die Systeme benötigen, um die Eingabedaten zu verarbeiten und die entsprechenden Operationen auszuführen.
- Präsentationsverzögerung - die Zeit zwischen der Ausführung von Ereignishandlern und der Präsentation einer Antwort durch den Browser für den Benutzer.
Warum hat Google FID durch INP ersetzt?
Die erste Eingabeverzögerung (First Input Delay, FID) misst die Zeit, die der Browser benötigt, um eine vom Benutzer initiierte Interaktion (Klick, Tippen oder Tastendruck) zu verarbeiten. Dies ist zwar eine gute Kennzahl für das Nutzererlebnis, erfasst aber nicht die gesamte Reaktionsfähigkeit der Seite in Bezug auf die Nutzerinteraktionen.
Um dieses Manko zu beheben, hat das Google Chrome Speed Metric Team die Erstellung einer neuen Metrik in Betracht gezogen, die Folgendes erfasst:
- Die Reaktionsfähigkeit bei allen Benutzerinteraktionen, nicht nur bei der ersten
- Die gesamte Dauer jedes Ereignisses in der Interaktion (nicht nur die Verzögerung).
- Gruppieren Sie Ereignisse aus derselben Benutzerinteraktion und definieren Sie ihre Latenz durch die längste Dauer aller Ereignisse in der Interaktion.
- Generieren Sie eine Gesamtbewertung für alle Interaktionen auf einer Webseite während ihres gesamten Lebenszyklus.
Das Ergebnis dieses Überprüfungsprozesses ist Interaction to Next Paint, eine ganzheitlichere, nutzerzentrierte Kennzahl, die die Latenz aller Klick-, Tipp- und Tastaturaktivitäten bewertet, die während des Besuchs eines Nutzers auf einer Website stattfinden. Sie bestimmt, wie reaktionsschnell eine Webseite auf alle Benutzerinteraktionen reagiert.
Wir haben die Unterschiede im Folgenden zusammengefasst.
Wie misst man die Interaktion zum nächsten Bild?
Die Sammlung von Felddaten aus dem Real User Monitoring (RUM) ist der ideale Weg, um INP zu messen, da es die realen Browser-Erfahrungen der Nutzer erfasst. Real User Monitoring verfolgt unauffällig die Live-Aktionen der Nutzer und beobachtet sowohl Menschen als auch Systeme im Hintergrund. Es bietet kontextbezogene Daten, hebt bestimmte Interaktionen hervor, die für INP-Werte verantwortlich sind, und liefert Informationen über Probleme, die bei Tests möglicherweise übersehen werden. Mit RUM-Daten können Sie auch untersuchen, wie Ihre Website auf verschiedenen Geräten und Internetgeschwindigkeiten funktioniert.
Im Folgenden finden Sie einige Tools, die den Chrome User Experience (CrUX)-Bericht nutzen, um den INP-Wert aus einer detaillierten Perspektive der realen Benutzererfahrung zu erhalten.
{{banner-36="/design/banners"}}
WebPageTest
Die folgende Beispielanleitung zeigt Ihnen, wie Sie INP mit WebPageTest messen können:
- Navigieren Sie zu https://webpagetest.org/
- Um den INP zu erhalten, wählen Sie den Web-Vital-Testtyp aus den erweiterten Tests.
- Geben Sie die URL der Webseite ein, die Sie testen möchten. (für dieses Beispiel wurde diese URL verwendet)
- Wählen Sie die gewünschte Testkonfiguration. (die entweder Mobil oder Gerät sein kann)
- Starten Sie den Test und warten Sie ein paar Sekunden, bis die Ergebnisse angezeigt werden.
- Wechseln Sie in den Ansichtsoptionen zur Ansicht Leistungsübersicht. Sie finden INP unter der Metrik "Real-World Usage" aufgereiht mit anderen Core Web Vitals Metriken.
PageSpeed-Insights
Um INP mit dem PageSpeed Insights-Tool zu messen, geben Sie die URL der Website ein und klicken Sie auf die Schaltfläche Analysieren. Sie können auch durch verschiedene Gerätetypen navigieren, um die Ergebnisse anzuzeigen.
Tools, die CrUX nutzen, können zwar INP-Werte liefern und bei der Identifizierung von Interaktionsproblemen helfen, sie können jedoch nicht die genaue Ursache des Problems ermitteln. An dieser Stelle wird eine RUM-Lösung wie Catchpoint Real User Monitoring wichtig. Sie bietet einen vollständigen Einblick in die Reaktionsfähigkeit von Webseiten und Details zu einzelnen Benutzerinteraktionen, so dass Sie INP-Werte bestimmten Interaktionen zuordnen und Bereiche mit Optimierungsbedarf identifizieren können.
Was ist ein guter INP-Wert?
Ein guter Interaction to Next Paint-Wert sorgt für eine reaktionsschnelle und angenehme Nutzererfahrung. Laut Google gilt ein Wert von 200 Millisekunden oder weniger als gut. Es wird empfohlen, das 75. Perzentil der Seitenladezeiten auf Mobil- und Desktop-Geräten zu messen, um sicherzustellen, dass die meisten Nutzer ein positives Erlebnis haben. Ein INP-Wert zwischen 200 und 500 Millisekunden wird als "verbesserungsbedürftig" eingestuft, während ein Wert über 500 Millisekunden als "mangelhaft" gilt. Wenn sich die INP-Werte von "gut" auf "schlecht" verschlechtern, kann sich dies allmählich auf das SEO-Ranking Ihrer Website und die allgemeine Nutzerzufriedenheit auswirken.
Die geschäftlichen Auswirkungen von INP: Eine Fallstudie
RedBus ist eine Online-Plattform für Busfahrkarten mit Sitz in Indien, die auch in anderen Ländern wie Indonesien, Malaysia, Singapur, Peru und Kolumbien tätig ist. Eine von Google durchgeführte Fallstudie behauptet, dass RedBus durch die Optimierung des INP seiner Website eine Umsatzsteigerung von 7 % verzeichnen konnte.
RedBus hat sich vorgenommen, den INP seiner Website zu verbessern, um Folgendes zu erreichen
- Interaktionslatenz unabhängig von der Internetgeschwindigkeit und den Gerätefunktionen.
- Gestalten Sie Interaktionen so schnell wie möglich.
- Stellen Sie sicher, dass die API-Antworten leichtgewichtig sind, damit die Daten schnell an das Frontend übertragen werden können.
Das Unternehmen fand heraus, dass die Interaktion beim Datumswechsel auf der Suchseite langsam war. Ebenso löst der Benutzer, der durch die Tarife scrollt, einen Ereignislistener aus, der mehrere Aufgaben plant und die Interaktionslatenz verringert. Beide Probleme führten zu einem schlechten INP auf der Suchseite.
Das Unternehmen hat einige Schritte unternommen, um diese Probleme auf der Suchseite zu entschärfen. Sie haben den Scroll-Event-Handler entschärft, um die Anzahl der von Event-Listenern ausgelösten Feuersignale zu reduzieren. Außerdem wurden neue Stapel von Ergebnissen auf der vorletzten Karte abgerufen, um das "Lazy Loading" viel früher auszulösen, und die Abrufe wurden von 30 auf 10 Ergebnisse pro Netzwerk reduziert. Dies führte zu einer deutlichen Verringerung der INP-Bereiche von 870 - 900 auf 350 - 370.
Trotz der Verbesserung gab es immer noch Probleme mit den Interaktionen bei der Suche, die hauptsächlich durch das Änderungsereignis in den Eingabefeldern auf der Seite ausgelöst wurden.
Um diese Situation zu optimieren, verfolgte RedBus die Zustände der Eingangskomponenten lokal und synchronisierte sie nur als Reaktion auf das Auslösen von Unschärfeereignissen durch die Eingänge. Dadurch wurde der Umfang der Neudarstellung auf der Benutzeroberfläche erheblich reduziert. Der INP der Seite verbesserte sich um 72 %, was den Benutzern ein nahtloseres Erlebnis verschaffte, und das Unternehmen verzeichnete eine Umsatzsteigerung von insgesamt 7 %.
Wie man INP optimiert
Sie können die folgenden Strategien anwenden, um Ihre INP-Punktzahl zu erhöhen.
{{banner-37="/design/banners"}}
Minimieren Sie lange Eingangsverzögerungen
Die Eingabeverzögerung ist die Zeit zwischen dem Zeitpunkt, an dem der Benutzer zum ersten Mal eine Interaktion auslöst, und dem Zeitpunkt, an dem die entsprechenden Ereignis-Callbacks ausgeführt werden. Obwohl dies die erste Phase des Prozesses von der Interaktion bis zur Antwort ist, möchten Sie sicherstellen, dass dies so schnell wie möglich geschieht.
Einige der Strategien, die Sie anwenden können, um lange Eingabeverzögerungen zu vermeiden, sind:
Vermeiden Sie wiederkehrende Timer
Javascript-Timerfunktionen wie setTimeout und setInterval sind an sich nicht unbedingt schlecht. Wenn Sie sie verwenden müssen, stellen Sie sicher, dass sie nicht wiederkehrend sind und minimieren Sie die Prozesse, die in ihnen laufen, so weit wie möglich, damit sie den Interaktionen nicht im Weg stehen.
Entprellung der Eingangshandler
Sie können Eingabe-Handler entprellen, um die Anzahl der Ereignisrückrufe zu begrenzen, die innerhalb eines bestimmten Zeitraums ausgeführt werden. Dadurch werden Überschneidungen von Interaktionen vermieden, insbesondere wenn Benutzer innerhalb kurzer Zeit mehrere Interaktionen durchführen,
Lange Aufgaben aufteilen
Lange Aufgaben, die den Hauptthread während der Interaktionen blockieren, wirken sich auf die Eingabeverzögerung aus. Stellen Sie sicher, dass die Arbeit in den Aufgaben so gering wie möglich ist, damit der Hauptthread entlastet wird und die Interaktionen schneller ablaufen.
Optimieren von Ereignisrückrufen
Sie müssen sicherstellen, dass die als Reaktion auf eine Benutzerinteraktion ausgelösten Ereignis-Callbacks schnell ausgeführt werden. Der Ereignis-Callback sollte so wenig Arbeit wie möglich verrichten. Dies lässt sich dadurch erreichen, dass der Hauptthread die Ausführung einer Aufgabe vorübergehend unterbricht und andere Aufgaben laufen lässt.
Außerdem können Sie die Arbeit mit Ereignis-Callbacks in separate Aufgaben aufteilen, um zu vermeiden, dass lange Aufgaben den Hauptthread blockieren. Die Funktion setTimeout ist eine Möglichkeit, dies zu tun, da sie den Callback in einer neuen Aufgabe ausführt.
Setzen Sie Prioritäten bei der Rendering-Arbeit, so dass Ereignisaufrufe nur die wesentliche Logik für die visuellen Aktualisierungen des nächsten Frames ausführen und andere Aufgaben aufschieben. Dies hält die Rückrufe gering und verbessert die Rendering-Zeit.
Verzögerung der Präsentation verringern
Die Darstellungsverzögerung ist der Zeitraum zwischen dem Ende der Ausführung der Ereignisaufrufe und dem Zeitpunkt, an dem der Browser das nächste Bild zeichnet. Um Frame-Verzögerungen zu vermeiden, sollte die DOM-Größe so gering wie möglich gehalten werden. Große DOM-Größen benötigen in der Regel mehr Zeit zum Rendern und können die Darstellung verlangsamen. Sie können HTML auch mithilfe der CSS-Eigenschaft content-visibility (Sichtbarkeit des Inhalts) verzögert rendern. Dies führt zu einer geringeren Rendering-Zeit und verbessert den INP.
{{banner-16="/design/banners"}}
Schlussfolgerungen
Interaction to Next Paint ist die neueste Ergänzung zu den Core Web Vitals und ersetzt First Input Delay. Im Gegensatz zu FID, das nur die Verzögerung der ersten Eingabe misst, bietet INP eine umfassende Bewertung des gesamten Nutzererlebnisses, indem die Reaktionsfähigkeit aller Interaktionen während des gesamten Besuchs eines Nutzers auf einer Seite bewertet wird.
Diese Verschiebung macht INP einzigartig und zu einer zuverlässigeren Metrik für das Verständnis und die Optimierung der Webleistung. Webentwickler können die INP-Optimierung fortlaufend überwachen und iterieren, um Verbesserungsbereiche besser zu identifizieren und letztlich ihre Gesamtleistung und ihr SEO-Ranking zu verbessern.
