Interaktion mit der nächsten Farbe: Was ist das und wie wird es durchgeführt?

Zuletzt aktualisiert am 02

Haben Sie jemals eine langsame und nicht reagierende Website oder App erlebt?

Vielleicht haben Sie auf einen Knopf geklickt und es hat lange gedauert, bis etwas auf dem Bildschirm erschien. Das ist frustrierend, nicht wahr?

Genau das ist es“Interaktion mit Next Paint” (INP) ist ungefähr.

Interaction to Next Paint (INP) ist eine neue Kennzahl, die Google verwendet, um zu bewerten, wie schnell Ihre Website auf Benutzereingaben reagiert. Am 12. März 2024 wurde es zu einem der Core Web Vitals-Kriterien, die sich auf das Google-Ranking auswirken.

Warum ist das wichtig?

Im heutigen digitalen Zeitalter erwarten die Menschen, dass alles sofort passiert. Reagiert eine Website oder App nicht umgehend auf Ihre Aktionen, werden Sie wahrscheinlich unzufrieden sein und sie nicht mehr nutzen. Niemand hat heutzutage Zeit für langsame Apps!

Die Optimierung des INP ist entscheidend für ein reibungsloses und angenehmes Nutzererlebnis, das die Nutzerbindung und -zufriedenheit fördert. Je niedriger der INP-Wert, desto höher die wahrgenommene Leistung Ihrer Website oder App.

Lassen Sie uns den INP genauer betrachten und herausfinden, wie Sie ihn messen können, um Ihren bestehenden Wert zu verbessern.

Was ist die Interaktion mit Next Paint (INP)?

Interaction to Next Paint (INP) ist eine Webleistungsmetrik, die die Zeit zwischen einer Benutzerinteraktion (z. B. Klicken, Tippen oder Scrollen) und dem nächsten Mal, wenn Pixel als Ergebnis dieser Interaktion auf den Bildschirm gemalt werden, zählt.

Vereinfacht ausgedrückt misst INP, wie schnell eine Webseite oder Anwendung sichtbar auf Benutzerinteraktionen reagiert. Eine niedrigere INP-Zahl weist auf ein reaktionsschnelleres Erlebnis hin, wohingegen ein höherer INP-Wert auf eine spürbare Verzögerung zwischen der Aktion des Benutzers und der visuellen Aktualisierung auf dem Bildschirm hinweist.

Für die meisten Benutzerinteraktionen liegt der empfohlene INP-Wert unter 200 Millisekunden (ms). Ein INP-Wert von mehr als 300 ms gilt als schlecht und wird von Benutzern als langsam empfunden

Interaktion mit Next Paint als zentrales Web-Vital

Die Interaktion mit Next Paint wurde am 12. März 2024 als eine der drei Google Core Web Vitals-Metriken eingeführt. Sie ersetzte die bisherige Metrik „First Input Delay“.

Als zentrale Messgröße für Web Vitals kann eine schlechte Interaktion mit Next Paint Ihr Google-Suchranking beeinflussen.

Wie unterscheidet sich die Interaktion mit der nächsten Farbe von der ersten Eingabeverzögerung?

INP ist das Nachfolgemaß des First Input Delay (FID). Bei beiden handelt es sich um Reaktionsmetriken.

FID und INP unterscheiden sich auf zwei Arten:

• FID misst nur die erste Verarbeitungsverzögerung, während INP die gesamte Zeitspanne zwischen Benutzereingabe und UI-Aktualisierung misst.
• FID zählt lediglich die erste Benutzerinteraktion auf einer Seite, INP berücksichtigt jedoch (ungefähr) die größte Latenz.

First Input Delay schätzt, wie lange es dauert, bis der Browser mit der Verarbeitung von Benutzereingaben beginnt. Der tatsächliche Zeitaufwand für die Reaktion auf Ereignisse oder die Änderung der Benutzeroberfläche ist nicht enthalten.

Wie der Name schon sagt, analysiert FID nur die erste Interaktion des Nutzers mit der Website. Dieser erste Kontakt spiegelt möglicherweise nicht die gesamte Nutzererfahrung wider, insbesondere bei Websites, die über einen längeren Zeitraum geöffnet bleiben, wie beispielsweise Single-Page-Anwendungen.

Bei der Interaktion mit Next Paint wird normalerweise die schlechteste Eingabelatenz auf der Seite ermittelt. Wenn es jedoch viele Benutzerbegegnungen gibt, werden Ausreißer verworfen und Google wertet das 98. Perzentil für die Interaktionsverzögerung aus.

