Interaction to Next Paint (INP) ist eine neue Kennzahl für die wichtigsten Web Vitals (CWVs), die sich auf die Messung der Reaktionsfähigkeit einer Webseite vom Moment der Interaktion eines Benutzers mit ihr bis zu dem Punkt konzentriert, an dem die visuelle Reaktion gerendert wird.
Diese Metrik ist von entscheidender Bedeutung für das Verständnis und die Verbesserung der Benutzererfahrung (UX) einer Website, da sie in direktem Zusammenhang damit steht, wie schnell eine Seite auf Benutzereingaben reagieren kann.
Google hat INP als Ersatz für First Input Delay (FID) in den CWVs eingeführt, als Teil seiner laufenden Bemühungen, die Web-Performance und UX zu verbessern. Die Ankündigung unterstreicht die Bedeutung von INP bei der Messung der Reaktionsfähigkeit von Webanwendungen und Websites und stellt einen Schritt hin zu einem benutzerzentrierteren Web dar.
In diesem Artikel gehen wir auf die Feinheiten von INP ein und untersuchen seine Bedeutung sowie die Methoden, es für ein reibungsloseres Web-Erlebnis zu optimieren. Egal, ob Sie Webentwickler oder Websitebesitzer sind oder sich einfach für die Web-Performance interessieren, das Wissen und die Tools, die Sie hier finden, sollten Ihnen dabei helfen, die INP-Metrik effektiv zu nutzen.
What Is Interaction to Next Paint?
Interaction to Next Paint (INP) ist die neueste Ergänzung zu Googles wichtigsten Web-Vital -Metriken und misst die Reaktion einer Website oder Webanwendung auf Benutzerinteraktionen.
Es quantifiziert insbesondere die verstrichene Zeit zwischen einer vom Benutzer initiierten Aktion (z. B. Klicken, Tippen oder Tastendruck) und dem Moment, in dem die Seite als Reaktion auf diese Aktion visuell aktualisiert wird. Diese Metrik ist entscheidend für die Bewertung, wie schnell und effektiv eine Website auf Benutzereingaben reagieren kann.
Ein wichtiger Aspekt von INP besteht darin, dass es die Reaktionsfähigkeit während des gesamten Besuchs eines Benutzers auf einer Seite misst, nicht nur während der ersten Interaktion. Dies macht es zu einer umfassenderen Metrik als sein Vorgänger, Erste Eingangsverzögerung (FID) , der nur die Verzögerung bei der Verarbeitung der ersten Eingabe berücksichtigt.
INP ist besonders relevant für Seiten, mit denen über einen längeren Zeitraum interagiert wird, wie z. B. Single-Page-Anwendungen, bei denen es eine genauere Darstellung der gesamten Benutzererfahrung (UX) bietet.
Wie wird die Interaktion mit der nächsten Farbe (INP) gemessen?
Um zu verstehen, wie Interaction to Next Paint (INP) gemessen wird, muss der Prozess in seine Kernkomponenten zerlegt werden. Bei INP geht es nicht nur um die erste Reaktion auf eine Interaktion, sondern um die gesamte Abfolge von der Aktion des Benutzers bis zur visuellen Aktualisierung auf der Seite.
Schritte zur Messung von INP
- Erfassung der Benutzerinteraktion: Die Messung beginnt in dem Moment, in dem ein Benutzer mit der Seite interagiert. Diese Interaktion kann ein Klick, ein Tippen auf einen Touchscreen oder ein Tastendruck auf der Tastatur sein. INP konzentriert sich auf diese spezifischen Arten von Interaktionen, da es sich dabei um direkte und absichtliche Aktionen handelt, die eine Reaktion von der Seite erfordern.
- Eingabeverzögerung : Die nächste Phase der Messung ist die Eingabeverzögerung. Dies ist die Zeit, die vergeht, bis die Seite mit der Verarbeitung der Interaktion beginnt. Während dieser Phase ist der Browser möglicherweise mit anderen Aufgaben beschäftigt, was die Verarbeitung der Benutzereingaben verzögern kann.
- Verarbeitungszeit : Sobald die Eingabe verarbeitet wurde, folgt als nächste Phase die Verarbeitungszeit. Dabei werden die mit der Interaktion verknüpften Event-Handler ausgeführt. Diese Event-Handler sind in der Regel JavaScript-Funktionen, die als Reaktion auf die Aktion des Benutzers ausgeführt werden. Die Verarbeitungszeit kann je nach Komplexität der von diesen Handlern ausgeführten Aufgaben variieren.
- Präsentationsverzögerung: Die nächste Phase ist die Präsentationsverzögerung nach der Verarbeitung der Eingabe. Dies ist die Zeit, die die Seite benötigt, um die visuelle Antwort auf die Interaktion darzustellen. Dazu gehören Aufgaben wie die Neuberechnung des Seitenlayouts, die Durchführung von CSS-Änderungen und die Neudarstellung des Seiteninhalts, um die Interaktion widerzuspiegeln.
- Visuelle Aktualisierung: Der letzte Schritt ist die visuelle Aktualisierung der Seite, die den Höhepunkt des Interaktionsprozesses darstellt. Dabei sieht der Benutzer das Ergebnis seiner Aktion, z. B. das Öffnen eines Menüs, die Anzeige einer Formularübermittlung oder eine andere visuelle Änderung auf der Seite.
- Berechnung des INP: Der Gesamt-INP wird durch die Addition von Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung berechnet. Dies ergibt ein umfassendes Maß für die Zeit von der ersten Interaktion des Benutzers bis zum nächsten Paint, der die visuelle Aktualisierung auf der Seite widerspiegelt.
What Is a Good INP Score?
Um eine zufriedenstellende Benutzererfahrung (UX) zu gewährleisten, sollten Websites eine INP von 200 Millisekunden oder weniger anstreben. Dieser Benchmark gilt für die meisten Benutzer als guter Schwellenwert und zeigt an, dass die Website reagiert und Interaktionen schnell verarbeitet werden.
Bei der Bewertung von INP-Werten ist es wichtig, die Variabilität der Benutzererfahrungen auf verschiedenen Geräten und unter verschiedenen Bedingungen zu berücksichtigen. Ein praktischer Ansatz besteht daher darin, das 75. Perzentil der Seitenladevorgänge zu messen und dabei sowohl mobile als auch Desktop-Geräte zu berücksichtigen. Mit dieser Methode können Sie einen umfassenderen Überblick über die Benutzererfahrung erhalten und sicherstellen, dass die Mehrheit der Benutzer eine reaktionsschnelle Erfahrung erhält.
Ein hoher INP-Score kann die Benutzererfahrung erheblich beeinträchtigen, insbesondere auf Websites mit zahlreichen interaktiven Elementen wie Texteditoren oder Spielen. In diesen Fällen weist ein hoher INP-Score auf ein Risiko einer schlechten Benutzererfahrung aufgrund verzögerter Reaktionen auf Benutzerinteraktionen hin. Umgekehrt deutet ein niedriger INP-Score darauf hin, dass die Website durchgehend reagiert, was zu einer reibungsloseren und angenehmeren Benutzererfahrung beiträgt.
Unterschied zwischen First Input Delay (FID) und Interaction to Next Paint (INP)
Für Webentwickler und Websitebesitzer, die die Benutzererfahrung (UX) optimieren möchten, ist es von entscheidender Bedeutung, den Unterschied zwischen First Input Delay (FID) und Interaction to Next Paint (INP) zu verstehen. Obwohl beide Metriken zur Messung von Interaktivität und Reaktionsfähigkeit konzipiert sind, konzentrieren sie sich auf unterschiedliche Aspekte der Benutzerinteraktion.
Erste Eingangsverzögerung (FID)
Die Verzögerung bei der ersten Eingabe misst die Zeit von der ersten Interaktion eines Benutzers mit einer Seite (z. B. durch Klicken auf einen Link oder Tippen auf eine Schaltfläche) bis zu dem Zeitpunkt, an dem der Browser tatsächlich mit der Verarbeitung von Ereignishandlern als Reaktion auf diese Interaktion beginnen kann.
FID hilft, die UX während der Ladephase einer Seite zu verstehen. Es geht um den ersten Eindruck: wie schnell eine Seite mit der Verarbeitung einer Interaktion beginnen kann, nachdem ein Benutzer zum ersten Mal versucht hat, mit ihr zu interagieren.
Stellen Sie sich beispielsweise einen Benutzer vor, der auf ein Dropdown-Menü klickt, sobald die Seite geladen ist. FID würde die Zeit vom Klick des Benutzers bis zum Erscheinen des Dropdown-Menüs messen. Wenn der Browser mit dem Laden der Seite beschäftigt ist, kann es zu einer spürbaren Verzögerung kommen, was zu einer schlechten UX führt.
Interaktion mit dem nächsten Paint (INP)
Interaction to Next Paint (INP) hingegen ist eine umfassendere Metrik. Sie misst die Latenz aller Benutzerinteraktionen während der Lebensdauer eines Seitenbesuchs, nicht nur des ersten. INP erfasst die gesamte Dauer von der Interaktion des Benutzers mit der Seite bis zur Darstellung der visuellen Antwort dieser Interaktion auf dem Bildschirm. Dazu gehören die Zeit für die Eingabeverzögerung, die Verarbeitung der Interaktion und die Präsentationsverzögerung.
Stellen Sie sich zur Veranschaulichung einen Benutzer vor, der mit verschiedenen Elementen auf einer Webseite interagiert, z. B. in ein Suchfeld tippt, Elemente aus einem Menü auswählt und auf Links klickt. INP würde die Reaktionsfähigkeit jeder dieser Interaktionen messen und so einen umfassenderen Überblick über die allgemeine Interaktivität der Seite während des gesamten Besuchs des Benutzers bieten.
So messen Sie die Interaktion mit dem nächsten Paint (INP)
INP kann nur mit Feldwerkzeugen gemessen werden, da es reale Benutzerinteraktionsdaten erfordert. Zu diesen Werkzeugen gehören:
- PageSpeed Insights : Bietet eine benutzerfreundliche Oberfläche zum Anzeigen von INP-Ergebnissen. PageSpeed Insights bietet den 75. Perzentilwert für die letzten 28 Tage.
- Google BigQuery (CrUX Dashboard) : Bietet einen eher historischen Kontext der INP-Werte. Google misst alle Interaktionen, die echte Chrome-Benutzer mit einer Seite haben, und speichert sie im CrUX-Datensatz.
- Lighthouse Tool : Nützlich zum Debuggen von INP in Echtzeit während der Entwicklung.
Obwohl der CrUX-Datensatz die endgültige Quelle für INP-Metriken ist, ist er hochgradig anonymisiert und bietet weder Echtzeitüberwachung noch detaillierte Filterung. Web-Performance-Berater verlassen sich für detailliertere Einblicke in der Regel auf Real User Monitoring (RUM).
How to Optimize Interaction to Next Paint?
Die Optimierung von Interaction to Next Paint (INP) ist der Schlüssel zur Verbesserung der Reaktionsfähigkeit und des Benutzererlebnisses (UX) einer Website. Hier finden Sie detaillierte Tipps zur Optimierung von INP:
1. Minimieren Sie die CPU-Verarbeitung auf Ihrer Seite
- Asynchrone Codeausführung : Führen Sie einen größeren Teil Ihres Codes asynchron aus, um sicherzustellen, dass der Benutzer eine sofortige Benutzeroberflächenaktualisierung erhält, auch wenn einige Verarbeitungen im Hintergrund noch laufen.
- Website-Code profilieren : Verwenden Sie Tools wie den DevTools-Leistungsprofiler, um zu verstehen, was im Hauptthread geschieht, und Bereiche zu identifizieren, die optimiert werden müssen.
- Überprüfen Sie Skripte von Drittanbietern: Beurteilen Sie, ob Skripte von Drittanbietern die Reaktionsfähigkeit Ihrer Site beeinträchtigen, und konfigurieren oder verschieben Sie sie nach Bedarf.
2. Reduzieren Sie die Eingabeverzögerung
- Teilen Sie die Aufgaben des Hauptthreads auf: Reduzieren und teilen Sie die CPU-Aktivität im Hintergrund des Hauptthreads auf, um die Eingabeverzögerung zu minimieren.
- Metrik „Total Blocking Time“ (TBT): Verwenden Sie diese Metrik in Labordaten, um Hintergrundaktivitäten zu identifizieren, die Benutzerinteraktionen blockieren könnten.
- Code von Drittanbietern optimieren: Wenn Skripte von Drittanbietern Verzögerungen verursachen, prüfen Sie Optionen, um ihre Auswirkungen zu reduzieren oder sie nur bei Bedarf zu laden.
3. Optimieren Sie die Verarbeitungszeit
- Effiziente Codeausführung: Untersuchen Sie, wo der Browser die meiste Zeit verbringt, und optimieren Sie diese Teile Ihrer Anwendung.
- Vermeiden Sie unnötiges Rendering: Stellen Sie in Frameworks wie React sicher, dass Komponenten nicht unnötig gerendert werden.
- Reduzierung des Layoutaufwands: Wenn ein erheblicher Teil der CPU-Aktivität auf die Layoutarbeit zurückzuführen ist, suchen Sie nach Möglichkeiten zur Reduzierung von Layouts und Neuanstrichen.
4. Aktualisieren Sie die Benutzeroberfläche vor umfangreichen Verarbeitungsvorgängen
- Sofortiges Feedback: Geben Sie visuelles Feedback (z. B. ein Spinner), bevor Sie CPU-intensive Aufgaben starten.
- Verwenden Sie Web Worker: Erwägen Sie bei anspruchsvoller JavaScript-Verarbeitung die Verwendung von Web Workern, um Aufgaben außerhalb des Hauptthreads auszuführen.
5. Vermeiden Sie das Blockieren von Dialogen
- Nicht blockierende UI-Elemente : Ersetzen Sie native Warn-, Bestätigungs- und Eingabeaufforderungsdialoge, die den Hauptthread blockieren, durch nicht blockierende UI-Elemente.
6. Reduzieren Sie die Präsentationsverzögerung
- Vereinfachen Sie Seitenaktualisierungen : Wenn die Darstellung von Seiteninhalten langsam ist, konzentrieren Sie sich darauf, zuerst wichtige Inhalte anzuzeigen, um den nächsten Frame schneller bereitzustellen.
- Verwalten Sie in die Warteschlange gestellte Interaktionen: Seien Sie sich bewusst, dass in die Warteschlange gestellte Interaktionen die Präsentationsverzögerung verlängern können, und verwalten Sie sie effizient.
7. Allgemeine Best Practices
- Überwachen Sie die Leistung regelmäßig: Überwachen Sie die Leistung Ihrer Site kontinuierlich mit Tools wie Google PageSpeed Insights, Lighthouse und Real User Monitoring (RUM)-Lösungen.
- Bleiben Sie mit CWVs auf dem Laufenden : Behalten Sie Änderungen bei den wichtigsten Web-Vitalwerten im Auge und passen Sie Ihre Optimierungsstrategien entsprechend an.
Durch die Implementierung dieser Strategien können Sie den INP Ihrer Website deutlich verbessern und so ein reaktionsschnelleres und benutzerfreundlicheres Erlebnis schaffen. Denken Sie daran, dass die Optimierung des INP ein fortlaufender Prozess ist, der regelmäßige Überwachung und Anpassungen basierend auf Benutzerinteraktionsmustern und Website-Updates erfordert.
Abschließende Gedanken
Interaction to Next Paint (INP) ist eine wichtige Kennzahl zur Bewertung der Reaktionsfähigkeit von Webseiten. Sie bietet einen umfassenden Überblick darüber, wie schnell eine Site auf Benutzerinteraktionen reagiert, und übertrifft den Umfang von First Input Delay (FID), indem sie die Latenz aller Interaktionen misst, nicht nur der ersten.
Wir haben besprochen, wie man INP mit Tools wie PageSpeed Insights und Lighthouse misst, und Optimierungsstrategien untersucht, wie etwa die Minimierung der CPU-Verarbeitung und die Reduzierung der Eingabeverzögerung. Diese Schritte sind entscheidend für die Verbesserung der Benutzererfahrung (UX) und der Website-Leistung.
Durch die Optimierung der Site-Performance können Publisher außerdem ihre Werbeeinnahmen steigern. Eine gut optimierte Site ermutigt Besucher schließlich eher dazu, sie mehr als nur einmal zu besuchen. Wenn Sie die Monetarisierung Ihrer Site verbessern möchten, nehmen Sie Kontakt mit uns auf, um mehr darüber zu erfahren, wie wir seit 2015 mehr als 350 Publishern in 60 Ländern geholfen haben, ihre Einnahmen zu steigern.
FAQs
Was bedeutet Benutzerinteraktion?
Benutzerinteraktion bezieht sich auf jede Aktion, die ein Benutzer auf einer Webseite ausführt, z. B. das Klicken auf eine Schaltfläche, das Tippen auf einen Link oder das Eintippen in ein Textfeld. Über diese Interaktionen kommunizieren Benutzer mit einer Website und initiieren eine Antwort oder Änderung auf der Seite. Benutzerinteraktionen sind für die Funktionalität von Webanwendungen von grundlegender Bedeutung, da sie Ereignisse auslösen, die zu dynamischen Änderungen, Inhaltsaktualisierungen oder der Navigation innerhalb der Site führen.
Ist INP eine zentrale Web-Vitals-Kennzahl?
INP wird im März 2024 First Input Delay (FID) als Core Web Vitals-Kennzahl ersetzen. CWVs sind eine Reihe von Kennzahlen, die Google verwendet, um die Benutzererfahrung (UX) einer Webseite zu bewerten, wobei der Schwerpunkt auf Aspekten wie Seitenladezeit, Interaktivität und visueller Stabilität liegt.
Welche Benutzerinteraktionen berücksichtigt INP?
INP berücksichtigt Interaktionen wie Mausklicks, Tippen auf einen Touchscreen und Tastendrücke. Dies sind direkte Aktionen, die Benutzer ausführen, um mit einer Website zu interagieren. Passive Interaktionen wie Hovern oder Scrollen werden bei INP nicht berücksichtigt. Die Metrik konzentriert sich auf aktive Interaktionen, bei denen der Benutzer eine Reaktion von der Website erwartet, und ist daher ein wertvolles Maß für die interaktive Leistung einer Site.
Was sind Cookies?
Cookies sind kleine Datendateien, die beim Besuch von Websites von einem Webbrowser auf dem Gerät eines Benutzers gespeichert werden. Sie werden verwendet, um Informationen über den Benutzer zu speichern, z. B. Anmeldedaten, Einstellungen und den Browserverlauf.
Cookies helfen dabei, das Benutzererlebnis zu personalisieren, Sitzungszustände aufrechtzuerhalten und das Benutzerverhalten für Analyse- und Werbezwecke zu verfolgen. Cookies sind zwar für viele Webfunktionen unverzichtbar, werfen aber auch Datenschutzbedenken auf, was zu Vorschriften hinsichtlich ihrer Verwendung und der Zustimmung der Benutzer führt.
Was ist ein Beispiel für die Interaktion mit Next Paint?
Ein Beispiel für „Interaction to Next Paint“ wäre, wenn ein Benutzer auf einem Formular auf die Schaltfläche „Senden“ klickt und die Zeit misst, die vergeht, bis die Bestätigungsmeldung auf dem Bildschirm erscheint. INP misst die Dauer vom Klick bis zur visuellen Aktualisierung der Bestätigung. Diese Metrik hilft bei der Identifizierung langsamer Interaktionen, was wichtig ist, wenn Sie die Benutzererfahrung Ihrer Site verbessern möchten.