redBus verbesserte Interaction to Next Paint (INP) auf seiner Website und steigerte den Umsatz um 7%

Durch INP-Optimierungen konnte redBus den Umsatz um etwa 7 % steigern

Amit Kumar
Amit Kumar
Startseite
Saurabh Rajpal
Saurabh Rajpal
X

Das Web und seine Funktionen entwickeln sich rasant weiter. Sie können jetzt umfangreiche und voll funktionsfähige Web-Anwendungen erstellen, die in Bezug auf die Funktionen weitgehend mit nativen Anwendungen mithalten können.

JavaScript ist ein wichtiger Treiber für Interaktivität im Web. Wenn es jedoch nicht mit Bedacht verwendet wird, können Interaktionen träge erscheinen und Nutzer haben den Eindruck, dass Ihre Website nicht reagiert oder gar nicht funktioniert. Glücklicherweise wurde der Messwert Interaction to Next Paint (INP) entwickelt, um dieses spezifische Problem der Nutzerfreundlichkeit zu beheben.

Mit INP werden alle Interaktionen mit einer Seite während ihres Lebenszyklus gemessen und ein einzelner Wert erfasst, der die Geschwindigkeit der Reaktion einer Website auf Nutzereingaben repräsentiert. Wenn der INP einer Seite den Grenzwert für eine gute Leistung erreicht oder unterschreitet, sind alle Interaktionen mit der Seite zuverlässig schnell.

redBus, eine indische Website für die Buchung und das Ticketing von Bussen, hat erhebliche Anstrengungen unternommen, um den INP seiner Website zu verbessern, auch als dieser Messwert noch als experimentell galt. Durch diese Maßnahmen konnte der Umsatz um 7 % gesteigert werden. Das verdeutlicht noch einmal die Beziehung zwischen Webleistung und Unternehmensgesundheit. So hat redBus die INP seiner Website verbessert:

Wichtigste Zielvorhaben

Als redBus die INP seiner Website optimieren wollte, hatte das Unternehmen drei Ziele vor Augen:

  1. Bieten Sie Nutzern eine bessere Nutzererfahrung, indem Sie sich auf die Interaktionslatenz konzentrieren, unabhängig von der Netzwerkgeschwindigkeit und den Gerätefunktionen.
  2. Die Website so optimieren, dass Interaktionen möglichst schnell ablaufen.
  3. Die Antworten der API sollten so klein wie möglich sein, um eine schnelle Datenübertragung an das Front-End zu ermöglichen.

Die Reise

redBus hat die Interaktionslatenz auf zwei Arten kategorisiert:

  1. Interaktionslatenz, die durch das Blockieren von JavaScript auf dem Client verursacht wird. Wenn bei Interaktionen zu viel JavaScript verwendet wird, wodurch der Hauptthread blockiert wird, verzögert sich das Rendering. Dies wirkt sich auf den INP einer Seite aus.
  2. Netzwerklatenz aufgrund von API-Aufrufen. Netzwerkaktivitäten werden von INP nicht gemessen. Eine Interaktion, die auf einem Aufruf einer Remote-API basiert, kann in langsameren Netzwerken oder wenn Anfragen zu großen Antworten führen, verzögert erscheinen.

redBus war anfangs ziemlich zuversichtlich, dass die INP für seine Website gut sein würde. Die Daten des Real User Monitoring (RUM) für diesen Messwert im 95. Perzentil erzählten jedoch eine andere Geschichte.

So hat redBus die Anzahl der Impressionen pro 1.000 Impressionen gemessen

redBus nutzte die von Google entwickelte web-vitalsJavaScript-Bibliothek, um nicht nur die Anzahl der Interaktionen, sondern auch alle wichtigen Messwerte für die Nutzerfreundlichkeit auf allen Seiten der Website zu erfassen. Zusätzlich zur web-vitals-JavaScript-Bibliothek nutzte redBus ELK, um INP-Daten zu analysieren, die im Frontend erfasst wurden.

Wie Sie die INP Ihrer Website in der Praxis erfassen, kann sich jedoch stark von der Herangehensweise von redBus unterscheiden. Wir empfehlen Ihnen dringend, sich darüber zu informieren, wie Sie langsame Interaktionen im Feld finden, um zu erfahren, wie Sie INP für Ihre Websites am besten erfassen und anschließend wie Sie sie im Lab reproduzieren, bevor Sie mit der Optimierung von Interaktionen beginnen.

Nachdem redBus ein System zum Erfassen von INP eingerichtet hatte, konnte es die Daten analysieren, um besser nachvollziehen zu können, wo es zu langsamer Interaktivität kam.

Screenshot des ELK-Logging-Systems, in dem INP-Werte zur Analyse erfasst werden
Screenshot des Protokollierungssystems, mit dem redBus die im Außendienst erfassten INP-Werte analysiert. Klicken Sie auf das Bild, um eine Version mit höherer Auflösung zu erhalten.

Anwendungsfälle

Wenn Nutzer auf der redBus-Website nach Preisen suchen, können sie das Datum auf der Suchseite ändern, um ausgewählte Preise für das gewünschte Ziel zu filtern. Das Ändern des Datums auf dieser Seite war langsam und führte zu einem schlechten INP.

Wenn ein Nutzer durch die Preise scrollt, werden zusätzliche Preise aus der API nachgeladen. Das Scrollen selbst wird bei der Messung des INP nicht berücksichtigt, aber der scroll-Ereignislistener selbst plant viele Aufgaben, die im Hauptthread ausgeführt werden müssen. Diese Arbeit führte zu Konflikten im Hauptthread, was die Interaktionslatenz erhöhte und zu einer schlechten INP auf der Suchseite führte.