Wenn also der INP einer Seite 250 Millisekunden beträgt, hatten 2 % der Benutzerinteraktionen eine höhere Latenz.

Wie funktioniert die Interaktion mit dem nächsten Bild (INP)?

INP ist eine Kennzahl für die Reaktionsfähigkeit, die die Zeitspanne zwischen Nutzerinteraktionen misst. Sie gibt an, wie schnell ein Webseitenelement reagiert, wenn eine bestimmte Aktion darauf ausgeführt wird.

So funktioniert INP:

• Ein Benutzer interagiert mit einer Webseite, indem er auf eine Schaltfläche klickt.
• Der Browser fordert neue Inhalte vom Webserver an.
• Der Webserver liefert neue Inhalte an den Browser.
• Der Browser zeigt den neuen Inhalt auf der Seite an.
• Der Browser berechnet die Zeit, die zum Erstellen des neuen Inhalts erforderlich ist, und meldet sie als INP-Score.

Eine niedrige INP-Bewertung weist darauf hin, dass die Seite äußerst reaktionsschnell auf Benutzereingaben reagiert. Als Teil von Core Web Vitals ist INP aus folgenden Gründen von Bedeutung:

• Das Benutzererlebnis wurde verbessert: Ein hoher INP-Score weist darauf hin, dass Besucher lange warten müssen, bis die Webseite auf ihre Aktivitäten reagiert, was ärgerlich sein kann.

• SEO (Suchmaschinenoptimierung): INP und andere Core Web Vitals sind Teil der Page-Experience-Signale von Google, die das Ranking einer Website auf den Suchergebnisseiten beeinflussen. Dies unterstreicht die Bedeutung des INP SEO-Metrik.

• Senken Sie die Absprungrate: Langsame Ladezeiten können dazu führen, dass Kunden die Seite verlassen, was sich negativ auf den Gewinn Ihres Unternehmens auswirkt.

Wie wird INP gemessen?

INP überwacht die Zeit, die zwischen Benutzereingaben wie Klicks und Tastenanschlägen und dem nächsten UI-Update vergeht. Diese Verzögerung besteht aus drei Komponenten:

A. Eingabeverzögerung

Warten auf Hintergrundvorgänge auf der Website, um die Ausführung des Event-Handlers zu verhindern.

B. Bearbeitungszeit

Ausführen von Event-Handlern in JavaScript.

C. Präsentationsverzögerung

Die Verarbeitung anderer ausstehender Operationen, die Neuberechnung des Seitenlayouts und das Rendern des Seiteninhalts werden durchgeführt. Die Eingabezeiten (INPs) werden in Millisekunden (ms) gemessen. Ein guter Richtwert liegt unter 200 ms, Werte zwischen 200 ms und 500 ms gelten als verbesserungsbedürftig. Eine Latenz von 500 ms oder mehr wird als schlecht angesehen.

Mehrere Variablen können den INP-Wert beeinflussen, darunter die Größe und Komplexität einer Webseite sowie die Anzahl der geladenen JavaScript- und CSS-Dateien.

Sie können viele Tools verwenden, um die Interaktion mit Next Paint zu bewerten, wie zum Beispiel:

• Website-Geschwindigkeitstest von DebugBear
• Google Page Speed ​​Insights
• Unsere Site Speed ​​Chrome-Erweiterung
• INP-Debugger
• Google Search Console
• Die Web Vitals-Bibliothek

Tools zur Website-Geschwindigkeitsmessung helfen Ihnen, den INP-Wert einer Website zu ermitteln. Solche Anwendungen liefern Informationen über die Leistung Ihrer Core Web Vitals-Kennzahlen und geben Hinweise zu deren Optimierung.

Google PageSpeed ​​Insights ist ein beliebtes Tool zur Analyse von INP und Website-Leistung. Dabei wird ein Standort bewertet und Empfehlungen für bewährte Vorgehensweisen ausgesprochen. Sie können auch untersuchen, wie schnell Ihre Website auf Mobil- und Desktop-Geräten lädt.

PageSpeed ​​Insights präsentiert zwei Arten von Erkenntnissen. Im oberen Teil werden die Core Web Vitals-Metriken einer Website aus dem Chrome UX-Bericht angezeigt, einer Sammlung realer Leistungsmetriken von Chrome-Benutzern.

Die im folgenden Bericht angezeigten Werte stammen aus einer kontrollierten Laborumgebung, die Google Lighthouse verwendet. Diese Daten können verwendet werden, um neue Funktionen zu testen, bevor sie live gehen.

