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

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

Amit Kumar
Amit Kumar
Startseite
Saurabh Rajpal
Saurabh Rajpal
X

Das Web und seine Möglichkeiten entwickeln sich in rasantem Tempo. Sie können jetzt umfassende und umfassende Funktionen im Web erstellen, die weitreichende Funktionalitäten nativer Anwendungen bieten.

JavaScript ist ein wesentlicher Faktor für Interaktivität im gesamten Web. Wird es jedoch nicht mit Bedacht eingesetzt, können Interaktionen langsam wirken und die Nutzer den Eindruck erwecken, dass Ihre Website nicht reagiert oder ganz fehlerhaft ist. Glücklicherweise wurde der Messwert Interaction to Next Paint (INP) dazu entwickelt, dieses spezifische Nutzungsproblem zu beheben.

INP misst alle Interaktionen mit einer Seite während ihres Lebenszyklus und erfasst einen einzelnen Wert, der für die Geschwindigkeit einer Website bei der Reaktion auf Nutzereingaben repräsentativ ist. Einfach ausgedrückt: Wenn der INP-Wert einer Seite den Grenzwert für gute Qualität erreicht oder darunter liegt, können alle Interaktionen mit einer Seite als zuverlässige Schnelligkeit angesehen werden.

redBus, eine in Indien ansässige Website für Busbuchungen und ‐tickets, unternahm erhebliche Anstrengungen, um die INP-Website zu verbessern, auch als sie noch als experimenteller Messwert galt. Dank dieser Bemühungen gelang es dem Unternehmen, den Umsatz um 7 % zu steigern. Dies zeigt erneut den Zusammenhang zwischen Leistung im Web und der Gesundheit des Unternehmens. So hat redBus die INP seiner Website verbessert:

Top-Zielvorhaben

Als redBus anfing, die INP seiner Website zu optimieren, verfolgte das Unternehmen drei Ziele:

  1. Verbessern Sie die Nutzererfahrung, indem Sie sich unabhängig von der Netzwerkgeschwindigkeit und den Gerätefunktionen auf die Interaktionslatenz konzentrieren.
  2. Die Website so optimieren, dass Interaktionen möglichst schnell erfolgen
  3. Die Antworten des APIs sollten so leicht wie möglich sein, um eine schnelle Datenübertragung an das Frontend zu gewährleisten.

Der Weg

redBus hat die Interaktionslatenz auf zwei Arten kategorisiert:

  1. Interaktionslatenz, die durch das Blockieren von JavaScript auf dem Client verursacht wird. Wenn Interaktionen übermäßig viel JavaScript verwenden, das den Hauptthread blockiert, verzögert sich das Rendering, was sich auf die INP-Datei einer Seite auswirkt.
  2. Durch API-Aufrufe verursachte Netzwerklatenz. Zwar wird die Netzwerkaktivität nicht von INP gemessen, eine Interaktion, die von einem Aufruf an eine Remote-API abhängt, kann sich in langsameren Netzwerken oder bei Anfragen mit langen Antworten jedoch als langsam anfühlen.

redBus war sich anfangs ziemlich sicher, dass der INP für die Website gut wäre, aber die Daten aus dem Real User Monitoring (RUM) für diesen Messwert beim 95. Perzentil sahen ein anderes Bild.

So hat redBus INP gemessen

redBus nutzte die von Google erstellte web-vitals-JavaScript-Bibliothek, um nicht nur INP, sondern alle wichtigen Messwerte zur Nutzererfahrung auf allen Seiten der Website zu erfassen. Zusätzlich zur web-vitals-JavaScript-Bibliothek nutzte redBus auch ELK für die Analyse von INP-Daten, die am Frontend erfasst wurden.

Allerdings kann sich die Art und Weise, wie Sie die INP Ihrer Website im Feld erfassen, deutlich von der Methode unterscheiden, mit der redBus das Problem angegangen ist. Wir empfehlen Ihnen dringend, den Artikel Langsame Interaktionen vor Ort ermitteln zu lesen, um zu erfahren, wie Sie INP für Ihre Websites am besten erfassen und im Lab reproduzieren, bevor Sie mit der Optimierung von Interaktionen beginnen.

Nachdem redBus ein System zur Erfassung von INP eingerichtet hatte, konnte das Unternehmen die Daten analysieren, um besser zu verstehen, wo die Interaktivität zu langsam ist.

Screenshot des ELK-Protokollierungssystems, das INP-Werte zur Analyse meldet.
Screenshot des Logging-Systems, mit dem redBus die aus dem Feld erfassten INP-Werte analysiert. (Klicken Sie hier, um eine Version des Bildes mit höherer Auflösung anzuzeigen.)

Anwendungsfälle

Wenn Nutzer auf der Website von redBus nach Preisen suchen, können sie das Datum auf der Suchseite ändern, um die Preise für das gewünschte Ziel zu filtern. Die Interaktion zum Ändern des Datums auf dieser Seite dauerte lange und war eine Ursache für einen schlechten INP.

