Desenvolvimento e-commerce: sztuczne-rosliny.pl

#sztuczne-rosliny.pl, loja de plantas artificiais de alta qualidade

Há um limite técnico que define este projeto desde o início: no WordPress, filtrar uma listagem por vários atributos ao mesmo tempo é a operação mais cara que existe sobre produtos. A consulta junta as tabelas de relações de taxonomia e de campos adicionais e, a cada condição activa, o número de junções cresce mais depressa do que o número de filtros. Numa loja em que o cliente escolhe por altura, material, cor e tipo de vaso, é essa consulta que decide a experiência, não a página inicial.

A loja pertence a uma empresa que importa e distribui plantas artificiais e trabalha também como grossista, fornecendo composições para escritórios, hotéis, restaurantes, centros comerciais e stands de feira, com montagem e aconselhamento no local. A sede fica em Varsóvia e existe uma delegação em Białystok. O sortido inclui árvores, ervas, flores e vasos, com variantes ignífugas e resistentes à radiação ultravioleta (fonte: sztuczne-rosliny.pl). A marca compete pela qualidade do produto e não pelo preço.

A implementação demorou cerca de seis semanas. A camada técnica é WordPress com um modelo de produto próprio, cache de objetos em Redis, HTML5, CSS3 e SASS na interface, AJAX na pesquisa e uma CDN à frente dos ficheiros de imagem. O layout e a colocação dos elementos vieram do cliente; sobre isso construí a estrutura de templates, o modelo de dados e as integrações.

#O que custa mesmo numa listagem de produtos

A pesquisa e a filtragem correm de forma assíncrona, por isso restringir a lista não recarrega a página e o resultado aparece de imediato. Confortável para quem compra e caro para a base de dados, porque cada movimento do controlo de altura é uma consulta nova.

O ponto de estrangulamento não é aquilo que toda a gente testa. É a vista de categoria com três filtros marcados, que raramente alguém abre durante os testes. Daí saíram três decisões. Primeira, os resultados das combinações de filtros que se repetem ficam em cache separada, porque a mesma combinação regressa mais vezes do que parece. Segunda, os contadores ao lado de cada opção, isto é, quantos artigos existem por detrás de cada valor, são a parte mais cara da vista e merecem uma decisão consciente em vez de entrarem por hábito. Terceira, os testes só valem numa cópia de produção com o catálogo completo, porque numa instalação vazia com vinte produtos tudo é rápido: a base cabe em memória e não há nada para optimizar.

Há ainda um efeito lateral da filtragem que precisa de ser fechado antes da publicação. Páginas de categoria e resultados de filtros geram um número enorme de endereços que diferem apenas na ordem dos parâmetros, e essa é a forma clássica de diluir a visibilidade de um catálogo. É preciso decidir antes quais as combinações que devem ser páginas próprias e indexáveis e quais ficam apenas como ferramenta de navegação, sem endereço autónomo no motor de busca. Não tenho medições do efeito deste trabalho, por isso não apresento nenhuma.

#Parâmetros em campos, não em texto corrido

O modelo de produto assenta em tipos de conteúdo próprios e campos personalizados. Altura, material, cor, fabricante, tipo de vaso e a indicação de variante ignífuga ou resistente a ultravioleta são valores na base de dados e não frases dentro de uma descrição.

A diferença aparece no primeiro filtro que alguém pede. Se a altura vive apenas no texto, o filtro de cento e vinte a cento e oitenta centímetros nunca chega a existir, porque não há nada para comparar. Pode disfarçar-se com etiquetas como alto ou muito alto, mas nesse caso a fronteira é uma opinião, cada pessoa que edita entende-a à sua maneira, e o comprador só descobre a medida real dentro da ficha. Numa encomenda para a receção de um hotel com pé-direito definido, isso separa um minuto de escolha de uma devolução de dois metros de ficus.

O custo desta estrutura deve ser dito com clareza. Criar um produto demora mais, porque o formulário tem uma dúzia de campos em vez de uma caixa de texto. O conjunto de atributos tem de ser pensado antes, já que alterá-lo mais tarde é uma migração de dados e não uma correcção de redacção. O investimento devolve-se a cada nova centena de referências e a cada remodelação do aspeto, porque campos entram num layout novo com um único template, enquanto dados escritos dentro do texto têm de ser refeitos um a um.

Vale a pena olhar para os três atributos que no negócio de projeto decidem a compra. Altura total e diâmetro do vaso, porque o espaço é limitado. Execução ignífuga, porque em edifícios públicos é condição e não extra. Resistência a ultravioleta, porque uma planta atrás de um vidro perde cor numa estação. Tê-los como filtros não é conforto, é a pré-selecção que de outro modo o comercial faria por email.

#Sincronização com fornecedores da Ásia e da Europa

O sortido vem de fabricantes asiáticos e europeus, o que significa formatos diferentes, periodicidades diferentes e qualidade de dados diferente. Um fornecedor envia uma folha com a especificação completa; outro envia um ficheiro em que a altura aparece ora em centímetros ora em polegadas e o nome da cor existe em três grafias.

