Viru zwee Méint war et e Roden, am Marketplace no eppes Alldeeglechem ze sichen, zum Beispill no engem Vëlo. D'Säiteleescht huet all Kategorie gewisen, déi mir hunn, vu uewen no ënnen, an engem Bam. Dir hutt eng ausgewielt, gescrollt, op eng Sakgaass gestouss, zréckgepfeilt, déi nächst probéiert, an dat erëm a erëm. D'Säiteleescht huet eise Katalog beschriwwen, net Är Resultater.
Dat huet eis gestéiert. Also hu mir d'Säiteleescht ausernee geholl an nei opgebaut. Ënnerwee hu mir d'Bytes vun all Foto op der Säit reduzéiert, den Header sech wärend dem Scrollen aus dem Wee maache gelooss, an e puer kleng Browser-Trickelcher derbäigeworf, déi sech zesummen zu "hei fillt eppes sech einfach anescht un" opaddéieren. Dat ass den Iwwerbléck.
Méi séier Biller
All Bild geet duerch eis. D'Benotzer luede en 4 MB groussen JPEG vun hirem Kichendësch erop; mir passen et un fir Produktkaarten, Produktsäiten an Thumbnails, a stelle déi Kopien fir ëmmer bereet. D'Pipeline gouf viru Joeren opgesat an se huet funktionéiert, mä se hat zwee Problemer, déi mir ignoréiert hunn.
Problem eent: mir hunn all Bild am Format behalen, an deem et eropgelueden gouf. JPEG ass JPEG bliwwen, PNG ass PNG bliwwen. Mir hunn aggressiv ugepasst, mä mir hu se ni an e méi kleng modernt Format nei encodéiert, sou datt ongeféier en Drëttel vun all Foto sengen Bytes leie bliwwen ass.
Problem zwee: de Browser hat keng Ahnung, wéi ee Bild op enger Produktsäit am wichtegsten war. Dat grousst Hero-Bild, déi véier Thumbnails doniewent, d'Rei vu recommandéierte Produkter dorënner, alleguer hunn se mat deeselwechte Prioritéit gelueden a sech ëm déiselwecht Verbindung gerannt. Den Hero ass opgetaucht, wéi et him gepasst huet.
Béid behieftbar.
Ee Format fir all Foto
Mir hunn eis um Wee eran op ee eenzegt modernt Bildformat standardiséiert. Egal wéi ee Format Dir eroplued, JPEG, PNG, animéierten GIF, mir encodéieren et an dat méi klengt nei. Bei animéierten GIFs behale mir dat éischt Bild; Produktfotoe sinn keng Animatiounen, a mir hu léiwer e méi kleng Standbild wéi e wuchtegen Loop, deen kee gefrot huet.
Dem Browser soen, wat zielt
Dat war dee méi grousse Gewënn. Browser kann ee soen, wéi ee Bild op enger Säit am wichtegsten ass, den "Hero", sou datt se en virun allem aneren ofruffen. Mir hunn dës Hiweiser un dräi Plazen derbäigesat:
- Den Hero op enger Produktsäit: héchst Prioritéit. Säiten-Thumbs explizit méi déif, sou datt se net konkurréieren.
- Déi éischt Rei vu Kaarten op de Startsäit- a Sich-Feeds: héich. Reien ënner der Falt waarden, bis Dir Iech an hir Richtung scrollt.
- Dekorativ Biller (déi kleng Kategorie-Iconen, asw.): niddreg, an nëmme bei Bedarf gelueden.
The hero downloads first; thumbnails wait their turn.
Ee rouege Bug, deen mir ënnerwee gefaangen hunn
D'Galerie op der Produktsäit huet eng Fotosgréisst no deeër Reiefolleg ausgewielt, an deer de Server se zoufälleg zréckginn huet, an net no deer Gréisst, déi se tatsächlech gebraucht huet. Heiansdo war den Hero en 300-Pixel-Thumbnail; heiansdo war en Thumbnail déi voll Optléisung. Eng nei Affichage "fillt" sech elo méi schaarf un, well déi richteg Gréisst an der richteger Plaz landet.
Méi schlau Sichfilteren
Zréck zum Vëlo-Beispill. Esou eng Sich kräizt vill Kategorien, Erwuessene-Vëloen, Kanner-Vëloen, Deeler, Accessoiren, an déi al Säiteleescht hat keng Ahnung, wéi vun hinnen tatsächlech Treffer hunn. Dir hutt et erausfonnt, andeem Dir op all eenzel geklickt hutt. Déi nei Säiteleescht weist einfach de passende Set, mat Zuelen.
Déiselwecht Iddi entfalt sech fir all Attribut, dat mir kennen. Mark, Faarf, Gréisst, Kadergréisst, Gewiicht, wann déi passend Resultater Wäerter dofir hunn, da erschéngt dat Attribut an der Säiteleescht mat Checkboxen an Zuelen.
Fir numeresch Attributer (Präis, Gewiicht, Kapazitéit, asw.) hu mir déi al "gitt e Min an e Max an"-Felder duerch e Schieberegler ersat, deem seng Grenze mat dem tatsächleche Beräich an de Resultater iwwereneestëmmen. Wann dat bëllegst passend Annonce €120 ass, da fänkt de Schieberegler bei €120 un. Net méi e Min vun €10 antippen, wann esou wéi esou kee Resultat méi bëlleg wéi €120 ass.
Statesche Kategorie-Bam (all Knuet am Katalog). Eidel Min-/Max-Felder fir de Präis. Keng Ahnung, wéi Kategorien tatsächlech Resultater hunn, ier Dir duerch se duerchgeklickt hutt.
Nëmme Kategorien mat passende Resultater, no Zuel sortéiert. Méifachauswiel fir ze verbreedern. Schieberegler begrenzt duerch dat richtegt Min/Max vun de passenden Annoncen. D'Säiteleescht ass eng Kaart vum Resultatesset, net e Verzeechnes vum Katalog.
Wann de Resultatesset eidel ass
Nach eng Falt: wann Dir ze vill filtert an op null Resultater landet, da verschwënnt déi ganz Säiteleescht. Et gëtt näischt ze verfeinern, Filter-Chips a Checkboxe wären nëmme visuellt Geräisch. D'Säit fällt op een eenzege "All Filteren läschen"-Knäppche zesummen, zentréiert. Ee Klick an Dir sidd zréck do, wou d'Säiteleescht hëllefe kann.
E méi poléiert Browse-Gefill
Fënnef kleng Saache si an dësem Sprint gelant, déi zesummen d'Gefill vun der Säit veränneren. Keng vun hinnen ass eng Blockbuster-Funktioun; all eng ass eng oder zwou CSS-Deklaratiounen. Si sinn an der Reiefolleg opgelëscht, wéi oft en typesche Benotzer hinne begéint.
Den Header mécht sech aus dem Wee
D'wäiss Navigatiounsleescht uewen op all Säit rëtscht elo no uewen aus dem Bildschierm, wann Dir no ënnen scrollt, a kënnt zréck an d'Vue, wann Dir no uewen scrollt, dat klassescht "Header mécht sech aus dem Wee, wärend ech liesen"-Muster. Browser, déi déi zugrondléiend Funktioun net ënnerstëtzen, halen d'Leescht einfach sichtbar; näischt geet futti.
Méi geschmeideg Iwwergäng vu Kaart → Produkt
Klickt op eng Produktkaart um Startsäit- oder Sich-Feed an säin Hero-Bild animéiert sech elo geschmeideg op seng Plaz op der Produktdetailsäit, amplaz vum ale Sprongschnëtt. Den Titel, de Präis an de Like-Knäppche vun der Kaart maachen datselwecht. Et ass den Ënnerscheed tëschent enger Säit, déi "lued", an enger, déi sech "transforméiert".
Iwwerschrëfte gi méi schéin ëmgebrach
Produkttitelen, Kaarttitelen, Sektiounsiwwerschrëfte, keng vun hinnen léisst elo eng eenzelt Wuert als Weiss op der leschter Linn. De Browser gläicht d'Zeilebréch fir eis aus. Eng CSS-Deklaratioun, säitewäit ugewannt, direkt iwwerall sichtbar, wou eng Iwwerschrëft ëmgebrach gëtt.
Kee horizontalt Geziddera méi, wann Modaler opginn
Virdrun: maacht de Share-Modal op, an d'Säit rappt 15 Pixel no riets, wann de Scrollbalken verschwënnt, an alles dorënner verréckelt sech. Elo: e reservéierte Gass hält de Raum, egal ob de Scrollbalken do ass oder net. Modaler ginn op, ouni datt d'Säit rappt.
Méi séier Sproochewiessel
D'Datumsformatéierung an Ärer Sprooch gouf fréier zesumme mat den Formatéierungsdate fir all aner ënnerstëtzte Sproochen ausgeliwwert, ongeféier 100 KB Locale-Daten, obwuel Dir ëmmer nëmmen eng gebraucht hutt. Mir lueden elo nëmmen nach déi Sprooch, déi Dir benotzt. Méi klenge Bundle, méi séier éischt Affichage.
Botze ënnert der Motorhaube
E Stapel kleng Upassungen, déi Dir eenzel kaum gewuer gitt, mä déi sech als méi propper Traces an eise Performance-Dashboards weisen. Keng vun hinnen huet en Verhalen geännert, dat Dir géift gesinn. Déi wichtegst Zuelen:
Wat mir (nach) net ausgeliwwert hunn
E puer Punkten ugefaangen, mä et net an dëse Sprint gepackt:
- Méifachwäert-Attributfilteren. D'UI akzeptéiert méi ugekräizte Wäerter pro Attribut (Dir kënnt dräi Marken ukräizen), mä haut gëtt op der Serversäit nëmmen eng geéiert. Den nächste Sprint.
- Méi schlau Facette-Neiberechnung. Am Moment ewechhëlt d'Ukräizen vun "ASUS" déi aner Markeoptiounen aus der Lëscht. Déi poléiert Versioun zielt all Facette nei ouni hiren eegene Filter, sou datt d'Optiounen sichtbar bleiwen. Maachbar; just dee méi deiere Query-Wee.
- AVIF-Biller. Nach méi kleng wéi dat, wat mir haut ausliwweren. Kascht méi Encoder-Aarbecht op der Serversäit; zréckgehalen, bis mir Benchmarks maachen.
Dat war et fir dëse Sprint. De nächste Post sollt d'Aarbecht ofdecken, déi mir un de gedeelten Annoncë vu Benotzer zu Benotzer ugefaangen hunn, roueg déi am meeschte gefrote Funktioun am leschte Quartal, soubal se wäit genuch ass, fir doriwwer ze schwätzen.