Lichtere afbeeldingen, slimmere filters, vlotter navigeren

Twee maanden geleden was iets alledaags zoeken op de marktplaats, een fiets bijvoorbeeld, nog een gokspel. De zijbalk toonde al onze categorieën van boven naar beneden in een boomstructuur. U koos er één, scrolde, liep vast, ging terug, probeerde de volgende en begon opnieuw. De zijbalk beschreef onze catalogus, maar niet uw resultaten.

Dat stoorde ons. Daarom hebben we de zijbalk uit elkaar gehaald en opnieuw opgebouwd. Onderweg hebben we elke foto op de website kleiner gemaakt, ervoor gezorgd dat de kopbalk tijdens het scrollen verdwijnt en een handvol kleine browserverbeteringen toegevoegd die samen het gevoel geven dat ‘hier iets veranderd is’. Dit is het overzicht.

Bestandsgrootte van afbeeldingen: −30%; Dezelfde visuele kwaliteit, bij elke foto op de website.
Uw zoekopdracht verfijnen: Eén klik; Een categorie kiezen uit de relevante resultaten, niet uit de catalogus.
Verspringing bij dialoogvensters: 0 px; Een dialoogvenster openen verschuift de pagina niet meer.

Snellere afbeeldingen

Alle afbeeldingen gaan via ons. Gebruikers uploaden een JPEG van 4 MB van hun keukentafel; we verkleinen die voor productkaarten, productpagina's en miniaturen, en blijven die kopieën vervolgens aanbieden. De verwerking was jaren geleden ingericht en werkte, maar had twee problemen die we over het hoofd zagen.

Eerste probleem: we bewaarden elke afbeelding in de indeling waarin ze was geüpload. JPEG bleef JPEG, PNG bleef PNG. We verkleinden flink, maar codeerden nooit opnieuw naar een modernere, lichtere indeling. Daardoor lieten we ongeveer een derde van de bestandsgrootte van elke foto onbespaard.

Tweede probleem: de browser wist niet welke afbeelding op een productpagina het belangrijkst was. De grote hoofdafbeelding, de vier miniaturen ernaast en de rij aanbevolen producten eronder werden allemaal met dezelfde prioriteit geladen en streden om dezelfde verbinding. De hoofdafbeelding verscheen wanneer het haar uitkwam.

Beide problemen zijn op te lossen.

Eén indeling voor elke foto

We hebben vanaf de upload één moderne afbeeldingsindeling als standaard ingevoerd. Welke indeling u ook uploadt, JPEG, PNG of geanimeerde GIF, we coderen die opnieuw naar de lichtere indeling. Van geanimeerde GIF's behouden we het eerste beeld; productfoto's zijn geen animaties en we verkiezen een lichter stilstaand beeld boven een logge herhaling waar niemand om vroeg.

Dezelfde visuele kwaliteit. Ongeveer 30 % minder bestandsgrootte per afbeelding. Vanaf de eerste dag van de sprint toegepast op elke nieuwe upload.

De browser vertellen wat telt

Dit leverde de grootste winst op. U kunt browsers vertellen welke afbeelding op een pagina het belangrijkst is, de ‘hoofdafbeelding’, zodat ze die vóór de rest ophalen. We hebben die aanwijzingen op drie plaatsen toegevoegd:

De hoofdafbeelding van een productpagina: hoogste prioriteit. De miniaturen ernaast krijgen expliciet een lagere prioriteit om niet te concurreren.
De eerste rij kaarten op de startpagina en in zoekresultaten: hoog. Rijen buiten het zichtbare scherm wachten totdat u ernaartoe scrolt.
Decoratieve afbeeldingen (kleine categoriepictogrammen enzovoort): laag, en alleen geladen wanneer dat nodig is.

Een kleine, onopvallende fout onderweg ontdekt

De galerij op de productpagina koos een fotoformaat op basis van de toevallige volgorde waarin de server de foto's teruggaf, in plaats van de werkelijk benodigde grootte. Soms was de hoofdafbeelding een miniatuur van 300 pixels; soms was een miniatuur de versie in volledige resolutie. Een nieuw geladen pagina ‘oogt’ nu scherper, omdat het juiste formaat op de juiste plaats terechtkomt.

Slimmer zoeken met filters

Terug naar het voorbeeld van de fiets. Zo'n zoekopdracht loopt door veel categorieën: fietsen voor volwassenen, kinderfietsen, onderdelen, accessoires. De oude zijbalk wist niet welke categorieën daadwerkelijk resultaten bevatten. U ontdekte dat door ze één voor één aan te klikken. De nieuwe zijbalk toont gewoon de relevante categorieën met aantallen.

generic.filters

generic.search.titleOnly

€ 120€ 2.400

Hetzelfde idee geldt voor elk kenmerk dat we kennen. Merk, kleur, maat, framemaat, gewicht: als de passende resultaten waarden voor dat kenmerk hebben, verschijnt het in de zijbalk met selectievakjes en aantallen.

Voor numerieke kenmerken (prijs, gewicht, capaciteit enzovoort) hebben we de oude velden ‘voer een minimum en maximum in’ vervangen door een schuifregelaar waarvan de grenzen overeenkomen met het werkelijke bereik in de resultaten. Als de goedkoopste passende advertentie €120 kost, begint de schuifregelaar bij €120. Geen minimum van €10 meer invoeren terwijl toch geen enkel resultaat goedkoper is dan €120.

