Due mesi fa, cercare qualcosa di comune sul marketplace, una bici, ad esempio, era un gioco a indovinare. La barra laterale mostrava ogni categoria che abbiamo, dall'alto in basso, in un albero. Ne sceglievi una, scorrevi, finivi in un vicolo cieco, tornavi indietro, provavi la successiva, e così via. La barra laterale descriveva il nostro catalogo, non i tuoi risultati.
Questo ci dava fastidio. Così abbiamo smontato la barra laterale e l'abbiamo ricostruita. Lungo il percorso abbiamo ridotto i byte di ogni foto sul sito, fatto in modo che l'header si togliesse di mezzo mentre scorri, e aggiunto una manciata di piccoli trucchi del browser che insieme producono quella sensazione di "qui qualcosa è diverso". Ecco il riepilogo.
Immagini più veloci
Ogni immagine passa attraverso di noi. Gli utenti caricano un JPEG da 4 MB del loro tavolo da cucina; noi lo ridimensioniamo per le schede prodotto, le pagine prodotto e le miniature, e serviamo quelle copie per sempre. La pipeline è stata configurata anni fa e funzionava, ma aveva due problemi che stavamo ignorando.
Problema uno: mantenevamo ogni immagine nel formato in cui era stata caricata. Il JPEG restava JPEG, il PNG restava PNG. Ridimensionavamo in modo aggressivo, ma non avevamo mai ricodificato in un formato moderno più leggero, lasciando sul tavolo circa un terzo dei byte di ogni foto.
Problema due: il browser non aveva idea di quale immagine in una pagina prodotto fosse la più importante. La grande immagine hero, le quattro miniature accanto ad essa, la riga di prodotti consigliati sotto, tutte caricavano con la stessa priorità, in competizione tra loro per la stessa connessione. La hero appariva quando ne aveva voglia.
Entrambi risolvibili.
Un formato per ogni foto
Abbiamo standardizzato su un unico formato di immagine moderno in ingresso. Qualunque formato tu carichi, JPEG, PNG, GIF animata, lo ricodifichiamo in quello più leggero. Per le GIF animate manteniamo il primo fotogramma; le foto dei prodotti non sono animazioni, e preferiamo avere un'immagine fissa più leggera che un loop pesante che nessuno ha chiesto.
Dire al browser cosa conta
Questa è stata la vittoria più grande. Ai browser si può indicare quale immagine in una pagina è la più importante, la "hero", così la scaricano prima di tutto il resto. Abbiamo aggiunto questi suggerimenti in tre punti:
- La hero in una pagina prodotto: priorità massima. Le miniature laterali esplicitamente più basse, così non competono.
- La prima riga di schede nei feed della home e della ricerca: alta. Le righe sotto la piega aspettano che tu scorra verso di esse.
- Le immagini decorative (le piccole icone di categoria, ecc.): bassa, e caricate solo su richiesta.
The hero downloads first; thumbnails wait their turn.
Un piccolo bug silenzioso scoperto lungo il percorso
La galleria della pagina prodotto sceglieva la dimensione di una foto in base all'ordine in cui il server le restituiva, non in base alla dimensione di cui aveva effettivamente bisogno. A volte la hero era una miniatura da 300 pixel; a volte una miniatura era la versione a piena risoluzione. Ora una nuova visualizzazione "sembra" più nitida perché la dimensione giusta finisce nello slot giusto.
Filtri di ricerca più intelligenti
Torniamo all'esempio della bici. Una ricerca del genere attraversa molte categorie, bici per adulti, bici per bambini, ricambi, accessori, e la vecchia barra laterale non aveva idea di quali di esse avessero effettivamente risultati. Lo scoprivi cliccando su ciascuna. La nuova barra laterale mostra semplicemente l'insieme corrispondente, con i conteggi.
La stessa idea si estende a ogni attributo che conosciamo. Marca, colore, taglia, dimensione del telaio, peso, se i risultati corrispondenti hanno valori per esso, quell'attributo appare nella barra laterale con caselle di spunta e conteggi.
Per gli attributi numerici (prezzo, peso, capacità, ecc.) abbiamo sostituito i vecchi campi "inserisci un minimo e un massimo" con uno slider i cui limiti corrispondono all'intervallo effettivo presente nei risultati. Se l'annuncio corrispondente più economico è €120, lo slider parte da €120. Basta digitare un minimo di €10 quando comunque nessun risultato costa meno di €120.
Albero di categorie statico (ogni nodo del catalogo). Campi min/max vuoti per il prezzo. Nessuna idea di quali categorie avessero effettivamente risultati finché non ci cliccavi sopra.
Solo le categorie con risultati corrispondenti, ordinate per conteggio. Selezione multipla per allargare. Slider limitato dal vero min/max degli annunci corrispondenti. La barra laterale è una mappa dell'insieme dei risultati, non un elenco del catalogo.
Quando l'insieme dei risultati è vuoto
Un'ultima sfumatura: se filtri troppo e ti ritrovi con zero risultati, l'intera barra laterale scompare. Non c'è nulla da affinare, i chip dei filtri e le caselle di spunta sarebbero solo rumore visivo. La pagina si riduce a un unico pulsante "Cancella tutti i filtri", centrato. Un clic e sei tornato dove la barra laterale può aiutarti.
Una sensazione di navigazione più curata
Cinque piccole cose sono arrivate questo sprint che insieme cambiano la sensazione del sito. Nessuna di esse è una funzionalità rivoluzionaria; ciascuna è una o due dichiarazioni CSS. Sono elencate in ordine di quanto spesso un utente tipico le incontrerà.
L'header si toglie di mezzo
La barra di navigazione bianca in cima a ogni pagina ora scorre verso l'alto e fuori dallo schermo quando scorri in basso, e torna in vista quando scorri in alto, il classico schema "l'header si toglie di mezzo mentre leggo". I browser che non supportano la funzionalità sottostante mantengono semplicemente la barra visibile; nulla si rompe.
Transizioni scheda → prodotto più fluide
Clicca una scheda prodotto nel feed della home o della ricerca e la sua immagine hero ora si anima fluidamente al suo posto nella pagina di dettaglio del prodotto, invece del vecchio stacco netto. Il titolo, il prezzo e il pulsante "mi piace" della scheda fanno lo stesso. È la differenza tra una pagina che "carica" e una che "si trasforma".
I titoli vanno a capo meglio
I titoli dei prodotti, i titoli delle schede, le intestazioni delle sezioni, nessuno di essi lascia più una parola orfana sull'ultima riga. Il browser bilancia le interruzioni di riga per noi. Una sola dichiarazione CSS, applicata a tutto il sito, immediatamente visibile ovunque un titolo vada a capo.
Niente più sobbalzo orizzontale all'apertura dei modali
Prima: apri il modale di condivisione, la pagina sobbalza di 15 pixel verso destra mentre la barra di scorrimento sparisce, e tutto ciò che sta sotto si sposta. Ora: una gronda riservata mantiene lo spazio sia che la barra di scorrimento ci sia o no. I modali si aprono senza che la pagina sobbalzi.
Cambi di lingua più veloci
La formattazione delle date nella tua lingua veniva fornita insieme ai dati di formattazione di tutte le altre lingue supportate, circa 100 KB di dati locali, anche se ne servivano sempre solo uno. Ora carichiamo solo la lingua che stai usando. Bundle più leggero, primo rendering più veloce.
Pulizia sotto il cofano
Una serie di piccoli aggiustamenti che faticheresti a notare singolarmente, ma che si manifestano come tracce più pulite nelle nostre dashboard delle prestazioni. Nessuno di essi ha cambiato un comportamento che noteresti. I numeri principali:
Cosa non abbiamo rilasciato (ancora)
Alcuni elementi sono iniziati ma non sono rientrati in questo sprint:
- Filtraggio per attributi a valore multiplo. L'interfaccia accetta più valori selezionati per attributo (puoi spuntare tre marche), ma oggi solo uno viene onorato lato server. Il prossimo sprint.
- Ricalcolo più intelligente delle faccette. In questo momento spuntare "ASUS" rimuove le altre opzioni di marca dall'elenco. La versione rifinita riconta ogni faccetta escludendo il proprio filtro, così le opzioni restano visibili. Fattibile; solo il percorso di query più costoso.
- Immagini AVIF. Ancora più leggere di quelle che serviamo oggi. Costano più lavoro di codifica lato server; messe in attesa finché non facciamo i benchmark.
Questo è tutto per questo sprint. Il prossimo post dovrebbe coprire il lavoro che abbiamo iniziato sugli annunci condivisi da utente a utente, silenziosamente la funzionalità più richiesta dell'ultimo trimestre, una volta che sarà abbastanza avanzato da poterne parlare.