Lua Luá

O desafio

A Lua Luá solicitou a inclusão de galerias de imagens nas páginas de catálogo. Para uma loja de moda, faz todo sentido: mais imagens por produto significam mais contexto para o cliente e, em geral, mais conversão.

O que a demanda trouxe junto, de forma não imediata, foi um problema de performance. Cada produto que passa a ter uma galeria multiplica o número de requisições necessárias para carregar aquela página. No backend, o Magento precisa buscar e processar os dados de cada imagem individualmente. Em um catálogo com volume relevante de SKUs, esse custo se acumula rápido.

A loja continuava funcionando. Mas a cada produto com galeria adicionado, o carregamento ficava um pouco mais pesado. Sem intervenção, a tendência era clara.

A solução

A Trezo abordou o problema em quatro frentes simultâneas, porque nenhuma delas, isoladamente, resolveria a questão de forma sustentável.

No navegador, foi implementado lazy loading para as imagens do catálogo. As imagens fora da área visível da tela deixam de ser carregadas no momento do acesso inicial e passam a ser carregadas conforme o usuário navega. Isso reduz o peso percebido na abertura da página e distribui as requisições ao longo do tempo de navegação.

Na entrega das imagens, o Fastly foi configurado para otimizar os arquivos servidos no catálogo. As imagens passam por um processo de ajuste automático de formato e qualidade antes de chegar ao navegador, sem intervenção manual por produto.

No backend, a consulta responsável por buscar e montar os dados das imagens foi revisada. Queries redundantes foram eliminadas e o fluxo de carregamento foi reorganizado para reduzir o trabalho do servidor por requisição.

Por fim, uma camada de cache foi aplicada para que os dados de imagem já processados não precisem ser recalculados a cada acesso. O servidor processa uma vez e serve em cache nas requisições seguintes.

Os resultados

• Galeria de imagens implementada no catálogo sem degradação mensurável de performance
• Redução no número de requisições efetivas por carregamento de página de catálogo
• Menor tempo de processamento no backend por produto com galeria
• Capacidade de crescimento do catálogo sem impacto proporcional na carga do servidor