Wenn ein Nutzer durch die Fahrpreise scrollt, werden zusätzliche Fahrpreise von der API per Lazy Loading geladen. Obwohl das Scrollen selbst nicht bei der Messung von INP berücksichtigt wird, plant der Event-Listener scroll selbst eine Menge Arbeit, die im Hauptthread ausgeführt werden muss. Dies führte zu Konflikten im Hauptthread, was die Interaktionslatenz erhöhte und zu einer schlechten INP-Leistung auf der Suchseite führte.

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

So optimierte redBus INP für die Suchseite

Um den INP-Wert der Suchseite zu verbessern, hat redBus verschiedene Optimierungen vorgenommen:

  • Der scroll-Event-Handler wurde entsprungen, um die Häufigkeit zu reduzieren, mit der der Ereignis-Callback in einem bestimmten Zeitraum ausgelöst wird. Durch die Reduzierung der Häufigkeit, mit der ein scroll-Ereignis-Callback ausgeführt wurde, konnte der Hauptthread schneller auf Nutzerinteraktionen auf der Suchseite reagieren.
  • Die resultierenden Renderingarbeiten wurden mithilfe eines requestAnimationFrame-Callbacks priorisiert. requestAnimationFrame teilt dem Browser mit, dass die Arbeit im Callback vor dem nächsten Frame erledigt werden muss.
Screenshot des Leistungsbereichs in den Chrome-Entwicklertools mit der redBus-Website, die Scroll-Ereignis-Callbacks auslöst, die nicht entsprungen sind. Dies führt dazu, dass der Hauptthread blockiert wird.
Vorher: Auf den Ereignis-Callback angewendete Scroll-Handler, die ohne Entprellen ausgelöst werden. Im Hauptthread gibt es eine beträchtliche Anzahl von blockierenden Aufgaben, die Interaktionen verzögern.
Screenshot des Leistungsbereichs in den Chrome-Entwicklertools mit der redBus-Website, die Scroll-Ereignis-Callbacks auslöst, die entprellt werden. Das hat zur Folge, dass der Hauptthread weniger blockiert wird, da die Scroll-Event-Handler viel seltener ausgelöst werden.
Nachher: Scroll-Handler, die mit der Entprallung ausgelöst werden. Callbacks für das Scroll-Ereignis werden seltener ausgelöst, sodass der Hauptthread mehr Möglichkeiten hat, auf Nutzerinteraktionen zu reagieren.

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

  • Von der vorletzten Karte auf der Suchergebnisseite wurden neue Batches abgerufen, um die Nutzerfreundlichkeit und die visuelle Leistung zu verbessern, indem Lazy Loading früher ausgelöst wird.
  • Beim Lazy Loading wurden bei jedem Netzwerkaufruf weniger Ergebnisse abgerufen. Durch die Reduzierung der Abrufe von 30 auf 10 wurde eine Reduzierung der INP-Bereiche von 870 auf 900 auf 350 bis 370 beobachtet.
Das Lazy-Loading-Verhalten, mit dem zusätzliche Fahrpreise beim Scrollen über die API geladen werden. Klicken Sie hier, um eine Version dieses Videos in höherer Auflösung anzusehen.

Durch diese Änderungen wurde zwar die INP der Suchseite erheblich verbessert, es gab jedoch immer noch das Problem, dass das change-Ereignis in den Eingabefeldern der Suchseite eine teure Reducer-Funktion zur Aktualisierung der Benutzeroberfläche aufrufen würde. Dies führte zu einem unnötigen Neurendering der Benutzeroberfläche, was sich auf die INP der Seite ausgewirkt hat.

INP-Werte, die in der Console gemeldet werden, während der Nutzer ein Eingabefeld eingibt. Der resultierende INP-Wert von 344, der in einer Laboreinstellung beobachtet wird, liegt innerhalb der Grenzwerte für „Optimierung erforderlich“. Klicken Sie hier, um eine Version dieses Videos in höherer Auflösung anzusehen.

Um diese Interaktion zu optimieren, hat redBus den Status der Eingabekomponenten lokal verwaltet und nur dann mit dem Redux-Speicher synchronisiert, wenn das blur-Ereignis einer Eingabe ausgelöst wurde. Durch diese Änderung wurde die Anzahl der Re-Renderings reduziert und unerwünschtes Re-Rendering der Benutzeroberfläche vermieden, da der Reducer seltener aufgerufen wurde.

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

Mit dieser Änderung verbesserte sich der INP-Wert der Seite um 72%, was zu einer schnelleren und reibungsloseren Nutzererfahrung führt, mit der Nutzer mit höherer Wahrscheinlichkeit interagieren.

Auswirkungen auf das Geschäft

Der Zusammenhang zwischen der Leistung des Unternehmens und der Seitenleistung ist bekannt. Obwohl 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: insgesamt 7% mehr Umsatz.

Kurz gesagt half INP, sich ein Bild von Laufzeitproblemen auf der redBus-Website zu machen. Mit dem Wissen über mögliche Verbesserungen konnte redBus das Problem beobachten, reproduzieren und anhand dieser wichtigen Informationen Optimierungen vornehmen, die für redBus und das Geschäft vorteilhaft waren.