Wenn die INP-Daten der Site nicht verfügbar sind, sehen Sie sich die Gesamtblockierungszeit (TBT) an. Diese Metrik bewertet eine neue Form der Reaktionsfähigkeit. Es konzentriert sich darauf, wie lange eine Website beim Laden nicht auf Benutzerinteraktionen reagieren kann.

Unten finden Sie Ideen zur Verbesserung der Core Web Vitals-Metriken:

Wie kann die Interaktion mit Next Paint (INP) optimiert werden?

Um INP zu optimieren, möchten Sie die To-Do-Liste für den Hauptthread so weit wie möglich vereinfachen und priorisieren. Hier sind einige wichtige Strategien und Möglichkeiten zur Optimierung für verbesserte Interaction to Next Paint (INP)-Werte und eine Erhöhung der Reaktionsfähigkeit:

A. Verbessern Sie die JavaScript-Leistung

JavaScript ist ein wichtiger Bestandteil vieler Websites. Es bietet viele interaktive Elemente; allerdings kann es auch die Ladegeschwindigkeit der Website verlangsamen.

JavaScript wird im Hauptthread ausgeführt, der für das Rendern der Webseite zuständig ist. Ineffizienter Code kann dazu führen, dass der Thread blockiert wird und die Webseite nicht mehr auf Benutzereingaben reagiert.

Um die Reaktionsfähigkeit zu verbessern, optimieren Sie Ihr JavaScript. Sie können dies erreichen, indem Sie:

• JavaScript-Dateien minimieren reduziert die Menge an JavaScript, wodurch mehr geladen werden kann schnell.

• Aktivieren Sie die GZip-Komprimierung. Eine weitere gängige Methode zum Komprimieren von Website-Dateien und -Daten.

• Verwendung eines JavaScript-Frameworks. Dieses Tool kann Ihnen helfen, Ihren JavaScript-Code zu organisieren und effizienter zu gestalten. AngularJS und jQuery sind bekannte Beispiele.

• Verwenden von CDN. Diese Technologie, bekannt als Content Delivery Network (CDN), verteilt Ihre JavaScript-Dateien von Servern in der Nähe Ihrer Zielgruppe, was zu schnelleren Ladezeiten führt.

Ineffizientes JavaScript kann den Hauptthread blockieren und so zu Verzögerungen beim Rendern führen. Code-Splitting, Lazy Loading, der Einsatz von Web Workern und das Vermeiden langlaufender Operationen im Hauptthread sind Möglichkeiten, JavaScript-Verzögerungen zu reduzieren.

B. Verwenden Sie Web Worker

Web Worker sind ein Dienst, der es JavaScript ermöglicht, unabhängig vom Hauptthread ausgeführt zu werden. Sie eignen sich gut für die Ausführung komplexer Aufgaben im Hintergrund.

Angenommen, Sie haben eine WordPress-Website voller Fotos, Videos und Daten. Web-Worker verlagern diese teuren JavaScript-Vorgänge möglicherweise in einen Hintergrundthread und verhindern so, dass Ihre Schnittstelle ins Stocken gerät.

Eine andere Möglichkeit, zu verhindern, dass der Hauptthread ins Stocken gerät, besteht darin, große JavaScript-Jobs in kleinere aufzuteilen.

C. Lange Aufgaben aufteilen

Durch die Aufteilung großer Aufgaben kann der Webbrowser sie jeweils in kleineren Teilen bearbeiten. Dadurch steht dem Haupt-Thread die Möglichkeit zur Ausführung wichtigerer Aufgaben zur Verfügung.

Wie Sie wissen, blockieren langwierige Aufgaben den Hauptthread und verhindern so, dass der Browser Interaktionsereignisse ausführen kann. Zu Verbessern Sie die Reaktionsfähigkeit Ihrer Website, die Belastung des Hauptthreads verringern und versuchen, große Operationen aufzuteilen.

Durch die Aufteilung großer Aktivitäten in kleinere Teile kann der Hauptthread andere Aufgaben ausführen und schneller auf Benutzerinteraktionen reagieren.

Darüber hinaus trägt das Aufteilen langer Aufgaben dazu bei, den „Wichsen„Effekt“, bei dem Animationen und Übergänge auf der Website ruckelig oder stockend werden aufgrund um einen überlasteten Hauptthread zu vermeiden. Indem sichergestellt wird, dass jede Aktivität in kürzerer Zeit abgeschlossen wird, kann die Website dem Benutzer ein reibungsloseres visuelles Erlebnis bieten.

D. Priorisieren Sie die Eingabebereitschaft

Unter Eingabebereitschaft versteht man die Fähigkeit einer Webseite, auf Benutzerinteraktionen zu reagieren. Wenn dies nicht der Fall ist, bedeutet dies normalerweise, dass der Hauptthread des Browsers mit anderen Aufgaben beschäftigt ist.

