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

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

Möglicherweise haben Sie auf eine Schaltfläche geklickt und es hat lange gedauert, bis etwas auf dem Bildschirm angezeigt wurde. Das ist eine frustrierende Erfahrung, oder?

Genau darum geht es bei „Interaction to Next Paint“ (INP).

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 Dinge sofort geschehen. Wenn eine Website oder App nicht schnell auf Ihre Aktionen reagiert, werden Sie wahrscheinlich unzufrieden sein und aufgeben. Heutzutage hat niemand mehr Zeit für langsame Apps!

Die Optimierung von INP ist entscheidend für die Bereitstellung eines nahtlosen, angenehmen Benutzererlebnisses, das die Benutzer engagiert und zufrieden hält. Je niedriger der INP, desto höher ist die wahrgenommene Leistung Ihrer Website oder App.

Lassen Sie uns INP eingehend untersuchen und herausfinden, wie Sie es messen können, um Ihre bestehende Punktzahl 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 variieren 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 anfängliche Interaktion des Benutzers mit der Website. Dieser erste Kontakt spiegelt möglicherweise nicht genau das gesamte Benutzererlebnis wider, insbesondere bei Websites, die über einen längeren Zeitraum geöffnet bleiben, wie z. B. Einzelseitenanwendungen.

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 Next Paint (INP)?

INP ist eine Reaktionsmetrik, die sich auf die zwischen Benutzerinteraktionen verstrichene Zeit konzentriert. Es misst, 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 INPSEO-Metrik.

• Verringern 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

Erledigung anderer ausstehender Vorgänge, Neuberechnung des Seitenlayouts und Malen des Seiteninhalts. INPs werden in Millisekunden (ms) gemessen. Ein guter Benchmark liegt bei weniger als 200 ms, alles zwischen diesem und 500 ms gilt als verbesserungswürdig. Eine Latenz von 500 ms oder mehr gilt als schlecht.

Mehrere Variablen können einen 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
• Einblicke in die Seitengeschwindigkeit von Google
• Unsere Website-Speed-Chrome-Erweiterung
• INP-Debugger
• Google Search Console
• Die Web Vitals-Bibliothek

Mithilfe von Tools zum Testen der Website-Geschwindigkeit können Sie den INP-Wert einer Website ermitteln. Diese Art von Anwendung kann Informationen über die Leistung Ihrer Core Web Vitals-Metriken liefern und Hinweise zu deren Optimierung geben.

Google PageSpeed ​​Insights ist ein beliebtes Tool zur Analyse von INP undWebsite-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 INP-Werte (Interaction to Next Paint) und eine höhere Reaktionsfähigkeit:

A. Verbessern Sie die JavaScript-Leistung

JavaScriptist ein zentraler Bestandteil vieler Websites. Es bietet viele interaktive Elemente; Es kann jedoch auch die Geschwindigkeit der Website verlangsamen.

Wenn JavaScript ausgeführt wird, wird es im Hauptthread ausgeführt, der für die Darstellung einer Webseite verantwortlich ist. Wenn der Code ineffizient ist, kann dies dazu führen, dass der Thread stoppt und die Website nicht mehr auf Benutzereingaben reagiert.

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

• JavaScript-Dateien minimierenreduziert die Menge an JavaScript, sodass mehrgeladen 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 als Content Delivery Network bekannte Technologie 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. Codeaufteilung, verzögertes Laden, der Einsatz von Web-Workern und die Vermeidung lang andauernder Vorgänge im Hauptthread sind alles Optionen, um die JavaScript-Verzögerung zu verringern.

B. Verwenden Sie Web Worker

Web Worker sind ein Dienst, der die Ausführung von JavaScript unabhängig vom Hauptthread ermöglicht. Sie sind praktisch, um komplizierte Aufgaben im Hintergrund auszuführen.

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. ZuVerbessern Sie die Reaktionsfähigkeit Ihrer Website, reduzieren Sie die Belastung des Hauptthreads und versuchen Sie, große Vorgänge 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 die Aufteilung langer Aufgaben dazu bei, den „Jank“-Effekt zu minimieren, bei dem Animationen und Übergänge auf der Website aufgrund vonruckeln oder stottern zu einem überlasteten Hauptthread. Indem sichergestellt wird, dass jede Aktivität in kürzerer Zeit abgeschlossen wird, kann die Website dem Benutzer ein nahtloseres visuelles Erlebnis bieten.

D. Priorisieren Sie die Eingabebereitschaft

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

So priorisieren Sie die Eingabebereitschaft und steigern INP:

1. Nicht kritisches JavaScript wird zurückgestellt

Einige JavaScript-Codes sind für das anfängliche Laden der Seite nicht erforderlich und können nach dem Haupt-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. Ereignis-Listener, die nicht aktiv teilnehmen

Ereignis-Listener sind Computerkonstrukte, die bestimmte Ereignisse wie Scrollen und Tippen erkennen. Wenn Sie sie passiv machen, wird der Browser angewiesen, das Warten auf den Abschluss einer bestimmten Funktion zu überspringen und 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 sofortiges Feedback ins Spiel. Diese Strategie bietet Kunden einen sichtbaren Hinweis darauf, dass die Website ihre Anfrage erhalten hat und bearbeitet.

Benutzer müssen sich nicht fragen, ob die Website ihre Eingaben protokolliert hat, wenn sie schnelles Feedback erhalten. Es kann den Eindruck einer schnelleren Leistung erwecken, auch wenn dadurch die Verarbeitungszeit nicht tatsächlich 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 einpräsentieren tolle BenutzererfahrungIm Web kommt es auf eines an: Reaktionsfähigkeit. Die Geschwindigkeit, mit der Ihre Website oder App auf Benutzerereignisse wie Klicks, Tippen und Surfen reagiert, kann darüber entscheiden, ob sie ein angenehmes Erlebnis 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 erscheint alles.

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

Entdecken Sie die schnelle Reaktionsfähigkeit, die durchschnittliche Websites von solchen unterscheidet, die luxuriös schnell und reibungslos erscheinen. Davon hängen sowohl die Zufriedenheit Ihrer Nutzer als auch der Erfolg Ihrer digitalen Erlebnisse ab.

FAQs