Mithilfe von INP-Optimierungen konnte redBus den Umsatz um etwa 7 % steigern
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:
- Verbessern Sie die Nutzererfahrung, indem Sie sich unabhängig von der Netzwerkgeschwindigkeit und den Gerätefunktionen auf die Interaktionslatenz konzentrieren.
- Die Website so optimieren, dass Interaktionen möglichst schnell erfolgen
- 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:
- 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.
- 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.](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-elk-log-c6a6705d23588.png?authuser=6&hl=de)
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.
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 einscroll
-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.](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-59051431069ff.jpg?authuser=6&hl=de)
![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.](https://web.developers.google.cn/static/case-studies/redbus-inp/image/a-screenshot-the-perform-3a78c8f47d6e1.jpg?authuser=6&hl=de)
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.
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.
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.
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.