Vor zwei Monaten war die Suche nach etwas Alltäglichem auf dem Marktplatz, sagen wir, einem Fahrrad, ein Ratespiel. Die Seitenleiste zeigte jede Kategorie, die wir haben, von oben bis unten, in einem Baum. Du hast eine ausgewählt, gescrollt, bist in eine Sackgasse geraten, zurück-Pfeil, die nächste probiert, und so weiter. Die Seitenleiste beschrieb unseren Katalog, nicht deine Ergebnisse.
Das hat uns gestört. Also haben wir die Seitenleiste auseinandergenommen und neu gebaut. Auf dem Weg dahin haben wir jedem Foto auf der Seite Bytes abgespeckt, den Header beim Scrollen aus dem Weg gehen lassen und eine Handvoll kleiner Browser-Tricks eingebaut, die sich zu einem „irgendwie fühlt sich das hier anders an" aufsummieren. Das ist die Übersicht.
Schnellere Bilder
Jedes Bild läuft durch uns. Nutzer laden ein 4 MB großes JPEG ihres Küchentisches hoch; wir skalieren es für Produktkarten, Produktseiten und Thumbnails und liefern diese Kopien für immer aus. Die Pipeline wurde vor Jahren eingerichtet und funktionierte, aber sie hatte zwei Probleme, die wir ignoriert hatten.
Problem eins: Wir haben jedes Bild in dem Format gespeichert, in dem es hochgeladen wurde. JPEG blieb JPEG, PNG blieb PNG. Wir haben aggressiv skaliert, aber nie in ein kleineres modernes Format neu kodiert, und so ungefähr ein Drittel der Bytes jedes Fotos liegen gelassen.
Problem zwei: Der Browser hatte keine Ahnung, welches Bild auf einer Produktseite das wichtigste war. Das große Hero-Bild, die vier Thumbnails daneben, die Zeile mit empfohlenen Produkten darunter, alle wurden mit derselben Priorität geladen und kämpften um dieselbe Verbindung. Das Hero-Bild erschien, wann immer es ihm gerade passte.
Beides behebbar.
Ein Format für jedes Foto
Wir haben uns beim Hochladen auf ein einziges modernes Bildformat standardisiert. Egal welches Format du hochlädst, JPEG, PNG, animiertes GIF, wir kodieren es in das kleinere neu. Bei animierten GIFs behalten wir das erste Bild; Produktfotos sind keine Animationen, und uns ist ein kleineres Standbild lieber als eine klobige Schleife, nach der niemand gefragt hat.
Dem Browser sagen, worauf es ankommt
Das war der größere Gewinn. Browsern kann man sagen, welches Bild auf einer Seite das wichtigste ist, das „Hero", sodass sie es vor allem anderen laden. Wir haben diese Hinweise an drei Stellen hinzugefügt:
- Das Hero-Bild auf einer Produktseite: höchste Priorität. Die seitlichen Thumbnails ausdrücklich niedriger, damit sie nicht konkurrieren.
- Die erste Kartenzeile auf der Startseite und in den Such-Feeds: hoch. Zeilen unterhalb des sichtbaren Bereichs warten, bis du zu ihnen scrollst.
- Dekorative Bilder (die kleinen Kategorie-Icons usw.): niedrig, und nur bei Bedarf geladen.
The hero downloads first; thumbnails wait their turn.
Ein stiller Bug, den wir nebenbei gefunden haben
Die Galerie auf der Produktseite wählte eine Bildgröße basierend darauf, in welcher Reihenfolge der Server sie gerade zurückgab, nicht darauf, welche Größe sie tatsächlich brauchte. Manchmal war das Hero-Bild ein 300-Pixel-Thumbnail; manchmal war ein Thumbnail die Version in voller Auflösung. Eine frische Anzeige „fühlt" sich jetzt schärfer an, weil die richtige Größe im richtigen Slot landet.
Smartere Suchfilterung
Zurück zum Fahrrad-Beispiel. Eine solche Suche erstreckt sich über viele Kategorien, Erwachsenenräder, Kinderräder, Teile, Zubehör, und die alte Seitenleiste hatte keine Ahnung, welche davon tatsächlich Treffer hatten. Das fandst du heraus, indem du jede einzeln anklicktest. Die neue Seitenleiste zeigt einfach die passende Auswahl, mit Anzahlen.
Dieselbe Idee entfaltet sich für jedes Attribut, das wir kennen. Marke, Farbe, Größe, Rahmengröße, Gewicht, wenn die passenden Ergebnisse Werte dafür haben, erscheint dieses Attribut in der Seitenleiste mit Checkboxen und Anzahlen.
Für numerische Attribute (Preis, Gewicht, Kapazität usw.) haben wir die alten „Min und Max eingeben"-Felder durch einen Schieberegler ersetzt, dessen Grenzen dem tatsächlich in den Ergebnissen vorhandenen Bereich entsprechen. Wenn das günstigste passende Angebot 120 € kostet, beginnt der Schieberegler bei 120 €. Kein Eintippen eines Min-Werts von 10 € mehr, wenn ohnehin kein Ergebnis günstiger als 120 € ist.
Statischer Kategorie-Baum (jeder Knoten im Katalog). Leere Min/Max-Felder für den Preis. Keine Ahnung, welche Kategorien tatsächlich Ergebnisse haben, bis du sie durchgeklickt hast.
Nur Kategorien mit passenden Ergebnissen, sortiert nach Anzahl. Mehrfachauswahl zum Erweitern. Schieberegler begrenzt durch das echte Min/Max der passenden Angebote. Die Seitenleiste ist eine Karte der Ergebnismenge, kein Verzeichnis des Katalogs.
Wenn die Ergebnismenge leer ist
Noch eine Feinheit: Wenn du zu stark filterst und bei null Ergebnissen landest, verschwindet die gesamte Seitenleiste. Es gibt nichts zu verfeinern, Filter-Chips und Checkboxen wären nur visuelles Rauschen. Die Seite reduziert sich auf einen einzigen, zentrierten Button „Alle Filter zurücksetzen". Ein Klick und du bist zurück dort, wo die Seitenleiste helfen kann.
Ein ausgefeilteres Stöber-Gefühl
Fünf kleine Dinge sind in diesem Sprint gelandet, die zusammen das Gefühl der Seite verändern. Keines davon ist ein bahnbrechendes Feature; jedes ist nur ein oder zwei CSS-Deklarationen. Sie sind danach geordnet, wie oft ein typischer Nutzer ihnen begegnet.
Der Header geht aus dem Weg
Die weiße Navigationsleiste oben auf jeder Seite gleitet jetzt nach oben aus dem Bild, wenn du nach unten scrollst, und wieder ins Bild, wenn du nach oben scrollst, das klassische „Header geht mir aus dem Weg, während ich lese"-Muster. Browser, die die zugrunde liegende Funktion nicht unterstützen, halten die Leiste einfach sichtbar; nichts geht kaputt.
Geschmeidigere Karte → Produkt-Übergänge
Klick eine Produktkarte auf der Start- oder Such-Feed an, und ihr Hero-Bild gleitet jetzt sanft an seinen Platz auf der Produktdetailseite, statt des alten harten Schnitts. Titel, Preis und Like-Button der Karte tun dasselbe. Es ist der Unterschied zwischen einer Seite, die „lädt", und einer, die sich „verwandelt".
Überschriften brechen schöner um
Produkttitel, Kartentitel, Abschnittsüberschriften, keine von ihnen lässt jetzt ein einzelnes Wort als Waise in der letzten Zeile zurück. Der Browser balanciert die Zeilenumbrüche für uns aus. Eine CSS-Deklaration, seitenweit angewendet, sofort überall sichtbar, wo eine Überschrift umbricht.
Kein horizontales Ruckeln mehr, wenn Modals öffnen
Vorher: Du öffnest das Teilen-Modal, die Seite ruckt 15 Pixel nach rechts, während die Scrollleiste verschwindet, und alles darunter verschiebt sich. Jetzt: Eine reservierte Rinne hält den Platz frei, egal ob die Scrollleiste da ist oder nicht. Modals öffnen sich, ohne dass die Seite ruckt.
Schnellere Sprachwechsel
Die Datumsformatierung in deiner Sprache wurde früher zusammen mit den Formatierungsdaten für alle anderen unterstützten Sprachen ausgeliefert, etwa 100 KB an Locale-Daten, obwohl du immer nur eine gebraucht hast. Wir laden jetzt nur die Sprache, die du gerade benutzt. Kleineres Bundle, schnellerer First Paint.
Aufräumen unter der Haube
Ein Haufen kleiner Anpassungen, die dir einzeln kaum auffallen würden, die sich aber als sauberere Traces in unseren Performance-Dashboards zeigen. Keine davon hat ein für dich sichtbares Verhalten verändert. Die wichtigsten Zahlen:
Was wir (noch) nicht ausgeliefert haben
Ein paar Punkte wurden begonnen, haben es aber nicht in diesen Sprint geschafft:
- Filterung nach Attributen mit mehreren Werten. Die UI akzeptiert mehrere angehakte Werte pro Attribut (du kannst drei Marken ankreuzen), aber serverseitig wird heute nur einer berücksichtigt. Nächster Sprint.
- Smartere Facetten-Neuberechnung. Aktuell entfernt das Ankreuzen von „ASUS" die anderen Markenoptionen aus der Liste. Die ausgefeilte Version zählt jede Facette neu, ausgenommen ihren eigenen Filter, sodass die Optionen sichtbar bleiben. Machbar; nur der teurere Abfragepfad.
- AVIF-Bilder. Noch kleiner als das, was wir heute ausliefern. Kostet mehr Encoder-Arbeit auf der Serverseite; zurückgehalten, bis wir Benchmarks gemacht haben.
Das war's für diesen Sprint. Der nächste Beitrag sollte die Arbeit behandeln, die wir an geteilten Angeboten von Nutzer zu Nutzer begonnen haben, still und leise das meistgewünschte Feature des letzten Quartals, sobald sie weit genug fortgeschritten ist, um darüber zu sprechen.