Das Lazy-Loading-Verhalten, mit dem beim Scrollen zusätzliche Preise aus der API geladen werden. Klicken Sie hier, um eine Version dieses Videos mit höherer Auflösung aufzurufen.

So hat redBus INP für die Suchseite optimiert

Um die INP der Suchseite zu verbessern, hat redBus mehrere Optimierungen vorgenommen:

  • Der Ereignis-Handler scroll wurde entprellt, um die Häufigkeit zu reduzieren, mit der der Ereignis-Callback in einem bestimmten Zeitraum ausgelöst wird. Durch die Verringerung der Häufigkeit, mit der der scroll-Ereignis-Callback ausgeführt wurde, konnte der Hauptthread schneller auf Nutzerinteraktionen auf der Suchseite reagieren.
  • Die resultierenden Rendering-Aufgaben wurden mithilfe eines requestAnimationFrame-Callbacks priorisiert. requestAnimationFrame teilt dem Browser mit, dass die Arbeit im Callback vor dem nächsten Frame abgeschlossen sein muss.
Screenshot des Bereichs „Leistung“ in den Chrome-Entwicklertools, auf dem zu sehen ist, dass die Website von redBus Callbacks für Scroll-Ereignisse auslöst, die nicht entprellt werden. Das führt dazu, dass der Hauptthread blockiert wird.
Vorher: Scroll-Handler werden ausgelöst, ohne dass der Debounce-Effekt auf den Ereignis-Callback angewendet wird. Es gibt eine beträchtliche Anzahl von blockierenden Aufgaben im Hauptthread, was zu Verzögerungen bei Interaktionen führt.
Screenshot des Bereichs „Leistung“ in den Chrome-Entwicklertools, auf dem zu sehen ist, dass auf der redBus-Website Callbacks für Scroll-Ereignisse ausgelöst werden, die debounced sind. Das führt dazu, dass der Hauptthread weniger blockiert wird, da die Scroll-Ereignis-Handler viel seltener ausgelöst werden.
Nachher: Scroll-Handler werden mit Debounce-Funktion ausgelöst. Die Rückrufe für Scroll-Ereignisse werden seltener ausgelöst, sodass der Hauptthread mehr Möglichkeiten hat, auf Nutzerinteraktionen zu reagieren.

Außerdem wurden die folgenden Optimierungen an der Suchergebnisseite vorgenommen:

  • Neue Ergebnispakete wurden auf der vorletzten Karte auf der Suchergebnisseite abgerufen, um die Nutzerfreundlichkeit und visuelle Leistung zu verbessern, indem das Lazy Loading früher ausgelöst wurde.
  • Beim Lazy Loading wurden bei jedem Netzwerkaufruf weniger Ergebnisse abgerufen. Durch die Reduzierung der Abrufe von 30 auf 10 Ergebnisse konnte der INP-Bereich von 870 bis 900 auf 350 bis 370 gesenkt werden.
Das Lazy-Loading-Verhalten, mit dem beim Scrollen zusätzliche Preise aus der API geladen werden. Klicken Sie hier, um eine Version dieses Videos mit höherer Auflösung aufzurufen.

Durch diese Änderungen wurde das INP der Suchseite zwar deutlich verbessert, es blieb jedoch das Problem, dass das Ereignis change in den Eingabefeldern der Suchseite eine teure Reducer-Funktion aufrief, um die Benutzeroberfläche zu aktualisieren. Dies führte zu einem unnötigen Neu-Rendering der Benutzeroberfläche, was sich auf den INP der Seite auswirkte.

INP-Werte, die in der Konsole erfasst werden, während der Nutzer etwas in ein Eingabefeld eingibt. Der daraus resultierende INP-Wert von 344, der in einer Lab-Umgebung beobachtet wurde, liegt unter dem Grenzwert für „Optimierung erforderlich“. Klicken Sie hier, um eine Version dieses Videos mit höherer Auflösung aufzurufen.

Um diese Interaktion zu optimieren, verwaltete redBus den Status der Eingabekomponenten lokal und synchronisierte ihn nur dann mit dem Redux-Store, wenn das Ereignis blur einer Eingabe ausgelöst wurde. Durch diese Änderung wurde die Anzahl der erneuten Renderings reduziert und unerwünschtes erneutes Rendering der Benutzeroberfläche eliminiert, da der Reducer seltener aufgerufen wurde.

Die INP wurde verbessert, da der Reducer bei einer Änderung des Eingabefelds seltener aufgerufen wird. Klicken Sie hier, um eine Version dieses Videos mit höherer Auflösung aufzurufen.

Durch diese Änderung konnte der INP der Seite um 72 % gesteigert werden. Die Nutzerfreundlichkeit wurde verbessert, sodass Nutzer eher mit der Seite interagieren.

Auswirkungen auf das Geschäft

Der Zusammenhang zwischen Unternehmensgesundheit und Seitenleistung ist bekannt. Obwohl der INP im Vergleich zu anderen Core Web Vitals ein relativ neuer Messwert ist, konnte redBus durch die Verbesserung dieses wichtigen nutzerorientierten Leistungsmesswerts bessere Geschäftsergebnisse erzielen. Das Ergebnis war ein Gesamtanstieg des Umsatzes um 7 %.

Kurz gesagt, INP hat dazu beigetragen, ein Bild der Laufzeitleistungsprobleme auf der redBus-Website zu zeichnen. Da redBus wusste, dass Verbesserungen erforderlich waren, konnte das Unternehmen das Problem beobachten, es reproduzieren und diese wichtigen Informationen nutzen, um Optimierungen vorzunehmen, die für redBus und sein Geschäft von Vorteil waren.