So priorisieren Sie die Eingabebereitschaft und steigern den INP:

1. Nicht kritisches JavaScript wird zurückgestellt

Ein Teil des JavaScript-Codes wird für das erstmalige Laden der Seite nicht benötigt und kann nach dem Hauptteil ausgeführt werden. Inhalt. Dadurch kann der Hauptthread Benutzerinteraktionen priorisieren und die allgemeine Reaktionsfähigkeit der Seite erhöhen.

2. Drosselung

Diese Strategie bestimmt die Häufigkeit, mit der eine Funktion ausgeführt wird. Wenn ein Benutzer beispielsweise nach unten scrollt, kann derselbe Code Hunderte Male pro Sekunde ausgeführt werden. Durch die Drosselung kann es nur etwa einmal pro Millisekunde ausgeführt werden, unabhängig davon, wie oft das Ereignis ausgelöst wird. 

3. Entprellen

Dadurch wird verhindert, dass eine Funktion erneut ausgeführt wird, bis eine bestimmte Zeitspanne verstrichen ist. Wenn Benutzer beispielsweise die Größe ihres Browserfensters ändern, kann dieses Ereignis den gleichen Vorgang mehrmals auslösen. Entprellen kann verwendet werden, um die Ausführung zu verzögern, bis der Benutzer die Größenänderung für einen vorgegebenen Zeitraum stoppt.

4. Zuhörer von Ereignissen, die nicht aktiv teilnehmen

Event-Listener sind Computerstrukturen, die bestimmte Ereignisse wie Scrollen und Tippen erkennen. Wenn man sie als passiv deklariert, weist man den Browser an, nicht auf den Abschluss einer bestimmten Funktion zu warten, sondern stattdessen mit anderen Aktivitäten fortzufahren.

e. Geben Sie sofortiges Feedback

Bestimmte Aktivitäten, wie das Ausfüllen eines Formulars mit mehreren Dateneingaben, können zu erheblichen Antwortverzögerungen führen.

Hier kommt das sofortige Feedback ins Spiel. Diese Strategie gibt Kunden einen sichtbaren Hinweis darauf, dass die Website ihre Anfrage erhalten hat und bearbeitet.

Nutzer müssen sich nicht fragen, ob die Website ihre Eingaben protokolliert hat, wenn sie schnelles Feedback erhalten. Dies kann den Eindruck einer schnelleren Performance erwecken, selbst wenn die Verarbeitungszeit tatsächlich nicht verkürzt wird.

Schauen Sie sich diese Beispiele für schnelle Feedback-Hinweise an:

1. Ladeanzeigen

Zeigen Sie einen Spinner oder einen Fortschrittsbalken an, wenn ein Prozess ausgeführt wird, insbesondere beim Präsentieren von Daten oder beim Wechseln zu einer neuen Seite.

2. Popup-Bestätigungsmeldungen

Es empfiehlt sich, eine Meldung anzuzeigen, die bestätigt, dass ein Vorgang, z. B. das Hinzufügen eines Artikels zu einem Warenkorb, erfolgreich abgeschlossen wurde.

3. Formularfeldvalidierung

Wenn ein Benutzer beispielsweise eine falsch formatierte E-Mail-Adresse eingibt, zeigen Sie sofort eine Fehlermeldung an, anstatt zu warten, bis das Formular gesendet wird.

Fazit

Am Ende des Tages präsentierte ich a tolle Benutzererfahrung Im Web kommt es auf eines an: Reaktionsfähigkeit. Die Geschwindigkeit, mit der Ihre Website oder App auf Nutzeraktionen wie Klicks, Tippen und das Surfen reagiert, entscheidet darüber, ob die Nutzererfahrung angenehm oder frustrierend langsam ist.

Deshalb ist die Optimierung für eine schnelle Interaction to Next Paint (INP)-Zeit so wichtig. INP überwacht die wichtigen Minuten zwischen der Interaktion einer Person mit Ihrer Website und dem Erhalt der visuellen Bestätigung auf ihrem Bildschirm. Je niedriger der INP, desto schneller und reaktionsschneller scheint alles zu sein.

Also machen Sie weiter und nutzen Sie die Leistung von optimiertem INP!

Entdecken Sie die schnelle Reaktionszeit, die durchschnittliche Websites von solchen unterscheidet, die besonders schnell und flüssig laufen. Davon hängen sowohl die Zufriedenheit Ihrer Nutzer als auch der Erfolg Ihrer digitalen Angebote ab.

Häufig gestellte Fragen