Há dois meses, procurar no marketplace por algo comum, uma bicicleta, digamos, era um jogo de adivinhação. A barra lateral mostrava todas as categorias que temos, de cima a baixo, numa árvore. Escolhia uma, percorria, batia num beco sem saída, voltava atrás, tentava a seguinte, repetia. A barra lateral descrevia o nosso catálogo, não os seus resultados.
Isso incomodava-nos. Por isso desmontámos a barra lateral e reconstruímo-la. Pelo caminho, reduzimos os bytes de cada fotografia do site, fizemos o cabeçalho sair do seu caminho enquanto percorre a página, e adicionámos um punhado de pequenos truques de browser que se somam até "alguma coisa parece simplesmente diferente aqui". Este é o resumo.
Imagens mais rápidas
Todas as imagens passam por nós. Os utilizadores carregam um JPEG de 4 MB da sua mesa de cozinha; nós redimensionamo-lo para cartões de produto, páginas de produto e miniaturas, e servimos essas cópias para sempre. O pipeline foi montado há anos e funcionava, mas tinha dois problemas que andávamos a ignorar.
Problema um: mantínhamos cada imagem no formato em que foi carregada. JPEG continuava JPEG, PNG continuava PNG. Redimensionávamos de forma agressiva, mas nunca recodificávamos para um formato moderno mais pequeno, deixando cerca de um terço dos bytes de cada fotografia em cima da mesa.
Problema dois: o browser não fazia ideia de qual imagem numa página de produto era a mais importante. A grande imagem principal, as quatro miniaturas ao seu lado, a fila de produtos recomendados em baixo, tudo carregava com a mesma prioridade, competindo entre si pela mesma ligação. A imagem principal aparecia quando lhe apetecia.
Ambos resolúveis.
Um formato para cada fotografia
Padronizámos num único formato de imagem moderno à entrada. Seja qual for o formato que carregar, JPEG, PNG, GIF animado, recodificamos para o mais pequeno. Nos GIFs animados ficamos com o primeiro frame; as fotografias de produto não são animações, e preferimos uma imagem estática mais pequena do que um loop pesado que ninguém pediu.
Dizer ao browser o que importa
Esta foi a maior vitória. Pode dizer-se aos browsers qual imagem numa página é a mais importante, a "principal", para que a obtenham antes de tudo o resto. Adicionámos estas pistas em três sítios:
- A imagem principal numa página de produto: prioridade mais alta. As miniaturas laterais explicitamente mais baixas para não competirem.
- A primeira fila de cartões nos feeds de início e de pesquisa: alta. As filas abaixo da dobra esperam até que percorra na sua direção.
- Imagens decorativas (os pequenos ícones de categoria, etc.): baixa, e apenas carregadas a pedido.
The hero downloads first; thumbnails wait their turn.
Um bug discreto que apanhámos pelo caminho
A galeria da página de produto escolhia um tamanho de fotografia com base em qualquer ordem em que o servidor as devolvia, e não no tamanho que realmente precisava. Por vezes a imagem principal era uma miniatura de 300 píxeis; por vezes uma miniatura era a versão em resolução total. Uma exibição nova "parece" mais nítida agora porque o tamanho certo acaba no sítio certo.
Filtragem de pesquisa mais inteligente
De volta ao exemplo da bicicleta. Uma pesquisa dessas atravessa muitas categorias, bicicletas de adulto, bicicletas de criança, peças, acessórios, e a antiga barra lateral não fazia ideia de quais delas tinham efetivamente resultados. Descobria clicando em cada uma. A nova barra lateral mostra apenas o conjunto correspondente, com contagens.
A mesma ideia desdobra-se para cada atributo que conhecemos. Marca, cor, tamanho, tamanho do quadro, peso, se os resultados correspondentes tiverem valores para ele, esse atributo aparece na barra lateral com caixas de seleção e contagens.
Para atributos numéricos (preço, peso, capacidade, etc.) substituímos os antigos campos de "introduza um mínimo e um máximo" por um cursor cujos limites correspondem ao intervalo real presente nos resultados. Se o anúncio correspondente mais barato for €120, o cursor começa em €120. Acabou-se escrever um mínimo de €10 quando nenhum resultado é mais barato do que €120 de qualquer forma.
Árvore de categorias estática (todos os nós do catálogo). Campos de mínimo/máximo vazios para o preço. Sem ideia de quais categorias tinham efetivamente resultados até clicar por todas elas.
Apenas categorias com resultados correspondentes, ordenadas por contagem. Seleção múltipla para alargar. Cursor limitado pelo mínimo/máximo real dos anúncios correspondentes. A barra lateral é um mapa do conjunto de resultados, não um diretório do catálogo.
Quando o conjunto de resultados está vazio
Mais uma subtileza: se filtrar em excesso e cair em zero resultados, toda a barra lateral desaparece. Não há nada para refinar, chips de filtro e caixas de seleção seriam apenas ruído visual. A página reduz-se a um único botão "Limpar todos os filtros", centrado. Um clique e está de volta a um sítio onde a barra lateral pode ajudar.
Uma experiência de navegação mais polida
Cinco pequenas coisas chegaram neste sprint que, em conjunto, mudam a sensação do site. Nenhuma delas é uma funcionalidade de grande impacto; cada uma é uma ou duas declarações de CSS. Estão listadas por ordem da frequência com que um utilizador típico as irá encontrar.
O cabeçalho sai do caminho
A barra de navegação branca no topo de cada página agora desliza para fora do ecrã quando percorre para baixo, e volta à vista quando percorre para cima, o clássico padrão "o cabeçalho sai do meu caminho enquanto estou a ler". Os browsers que não suportam a funcionalidade subjacente simplesmente mantêm a barra visível; nada se quebra.
Transições mais fluidas de cartão → produto
Clique num cartão de produto no feed de início ou de pesquisa e a sua imagem principal agora anima-se suavemente até ao lugar na página de detalhe do produto, em vez do antigo corte seco. O título do cartão, o preço e o botão de gosto fazem o mesmo. É a diferença entre uma página que "carrega" e uma que "se transforma".
Os títulos quebram de forma mais agradável
Títulos de produto, títulos de cartão, títulos de secção, nenhum deles deixa agora uma única palavra órfã na última linha. O browser equilibra as quebras de linha por nós. Uma declaração de CSS, aplicada em todo o site, imediatamente visível em qualquer sítio onde um título quebre.
Acabou-se o tremor horizontal quando os modais abrem
Antes: abria o modal de partilha, a página dava um salto de 15 píxeis para a direita à medida que a barra de deslocamento desaparecia, e tudo por baixo deslocava-se. Agora: uma goteira reservada mantém o espaço quer a barra de deslocamento esteja lá ou não. Os modais abrem sem que a página dê um salto.
Mudanças de idioma mais rápidas
A formatação de datas no seu idioma costumava ser entregue empacotada com os dados de formatação de todos os outros idiomas suportados, cerca de 100 KB de dados de localização, embora só precisasse de um. Agora carregamos apenas o idioma que está a utilizar. Pacote mais pequeno, primeira renderização mais rápida.
Limpeza dos bastidores
Uma pilha de pequenos ajustes que dificilmente notaria individualmente mas que aparecem como traços mais limpos nos nossos painéis de desempenho. Nenhum deles alterou qualquer comportamento que veria. Os números principais:
O que não entregámos (ainda)
Alguns itens foram iniciados mas não entraram neste sprint:
- Filtragem de atributos com múltiplos valores. A interface aceita vários valores marcados por atributo (pode assinalar três marcas), mas apenas um é respeitado no lado do servidor hoje. Próximo sprint.
- Recálculo de facetas mais inteligente. Neste momento, assinalar "ASUS" remove as outras opções de marca da lista. A versão polida recalcula cada faceta excluindo o seu próprio filtro para que as opções permaneçam visíveis. Exequível; apenas o caminho de consulta mais dispendioso.
- Imagens AVIF. Ainda mais pequenas do que o que entregamos hoje. Custa mais trabalho do codificador no lado do servidor; retido até fazermos benchmarks.
É tudo por este sprint. O próximo post deverá cobrir o trabalho que começámos sobre anúncios partilhados entre utilizadores, discretamente a funcionalidade mais pedida no último trimestre, assim que estiver suficientemente avançado para falar dele.