Optimización del rendimiento de los sitios y aplicaciones de Ebay para una Benutzererfahrung más rápida.
Die Geschwindigkeit war a unternehmensweite Initiative für eBay im Jahr 2019, mit vielen Teams entschlossen, die Website und Apps für Benutzer so schnell wie möglich zu machen. Tatsächlich, Für jede Verbesserung der Ladezeit der Suchseite um 100 Millisekunden verzeichnete eBay einen Anstieg der Anzahl "In den Warenkorb" um 0,51 TP1T.
100em
Verbesserte Ladezeit
0,5%
Die Anzahl "In den Warenkorb" wurde erhöht
Durch die Annahme von Leistungsbudgets (abgeleitet nach Durchführung einer Wettbewerbsstudie mit dem Chrome User Experience Report) y un enfoque en métricas clave de rendimiento centradas en el Nutzername, eBay pudo realizar mejoras significativas en la velocidad del sitio.
Verbesserungen der eBay-Geschwindigkeit.
… Und Ihre Daten aus dem Chrome User Experience Report heben diese Verbesserungen ebenfalls hervor.
Chrome User Experience Report-Daten für First Contentful Paint und First Input Delay für eBay.com.
Es liegt noch viel Arbeit vor uns, aber hier sind die bisherigen eBay-Erkenntnisse.
«Cortes» de rendimiento Netz
Die Verbesserungen, die eBay vorgenommen hat, wurden durch die Verkleinerung oder "Kürzung" (in Größe und Zeit) verschiedener Einheiten ermöglicht, die an der Reise eines Benutzers beteiligt sind. Dieser Beitrag behandelt Themen, die für die Webentwickler-Community im Allgemeinen relevant sind, und nicht eBay-spezifische Themen.
Reduzieren Sie die Nutzlast aller Textressourcen
Una forma de hacer que los sitios sean rápidos es simplemente cargar menos código. eBay redujo la carga útil de texto recortando todos los bytes innecesarios y no utilizados de las respuestas de JavaScript, CSS, HTML y JSON que se ofrecen a los usuarios. Anteriormente, con cada nueva función, eBay seguía aumentando la carga útil de sus respuestas, sin limpiar lo que no se usaba. Esto se acumuló con el tiempo y se convirtió en un cuello de botella de rendimiento. Los equipos generalmente postergaban esta actividad de limpieza, pero te sorprendería cuánto ahorró eBay.
Der "Schnitt" hier sind die verschwendeten Bytes in der Antwortnutzlast.
Optimización de la ruta crítica para el Inhalt de la mitad superior de la página
Nicht alle Pixel auf dem Bildschirm sind gleich wichtig. Der Inhalt oberhalb der Falte es ist kritischer als etwas unterhalb der Falte. Native und Webanwendungen sind sich dessen bewusst, aber was ist mit Diensten? Die Servicearchitektur von EBay hat eine Schicht namens
Erleben Sie Dienstleistungen, mit denen die Frontends (native Anwendungen und Webserver) kommunizieren. Diese Ebene ist speziell so konzipiert, dass sie auf Ansichten oder Geräten und nicht auf Entitäten basiert, z. B. auf Artikeln, Benutzern oder Bestellungen. Dann führte eBay das Konzept des kritischen Pfades für Experience Services ein. Wenn eine Anfrage an diese Dienste geht, arbeiten sie daran, die Inhaltsdaten sofort aus der oberen Hälfte der Seite abzurufen und andere Upstream-Dienste parallel aufzurufen. Sobald die Daten fertig sind, werden sie sofort gelöscht. Die Daten am Ende der Seite werden in einem späteren Block gesendet oder faul geladen. Das Ergebnis: Benutzer können Inhalte in der oberen Hälfte der Seite schneller sehen.
Der "Cutoff" ist hier die Zeit, die die Dienste für die Anzeige relevanter Inhalte aufwenden.
Bildoptimierungen
Die Bilder sind einer der größten Mitwirkenden beim Aufblähen von Seiten. Auch kleine Optimierungen sind sehr nützlich. eBay hat zwei Optimierungen für die Bilder vorgenommen.
Zunächst standardisierte eBay das WebP-Bildformat für Suchergebnisse auf allen Plattformen, einschließlich iOS, Android und unterstützte Browser. Die Suchergebnisseite ist die Seite mit den meisten Bildern bei eBay, und sie verwendeten bereits WebP, jedoch nicht in einem konsistenten Muster.
Imágenes WebP que se muestran en Browser compatibles en eBay.com.
Zweitens wurde, obwohl die eBay-Auflistungsbilder stark optimiert sind (sowohl in Größe als auch Format), nicht die gleiche Genauigkeit auf die ausgewählten Bilder angewendet (z. B. das oberste Modul in der
Startseite). eBay hat viele handverlesene Bilder, die über verschiedene Tools hochgeladen werden. Früher waren Optimierungen vom Uploader abhängig, jetzt setzt eBay die Regeln innerhalb der Tools durch, sodass alle hochgeladenen Bilder entsprechend optimiert werden.
Der "Schnitt" hier sind verschwendete Bildbytes, die an Benutzer gesendet werden.
Vorausschauende Vorerfassung von statischen Vermögenswerten
Eine Benutzersitzung bei eBay ist nicht nur eine Seite. Es ist ein Fluss. Der Ablauf kann beispielsweise eine Navigation von der Startseite zu einer Suchseite zu einer Artikelseite sein. Warum helfen sich die Seiten im Fluss nicht gegenseitig? Dies ist die Idee des prädiktiven Prefetch, bei dem eine Seite die statischen Assets vorab abruft, die für die nächste wahrscheinliche Seite erforderlich sind.
Con la captación previa predictiva, cuando un usuario navega a la página prevista, los activos ya están en la Zwischenspeicher von Browser. Esto se hace para los activos de CSS y JavaScript, donde las Url se pueden recuperar con anticipación. Una cosa a tener en cuenta aquí es que solo ayuda en la primera navegación. En navegaciones posteriores, los activos estáticos ya estarán en la caché.
Der "Cutoff" ist hier die Netzwerkzeit für die statischen CSS- und JavaScript-Assets bei der ersten Navigation.
Vorherige Erlangung der besten Suchergebnisse
Wenn ein Benutzer eBay durchsucht, deutet die eBay-Analyse darauf hin, dass der Benutzer höchstwahrscheinlich zu einem Artikel in den Top-10-Suchergebnissen navigiert. EBay holt nun die Artikel aus der Suche und hält sie bereit, wenn der Benutzer sie durchsucht. Die Voraufnahme erfolgt auf zwei Ebenen.
El primer nivel ocurre en el lado del Server, donde el servicio de elementos almacena en caché los 10 elementos principales en los resultados de búsqueda. Cuando el usuario accede a uno de esos artículos, eBay ahora ahorra tiempo de procesamiento en el servidor. El almacenamiento en caché del lado del servidor es aprovechado por aplicaciones nativas y se implementa globalmente.
El otro nivel ocurre en la caché del navegador, que está disponible en Australia. La captación previa de elementos fue una optimización avanzada debido a la naturaleza dinámica de los elementos. También tiene muchos matices: Eindrücke de página, capacidad, artículos de subasta, etc. Puedes aprender más sobre esto en Präsentation des LinkedIn Performance Engineering Meetings, o permanezca atento a una publicación de Blog detallada sobre el tema de los ingenieros de eBay.
Der "Cutoff" kann hier die Serververarbeitungszeit oder die Netzwerkzeit sein, je nachdem, wo das Element gespeichert ist.
Eifriger Download von Suchbildern
Wenn auf der Suchergebnisseite eine Abfrage auf hoher Ebene ausgegeben wird, passieren zwei Dinge. Einer ist der Abruf- / Sortierschritt, bei dem die relevantesten Elemente zurückgegeben werden, die der Abfrage entsprechen. Der zweite Schritt besteht darin, die zurückgerufenen Artikel mit zusätzlichen Informationen zum Benutzerkontext zu erweitern, z. B. Versandkosten. eBay sendet jetzt sofort die ersten 10 Artikelbilder in einem Snippet zusammen mit der Kopfzeile an den Browser, sodass der Download beginnen kann, bevor der Rest des Markups eintrifft. Infolgedessen werden Bilder jetzt schneller angezeigt. Diese Änderung wird global für die Webplattform implementiert.
Der "Cutoff" hier ist die Download-Startzeit für Bilder aus Suchergebnissen.
Edge-Caching für Autosuggestion-Daten
Wenn Benutzer Buchstaben in das Suchfeld eingeben, werden Vorschläge angezeigt. Diese Vorschläge ändern sich für Buchstabenkombinationen mindestens einen Tag lang nicht. Sie sind ideale Kandidaten, um zwischengespeichert und bedient zu werden CDN (für maximal 24 Stunden), anstatt dass Anfragen ein Rechenzentrum erreichen. Internationale Märkte profitieren insbesondere vom CDN-Caching.
Sin embargo, había una trampa. eBay tenía algunos elementos de personalización en la ventana emergente de sugerencias, que no se pueden almacenar en caché de manera eficiente. Afortunadamente, no fue un problema en las aplicaciones nativas, ya que la Benutzeroberfläche para la personalización y las sugerencias se podían separar. Para la web, en los mercados internacionales, la latencia era más importante que el pequeño beneficio de la personalización. Con eso fuera del camino, eBay ahora tiene autosugestiones servidas desde un caché de CDN a nivel mundial para aplicaciones nativas y mercados no estadounidenses para eBay.com.
Der "Cutoff" hier ist die Netzwerklatenz und die Serververarbeitungszeit für automatische Vorschläge.
Edge-Caching für nicht erkannte Homepage-Benutzer
Für die Webplattform ist der Inhalt der Startseite für nicht erkannte Benutzer für eine bestimmte Region identisch. Dies sind Benutzer, die eBay zum ersten Mal verwenden oder eine neue Sitzung starten, sodass keine Personalisierung erfolgt. Obwohl sich die Motive auf der Startseite häufig ändern, ist immer noch Platz für das Caching.
eBay hat beschlossen, nicht erkannte Benutzerinhalte (HTML) in seinem Umkreisnetzwerk zwischenzuspeichern (PoPs) für kurze Zeit. Neue Benutzer können jetzt Homepage-Inhalte von einem nahe gelegenen Server anstatt von einem entfernten Rechenzentrum abrufen. eBay experimentiert immer noch damit auf internationalen Märkten, wo es den größten Einfluss haben wird.
Der "Schnitt" ist hier wiederum sowohl die Netzwerklatenz als auch die Serverdurchsatzzeit für nicht erkannte Benutzer.
Optimierungen für andere Plattformen
Verbesserungen der nativen App-Analyse
Las aplicaciones nativas (iOS y Android) se comunican con los servicios de backend cuyo formato de respuesta suele ser JSON. Estas cargas útiles JSON pueden ser grandes. En lugar de analizar todo el JSON para representar algo en la pantalla, eBay introdujo un Algorithmus de análisis eficiente que optimiza el contenido que debe mostrarse de inmediato.
Benutzer können Inhalte jetzt schneller anzeigen. Für die Android-App beginnt eBay mit der Initialisierung der Suchansichts-Controller, sobald der Benutzer das Suchfeld eingibt (iOS hatte diese Optimierung bereits). Bisher geschah dies erst, nachdem Benutzer auf die Schaltfläche "Suchen" geklickt hatten. Jetzt können Benutzer schneller auf ihre Suchergebnisse zugreifen. Der "Cutoff" ist hier die Zeit, die Geräte damit verbringen, relevante Inhalte anzuzeigen.
Verbesserungen der nativen App-Startzeit
Dies gilt für Neuanfang Zeitoptimierungen für native Anwendungen, insbesondere Android. Wenn eine Anwendung kalt gestartet wird, erfolgt eine große Menge an Initialisierung sowohl auf Betriebssystem- als auch auf Anwendungsebene. Durch Reduzieren der Initialisierungszeit auf Anwendungsebene können Benutzer den Startbildschirm schneller sehen. eBay hat einige Profile erstellt und festgestellt, dass nicht alle Initialisierungen zum Anzeigen von Inhalten erforderlich sind und dass einige träge durchgeführt werden können.
Noch wichtiger ist, dass eBay feststellte, dass ein Analyseanruf eines Drittanbieters blockiert wurde, der die Anzeige auf dem Bildschirm verzögerte. Durch das Entfernen und Blockieren des blockierenden Anrufs konnten die Kaltstartzeiten weiter verbessert werden. Der "Schnitt" hier ist unnötige Startzeit für native Anwendungen.
Schlussfolgerungen
Alle Leistungskürzungen von eBay haben gemeinsam dazu beigetragen, die Nadel zu bewegen, und dies geschah über einen bestimmten Zeitraum. Die Veröffentlichungen wurden im Laufe des Jahres schrittweise eingeführt, wobei jede Veröffentlichung um zehn Millisekunden zurückging und schließlich den Punkt erreichte, an dem eBay jetzt ist:
Die Auswirkungen der Geschwindigkeitsanstrengungen von eBay auf die Feldmetriken im Laufe der Zeit, wie in der Abbildung dargestellt Chrome UX-Berichts-Dashboard.
El rendimiento es una característica y una Wettbewerbsvorteil. Las experiencias optimizadas conducen a una mayor participación del usuario, conversiones y ROI. En el caso de eBay, estas optimizaciones variaron desde cosas que requirieron poco esfuerzo hasta algunas que fueron avanzadas.
Überprüfen Geschwindigkeit pro tausend Schnitte Für weitere Informationen und um in naher Zukunft nach detaillierteren Artikeln von eBay-Ingenieuren über ihre Leistungsarbeit Ausschau zu halten.