Oude zijbalk

Statische categorieboom (elk onderdeel van de catalogus). Lege velden voor de minimum- en maximumprijs. Geen idee welke categorieën daadwerkelijk resultaten bevatten voordat u ze allemaal hebt aangeklikt.

Nieuwe zijbalk

Alleen categorieën met passende resultaten, gesorteerd op aantal. Meerdere keuzes mogelijk om de selectie te verbreden. Een schuifregelaar met het echte minimum en maximum van de passende advertenties als grenzen. De zijbalk brengt de resultaten in kaart en is geen catalogusregister.

Wanneer er geen resultaten zijn

Nog een laatste detail: als u te ver filtert en op nul resultaten uitkomt, verdwijnt de hele zijbalk. Er valt niets te verfijnen; filterlabels en selectievakjes zouden alleen visuele ruis vormen. De pagina toont dan één gecentreerde knop: ‘Alle filters wissen’. Eén klik en u bent terug waar de zijbalk u kan helpen.

Een verzorgdere navigatie-ervaring

Deze sprint zijn vijf kleine verbeteringen toegevoegd die samen veranderen hoe de website aanvoelt. Geen ervan is een spectaculaire functie; elk past in één of twee CSS-declaraties. Ze staan hieronder in volgorde van hoe vaak een doorsnee gebruiker ze tegenkomt.

De kopbalk verdwijnt uit beeld

De witte navigatiebalk bovenaan elke pagina schuift nu naar boven uit beeld wanneer u omlaag scrolt en komt terug wanneer u omhoog scrolt: het klassieke patroon waarbij de kopbalk verdwijnt terwijl u leest. Browsers die de onderliggende functie niet ondersteunen, houden de balk gewoon zichtbaar; er gaat niets stuk.

Vloeiendere overgangen van kaart → product

Klik op een productkaart op de startpagina of in de zoekresultaten en de hoofdafbeelding beweegt nu soepel naar haar plaats op de productdetailpagina, in plaats van de vroegere abrupte sprong. De titel, prijs en like-knop van de kaart doen hetzelfde. Het is het verschil tussen een pagina die ‘laadt’ en een pagina die ‘verandert’.

Mooiere regelafbreking in titels

Producttitels, kaarttitels, sectiekoppen: geen ervan laat nog één eenzaam woord op de laatste regel achter. De browser verdeelt de regels voor ons evenwichtig. Eén CSS-declaratie, toegepast op de hele website, meteen zichtbaar overal waar een titel over meerdere regels loopt.

Geen horizontale sprong meer bij het openen van dialoogvensters

Vroeger: u opende het deelvenster, de pagina sprong 15 pixels naar rechts wanneer de schuifbalk verdween en alles eronder verschoof. Nu: een gereserveerde strook houdt de ruimte vrij, of de schuifbalk er nu is of niet. Dialoogvensters openen zonder dat de pagina verspringt.

Sneller van taal wisselen

De datumnotatie in uw taal werd vroeger geleverd met de notatiegegevens van alle andere ondersteunde talen: ongeveer 100 KB aan taalgegevens, terwijl u er maar één nodig had. We laden nu alleen de taal die u gebruikt. Een kleinere bundel, een snellere eerste weergave.

Opruimen onder de motorkap

Een hele reeks kleine aanpassingen die afzonderlijk nauwelijks opvallen, maar wel nettere metingen opleveren in onze prestatiedashboards. Geen ervan heeft zichtbaar gedrag veranderd. De belangrijkste cijfers:

API-handshake: −1 RTT; Verbinding vooraf opgezet voordat het eerste verzoek wordt verstuurd.
Analyse initialiseren: bij inactiviteit; Buiten het kritieke pad; uitgevoerd wanneer de browser niet bezig is.
Telemetrieverkeer: minder; We hebben de frequentie van het versturen van diagnosegegevens verlaagd.
Bundelbeoordeling: audit; We hebben de zware modules in kaart gebracht; verkleining staat voor de volgende sprint gepland.

Wat we (nog) niet hebben opgeleverd

We zijn aan enkele onderdelen begonnen die niet meer in deze sprint pasten:

Filteren op meerdere waarden per kenmerk. De interface accepteert meerdere aangevinkte waarden per kenmerk (u kunt drie merken aanvinken), maar de server houdt vandaag slechts met één rekening. Voor de volgende sprint.
Slimmere herberekening van facetten. Momenteel verdwijnen de andere merkopties uit de lijst wanneer u ‘ASUS’ aanvinkt. De volledige versie telt elk facet opnieuw zonder het eigen filter mee te nemen, zodat de opties zichtbaar blijven. Haalbaar; het is alleen het duurste zoekopdrachtpad.
AVIF-afbeeldingen. Nog lichter dan wat we vandaag leveren. Dat kost meer codeerwerk op de server; uitgesteld totdat we prestatiemetingen hebben gedaan.

Dat was het voor deze sprint. Het volgende artikel gaat waarschijnlijk over het werk dat we zijn begonnen aan advertenties die gebruikers met elkaar delen, stilletjes de meest gevraagde functie van het afgelopen kwartaal, zodra het ver genoeg is gevorderd om erover te schrijven.