A camada de sincronização tem uma tarefa anterior a todas as outras: reduzir isso a um vocabulário único antes de chegar ao catálogo. É trabalho aborrecido de que depende tudo o resto, porque um filtro por material só funciona quando dez formas de escrever o mesmo plástico foram reunidas num valor. O que não encaixa deve parar visível numa lista de erros em vez de passar em silêncio: cinco minutos de trabalho editorial custam menos do que uma referência que está em armazém e nunca aparece numa pesquisa.

A segunda decisão é de quem é cada campo. Stock e preço de compra pertencem ao fornecedor e podem ser reescritos em cada passagem. Descrição, fotografias e atribuição de categorias pertencem à loja e não podem, sob pena de a importação nocturna apagar o trabalho da redacção. A falta desta fronteira é a causa mais frequente de avaria em integrações de produto e manifesta-se sempre do mesmo modo: na manhã seguinte, metade do catálogo volta a ter o texto do fabricante.

A terceira questão são os artigos que o fornecedor descontinua. Apagá-los mata um endereço que está em resultados de pesquisa e nos favoritos de compradores profissionais. Faz mais sentido marcar o produto como indisponível, manter a página viva e mostrar alternativas ao lado, até porque neste sector propor uma árvore semelhante faz parte normal da venda e a mercadoria é trazida por encomenda.

#Checkout, pagamentos e o limite da cache

A loja está ligada a gateways de pagamento e à gestão de encomendas. É aqui que o trabalho de desempenho tem de parar, e vale a pena perceber porquê.

Carrinho, resumo da encomenda e página pós-pagamento são, por definição, diferentes para cada utilizador. Colocá-los numa cache de página completa termina no pior erro que um comércio eletrónico consegue produzir, que é mostrar a um cliente o carrinho de outro. Esses caminhos ficam fora da cache de página e a velocidade procura-se noutro lado: a cache de objetos em Redis encurta a montagem da página também onde não é possível guardar uma resposta pronta.

O regresso do gateway é um caso limite próprio e tem de ser testado numa cópia de produção. O cliente pode fechar o navegador antes de voltar, voltar duas vezes, ou encontrar uma notificação servidor a servidor do operador mais rápida do que o seu próprio reencaminhamento. O estado da encomenda tem de resultar dessa notificação e não de o navegador ter chegado ao endereço certo. Ao contrário, ficam encomendas pagas registadas como pendentes, e isso só se descobre quando alguém fecha as contas.

#Imagens, CDN e picos sazonais

Neste sector a fotografia não ilustra o produto, descreve-o. O comprador avalia o tom de verde, a textura da folha e a forma como a planta assenta no vaso, e é precisamente aí que se separa uma peça convincente de outra que se denuncia a dois metros. As galerias são extensas, os ficheiros pesados, e quase todo o peso da página está aí. Não se resolve retirando fotografias, resolve-se na entrega.

A divisão de trabalho é simples. A CDN retira ao servidor um tráfego que ele não deveria servir e entrega as imagens a partir de um ponto mais próximo do visitante. O Redis encurta o trabalho de montar a página quando não existe resposta pronta. Junta-se a isto a otimização de imagens e um limite à quantidade de folhas de estilo e scripts que cada vista arrasta, porque num catálogo em que as fotografias já pesam, cada script adicional é pago pelo produto.

Numa listagem, o que decide não é o peso de uma imagem mas a soma. Uma página de categoria com cinquenta produtos carrega cinquenta ficheiros, por isso as miniaturas têm de ser geradas no tamanho em que são realmente mostradas, e não reduzidas pelo navegador a partir de um ficheiro pensado para a ficha. É um detalhe de configuração e uma das poucas alterações que se sentem num telemóvel em rede móvel normal.

O tráfego também não se distribui de forma regular ao longo do ano. Sobe antes das festas e nos períodos em que as empresas preparam escritórios e lojas, e há dias isolados que trazem várias vezes a carga habitual. Afinar pela média mensal vale pouco. Conta o comportamento na hora de ponta, e nessa hora decide menos a velocidade do código do que o número de pedidos que chega sequer à aplicação.

#As nossas ações

Do nosso lado esteve a implementação da loja a partir do layout fornecido pelo cliente: o modelo de produto com campos paramétricos, as vistas de catálogo e de ficha, a pesquisa com filtragem, a ligação a pagamentos e à gestão de encomendas, a camada de cache e a preparação do catálogo para indexação. O requisito mais importante era que a pessoa responsável pelo sortido conseguisse acrescentar uma planta nova sem programador e que o visitante chegasse ao produto certo em poucos passos.

Olhando para trás, o que decidiu a qualidade desta loja foi o modelo de dados e não a camada gráfica. Parâmetros guardados como campos, e não como frases, tornaram possível a filtragem em que assenta todo o percurso de compra. A separação entre campos do fornecedor e campos da loja permite sincronizar a oferta sem apagar o trabalho da redacção. Retirar o percurso de compra da cache de página e acelerá-lo com cache de objetos concilia desempenho com encomendas correctas.

Para um projeto seguinte transita a camada técnica e o método: WordPress com modelo de produto próprio, Redis, CDN e testes de filtros e pagamentos numa cópia de produção. Não transita o dicionário de atributos desta loja nem as suas integrações com fornecedores, porque nasceram para um sortido concreto e para formatos de ficheiro concretos. Um segundo projeto começa por uma análise de âmbito, e a proposta vem a seguir.