Il y a deux mois, chercher quelque chose de courant sur la marketplace, un vélo, par exemple, relevait du jeu de devinettes. La barre latérale affichait toutes nos catégories, de haut en bas, sous forme d'arborescence. Vous en choisissiez une, vous faisiez défiler, vous tombiez dans une impasse, retour en arrière, on essaie la suivante, et on recommence. La barre latérale décrivait notre catalogue, pas vos résultats.
Ça nous dérangeait. Alors nous avons démonté la barre latérale et nous l'avons reconstruite. Au passage, nous avons réduit le poids de chaque photo du site, fait en sorte que l'en-tête s'efface pendant que vous faites défiler, et ajouté une poignée de petites astuces de navigateur qui, mises bout à bout, donnent l'impression que « quelque chose a changé ici ». Voici le récapitulatif.
Des images plus rapides
Toutes les images passent par nous. Les utilisateurs téléversent un JPEG de 4 Mo de la table de leur cuisine ; nous le redimensionnons pour les cartes produit, les pages produit et les vignettes, et nous servons ces copies pour toujours. Le pipeline avait été mis en place il y a des années et il fonctionnait, mais il avait deux problèmes que nous ignorions.
Premier problème : nous conservions chaque image dans le format dans lequel elle avait été téléversée. Le JPEG restait JPEG, le PNG restait PNG. Nous redimensionnions de façon agressive, mais nous n'avions jamais ré-encodé dans un format moderne plus léger, laissant ainsi de côté environ un tiers du poids de chaque photo.
Deuxième problème : le navigateur n'avait aucune idée de l'image la plus importante sur une page produit. La grande image principale, les quatre vignettes à côté, la rangée de produits recommandés en dessous, toutes se chargeaient avec la même priorité, se disputant la même connexion. L'image principale s'affichait quand bon lui semblait.
Les deux sont corrigeables.
Un seul format pour chaque photo
Nous avons standardisé un format d'image moderne unique dès l'entrée. Quel que soit le format que vous téléversez, JPEG, PNG, GIF animé, nous ré-encodons vers le plus léger. Pour les GIF animés, nous gardons la première image ; les photos de produits ne sont pas des animations, et nous préférons une image fixe plus légère qu'une boucle pataude que personne n'a demandée.
Indiquer au navigateur ce qui compte
C'était le plus gros gain. On peut indiquer aux navigateurs quelle image d'une page est la plus importante, l'image « principale », pour qu'ils la récupèrent avant tout le reste. Nous avons ajouté ces indications à trois endroits :
- L'image principale d'une page produit : priorité maximale. Les vignettes latérales sont explicitement abaissées pour ne pas entrer en concurrence.
- La première rangée de cartes des fils d'accueil et de recherche : élevée. Les rangées sous la ligne de flottaison attendent que vous fassiez défiler vers elles.
- L'imagerie décorative (les petites icônes de catégorie, etc.) : faible, et chargée uniquement à la demande.
The hero downloads first; thumbnails wait their turn.
Un petit bug discret repéré en chemin
La galerie de la page produit choisissait une taille de photo en fonction de l'ordre dans lequel le serveur les renvoyait par hasard, et non de la taille réellement nécessaire. Parfois l'image principale était une vignette de 300 pixels ; parfois une vignette était la version en pleine résolution. Un affichage neuf « paraît » plus net désormais, parce que la bonne taille finit au bon endroit.
Un filtrage de recherche plus malin
Revenons à l'exemple du vélo. Une telle recherche traverse de nombreuses catégories, vélos adultes, vélos enfants, pièces, accessoires, et l'ancienne barre latérale n'avait aucune idée de celles qui contenaient réellement des résultats. Vous le découvriez en cliquant sur chacune. La nouvelle barre latérale affiche simplement l'ensemble pertinent, avec les décomptes.
La même idée se déploie pour chaque attribut que nous connaissons. Marque, couleur, taille, taille de cadre, poids, si les résultats correspondants ont des valeurs pour cet attribut, il apparaît dans la barre latérale avec des cases à cocher et des décomptes.
Pour les attributs numériques (prix, poids, capacité, etc.), nous avons remplacé les anciens champs « saisir un min et un max » par un curseur dont les bornes correspondent à la plage réellement présente dans les résultats. Si l'annonce correspondante la moins chère est à €120, le curseur commence à €120. Fini de taper un min de €10 quand aucun résultat n'est de toute façon moins cher que €120.
Arborescence de catégories statique (chaque nœud du catalogue). Champs min/max vides pour le prix. Aucune idée des catégories qui contiennent réellement des résultats avant d'avoir cliqué sur chacune.
Uniquement les catégories avec des résultats correspondants, triées par décompte. Sélection multiple pour élargir. Curseur borné par le vrai min/max des annonces correspondantes. La barre latérale est une carte de l'ensemble des résultats, pas un répertoire du catalogue.
Quand l'ensemble des résultats est vide
Une dernière subtilité : si vous filtrez à l'excès et tombez sur zéro résultat, toute la barre latérale disparaît. Il n'y a rien à affiner, les étiquettes de filtres et les cases à cocher ne seraient que du bruit visuel. La page se réduit à un unique bouton « Effacer tous les filtres », centré. Un clic et vous revenez là où la barre latérale peut vous aider.
Une expérience de navigation plus soignée
Cinq petites choses sont arrivées ce sprint qui, ensemble, changent le ressenti du site. Aucune n'est une fonctionnalité spectaculaire ; chacune tient en une ou deux déclarations CSS. Elles sont listées par ordre de fréquence à laquelle un utilisateur type les rencontrera.
L'en-tête s'efface
La barre de navigation blanche en haut de chaque page glisse maintenant vers le haut hors de l'écran quand vous faites défiler vers le bas, et revient en vue quand vous faites défiler vers le haut, le classique motif « l'en-tête s'efface pendant que je lis ». Les navigateurs qui ne prennent pas en charge la fonctionnalité sous-jacente gardent simplement la barre visible ; rien ne casse.
Des transitions carte → produit plus fluides
Cliquez sur une carte produit dans le fil d'accueil ou de recherche et son image principale s'anime maintenant en douceur jusqu'à sa place sur la page de détail du produit, au lieu de l'ancien saut sec. Le titre, le prix et le bouton « j'aime » de la carte font de même. C'est la différence entre une page qui « se charge » et une page qui « se transforme ».
Les titres se coupent plus joliment
Les titres de produits, les titres de cartes, les en-têtes de section, aucun ne laisse plus un mot orphelin sur la dernière ligne. Le navigateur équilibre les sauts de ligne à notre place. Une seule déclaration CSS, appliquée à tout le site, immédiatement visible partout où un titre se coupe.
Plus de saut horizontal à l'ouverture des fenêtres modales
Avant : on ouvrait la fenêtre modale de partage, la page faisait une embardée de 15 pixels vers la droite quand la barre de défilement disparaissait, et tout en dessous se décalait. Maintenant : une gouttière réservée maintient l'espace, que la barre de défilement soit là ou non. Les fenêtres modales s'ouvrent sans que la page ne fasse d'embardée.
Des changements de langue plus rapides
Le formatage des dates dans votre langue était auparavant livré avec les données de formatage de toutes les autres langues prises en charge, environ 100 Ko de données de locale, alors que vous n'en aviez besoin que d'une seule. Nous ne chargeons désormais que la langue que vous utilisez. Bundle plus léger, premier rendu plus rapide.
Nettoyage sous le capot
Un tas de petits ajustements que vous auriez du mal à remarquer individuellement, mais qui se traduisent par des traces plus propres dans nos tableaux de bord de performance. Aucun n'a modifié un comportement visible. Les chiffres clés :
Ce que nous n'avons pas (encore) livré
Quelques éléments ont été entamés mais n'ont pas tenu dans ce sprint :
- Le filtrage d'attributs à valeurs multiples. L'interface accepte plusieurs valeurs cochées par attribut (vous pouvez cocher trois marques), mais une seule est honorée côté serveur aujourd'hui. Au prochain sprint.
- Un recalcul plus malin des facettes. Pour l'instant, cocher « ASUS » retire les autres options de marque de la liste. La version aboutie recompte chaque facette en excluant son propre filtre pour que les options restent visibles. Faisable ; il s'agit juste du chemin de requête le plus coûteux.
- Les images AVIF. Encore plus légères que ce que nous livrons aujourd'hui. Cela coûte plus de travail d'encodage côté serveur ; mis en attente jusqu'à ce que nous fassions des mesures de performance.
C'est tout pour ce sprint. Le prochain article devrait couvrir le travail que nous avons entamé sur les annonces partagées d'utilisateur à utilisateur, discrètement la fonctionnalité la plus demandée du dernier trimestre, une fois qu'il sera assez avancé pour en parler.