Leistungsoptimierung der Websites und Apps von eBay für eine schnellere Nutzererfahrung
„Speed“ war eine unternehmensweite Initiative von eBay 2019, an der viele Teams entschlossen hatten, die Website und Apps so schnell wie möglich zu gestalten. Tatsächlich verzeichnete eBay pro 100 Millisekunden Verbesserung der Ladezeit der Suchseite einen Anstieg von 0,5% bei der Anzahl der „In den Einkaufswagen“-Artikel.
100ms
Verbesserung der Ladezeit
0,5 %
Steigerung der Anzahl von Artikeln für „In den Einkaufswagen“
Durch die Einführung von Leistungsbudgets (abgeleitet nach einer Wettbewerbsstudie mit dem Bericht zur Nutzererfahrung in Chrome) und der Ausrichtung auf wichtige nutzerorientierte Leistungsmesswerte konnte eBay die Websitegeschwindigkeit erheblich verbessern.
...und die Daten aus dem Bericht zur Nutzererfahrung in Chrome zeigen diese Verbesserungen ebenfalls auf.
Es gibt noch viel zu tun, aber hier sind die bisherigen Erkenntnisse von eBay.
„Kürzel für die Webleistung“
Die Verbesserungen, die eBay vorgenommen hat, waren auf die Reduzierung oder „Kürzungen“ (in Größe und Zeit) verschiedener Entitäten, die an der User Journey beteiligt waren, möglich. In diesem Beitrag werden Themen behandelt, die für die Webentwickler-Community insgesamt relevant sind, und nicht nur eBay-spezifische Themen.
Nutzlast für alle Textressourcen reduzieren
Eine Möglichkeit, Websites schneller zu machen, besteht darin, einfach weniger Code zu laden. eBay reduzierte die Textnutzlast, indem alle ungenutzten und unnötigen Byte an JavaScript-, CSS-, HTML- und JSON-Antworten an Nutzer reduziert wurden. Bisher hat eBay mit jeder neuen Funktion die Nutzlast der Antworten erhöht, ohne dabei ungenutzte Elemente zu bereinigen. Dies summierte sich im Laufe der Zeit und führte zu einem Leistungsengpass. Die meisten Teams haben diese Bereinigungsaktivität aufgeschoben, aber die Einsparung von eBay würde Sie überraschen.
Der „Cut“ ist hier die verschwendeten Byte in der Antwortnutzlast.
Optimierung des kritischen Pfads für „Above the fold“-Inhalte
Nicht jedes Pixel auf dem Bildschirm ist gleich wichtig. Der „Above the fold“-Inhalt ist wichtiger als etwas „Below the fold“ (mit Scrollen sichtbar). iOS, Android, Computer und Webanwendungen wissen das, aber was ist mit den Diensten? Die Dienstarchitektur von eBay hat eine Ebene namens Experience Services, mit der die Front-Ends (plattformspezifische Apps und Webserver) kommunizieren. Diese Ebene wurde speziell dafür konzipiert, ansichts- oder gerätebasiert und nicht entitätsbasiert (Artikel, Nutzer oder Bestellung) zu sein. Anschließend führte eBay das Konzept des kritischen Pfads für Experience Services ein. Wenn eine Anfrage an diese Dienste eingeht, werden die Daten für Inhalte „above the fold“ sofort abgerufen, indem parallel andere Upstream-Dienste aufgerufen werden. Sobald die Daten bereit sind, werden sie sofort geleert. Die Daten „Below the fold“ (mit Scrollen sichtbar) werden später in einem Block mit Lazy Loading gesendet. Das Ergebnis: Nutzende sehen ohne Scrollen schneller Content, der ohne Scrollen sichtbar ist.
Der „Cut“ ist hier die Zeit, die Dienste benötigen, um relevante Inhalte anzuzeigen.
Bildoptimierungen
Bilder verursachen einen der größten Auswirkungen auf Seiten aufgebläht. Auch kleine Optimierungen können große Wirkung haben. eBay hat zwei Optimierungen für Bilder vorgenommen.
Erstens standardisierte eBay für Suchergebnisse auf allen Plattformen, einschließlich iOS, Android und unterstützten Browsern, das WebP-Bildformat. Die Suchergebnisseite ist bei eBay die Seite mit den meisten Bildern. Hier wurde WebP bereits verwendet, jedoch nicht in einem einheitlichen Muster.
Zweitens wurden die Bilder für Einträge von eBay zwar stark optimiert (sowohl in Bezug auf Größe als auch Format), die gleiche Sorgfalt galt nicht für ausgewählte Bilder (z. B. das obere Modul auf der Startseite). eBay hat eine Menge von Hand zusammengestellten Bildern, die mit verschiedenen Tools hochgeladen werden. Bisher galt der Uploader, die Optimierungen vorzunehmen, aber jetzt erzwingt eBay die Regeln in den Tools, sodass alle hochgeladenen Bilder entsprechend optimiert werden.
Der „Cut“ (Cut) hier ist die verschwendete Bildbyte, die an die Nutzer gesendet wurde.
Vorausschauender Prefetch von statischen Assets
Eine Nutzersitzung auf eBay umfasst nicht nur eine Seite. Es ist ein Flow. Der Ablauf kann beispielsweise eine Navigation von der Startseite über eine Suchseite zu einer Artikelseite sein. Warum helfen sich die Seiten im User Flow nicht gegenseitig? Dies entspricht dem vorausschauenden Prefetch, bei dem eine Seite die statischen Inhalte, die für die nächste wahrscheinliche Seite erforderlich sind, vorab abruft.
Wenn ein Nutzer bei einem vorausschauenden Prefetch zur vorhergesagten Seite navigiert, befinden sich die Assets bereits im Browser-Cache. Dies geschieht bei CSS- und JavaScript-Assets, bei denen die URLs im Voraus abgerufen werden können. Dabei ist zu beachten, dass dies nur bei der erstmaligen Navigation hilfreich ist. Bei nachfolgenden Navigationen befinden sich die statischen Inhalte bereits im Cache.
Der „Cut“ ist hier die Netzwerkzeit für statische CSS- und JavaScript-Assets in der ersten Navigation.
Top-Suchergebnisse vorabrufen
Wenn ein Nutzer bei eBay sucht, deuten die Analysedaten von eBay darauf hin, dass er mit hoher Wahrscheinlichkeit zu einem Artikel in den Top 10 der Suchergebnisse navigiert. eBay ruft die Artikel also vorab aus der Suche ab und hält sie bereit, wenn der Nutzer die Website aufruft. Der Vorabruf erfolgt auf zwei Ebenen.
Die erste Ebene erfolgt serverseitig, wobei der Artikeldienst die ersten 10 Elemente in den Suchergebnissen im Cache speichert. Wenn der Nutzer zu einem dieser Artikel wechselt, spart eBay jetzt Verarbeitungszeit auf dem Server. Das serverseitige Caching wird von plattformspezifischen Anwendungen genutzt und global eingeführt.
Die andere Ebene findet im Browsercache statt, der in Australien verfügbar ist. Der Artikel-Prefetch war aufgrund der dynamischen Natur von Elementen eine erweiterte Optimierung. Es gibt aber auch viele Nuancen: Seitenimpressionen, Kapazität, Auktionselemente usw. Weitere Informationen hierzu finden Sie in der Präsentation des Performance Engineering-Meetups auf LinkedIn oder in einem detaillierten Blogpost zu diesem Thema von den eBay-Entwicklern.
Bei dem „Cut“ kann es sich entweder um die Serververarbeitungszeit oder die Netzwerkzeit handeln, je nachdem, wo das Element im Cache gespeichert wird.
Schneller Download von Suchbildern
Wenn auf der Suchergebnisseite eine Suchanfrage auf allgemeiner Ebene gestellt wird, passieren zwei Dinge. Zum einen werden die relevantesten Elemente zurückgegeben, die mit der Abfrage übereinstimmen. Der zweite Schritt besteht darin, die zurückgerufenen Artikel mit zusätzlichen nutzerbezogenen Informationen wie den Versandkosten zu erweitern. eBay sendet jetzt sofort die ersten zehn Artikelbilder in einem Stück an den Browser, sodass die Downloads beginnen können, bevor der Rest des Markups eintrifft. Dadurch werden die Bilder jetzt schneller angezeigt. Diese Änderung wird global für die Webplattform eingeführt.
Der „Cut“ hier ist der Beginn des Downloads für die Bilder aus den Suchergebnissen.
Edge-Caching für Daten zu automatischen Vorschlägen
Wenn Nutzer Buchstaben in das Suchfeld eingeben, werden Vorschläge angezeigt. Diese Vorschläge werden mindestens einen Tag lang für Buchstabenkombinationen nicht geändert. Sie eignen sich ideal, um für maximal 24 Stunden im CDN zwischengespeichert und bereitgestellt zu werden, anstatt Anfragen vollständig an ein Rechenzentrum senden zu müssen. Internationale Märkte profitieren besonders vom CDN-Caching.
Es gab jedoch einen Fehler. eBay hatte einige Personalisierungselemente im Pop-up-Fenster mit Vorschlägen, die nicht effizient im Cache gespeichert werden können. Glücklicherweise war dies kein Problem bei den plattformspezifischen Apps, da die Benutzeroberfläche für Personalisierung und Vorschläge voneinander getrennt sein konnte. Für das Web war die Latenz auf internationalen Märkten wichtiger als der kleine Vorteil der Personalisierung. Damit werden nun von eBay weltweit automatische Vorschläge aus einem CDN-Cache für plattformspezifische Apps und nicht US-amerikanische Märkte für eBay.com bereitgestellt.
Der „Cut“ ist hier die Netzwerklatenz und die Serververarbeitungszeit für automatische Vorschläge.
Edge-Caching für unbekannte Startseitennutzer
Auf der Webplattform ist der Inhalt der Startseite für unbekannte Nutzer für eine bestimmte Region gleich. Dies sind Nutzer, die eBay zum ersten Mal nutzen oder eine neue Sitzung beginnen und daher keine Personalisierung vornehmen. Obwohl die Startseiten-Creatives ständig geändert werden, ist dennoch Platz für das Caching.
eBay hat beschlossen, den nicht erkannten Nutzerinhalt (HTML) für einen kurzen Zeitraum in seinem Edge-Netzwerk (PoPs) im Cache zu speichern. Neue Nutzer können sich jetzt Startseiteninhalte von einem Server in ihrer Nähe statt von einem weit entfernten Rechenzentrum anzeigen lassen. eBay testet diese Funktion derzeit noch in internationalen Märkten, wo sie einen größeren Einfluss haben wird.
Der „Cut“ hier bezieht sich wieder auf die Netzwerklatenz und die Serververarbeitungszeit für unbekannte Nutzer.
Optimierungen für andere Plattformen
Verbesserungen beim Parsen von iOS/Android-Apps
iOS/Android-Apps kommunizieren mit Back-End-Diensten, deren Antwortformat typischerweise JSON ist. Diese JSON-Nutzlasten können groß sein. Anstatt die gesamte JSON-Datei zu parsen, um etwas auf dem Bildschirm zu rendern, führte eBay einen effizienten Parsing-Algorithmus ein, der für Inhalte optimiert, die sofort angezeigt werden müssen.
Nutzer können die Inhalte jetzt schneller sehen. Darüber hinaus beginnt eBay für die Android-App mit der Initialisierung der Suchansicht-Controller, sobald der Nutzer mit der Eingabe in das Suchfeld beginnt (iOS hatte diese Optimierung bereits). Bisher geschah dies nur, nachdem Nutzende auf die Suchschaltfläche geklickt hatten. Nutzer gelangen jetzt schneller zu ihren Suchergebnissen. Der „Cut“ ist die Zeit, die Geräte aufwenden, um relevante Inhalte anzuzeigen.
Verbesserungen der Startzeit von Android-Apps
Dies gilt für die Kaltstartzeit für Android-Apps. Bei einem Kaltstart einer App findet ein Großteil der Initialisierung auf Betriebssystem- und Anwendungsebene statt. Durch die Verkürzung der Initialisierungszeit auf Anwendungsebene sehen Nutzer den Startbildschirm schneller. eBay führte einige Profilerstellungen durch und stellte fest, dass nicht alle Initialisierungen für die Anzeige von Inhalten erforderlich sind und dass einige davon verzögert durchgeführt werden können.
Außerdem stellte eBay fest, dass es einen blockierenden Analyseaufruf eines Drittanbieters gab, der das Rendern auf dem Bildschirm verzögerte. Das Entfernen des blockierenden Aufrufs und die weitere Asynchronität waren bei Kaltstartzeiten hilfreich. Der „Cut“ hier ist die unnötige Startzeit für Android-Apps.
Ergebnisse
Alle Leistungskürzungen, die eBay zusammen vorgenommen hat, trugen zu einer Steigerung bei, und das über einen gewissen Zeitraum. Im Laufe des Jahres liefen die Releases nach und nach. Jede Veröffentlichung wurde um zehn Millisekunden reduziert und erreichte schließlich den Punkt, an dem eBay heute gekommen ist:
Leistung ist eine Funktion und ein Wettbewerbsvorteil. Eine optimierte Nutzererfahrung führt zu mehr Nutzerinteraktionen, mehr Conversions und einem höheren ROI. Im Fall von eBay reichten diese Optimierungen von Aufgaben mit geringem Aufwand bis hin zu einigen fortschrittlichen Ansätzen.
Weitere Informationen findest du auf der Website Speed by Thousand Cuts. In Kürze erhältst du außerdem noch ausführlichere Artikel von eBay-Entwicklern zu ihrer Leistung.