Dez dicas para otimizar temas no Magento Commerce

Tomei como inspiração para escrever esse post o artigo “10 (Magento) Front-End Development Practices“, publicado há dois anos por Sander, no blog Boosting Ecommerce. Interessante como continua valendo boa parte do que ele escreveu.

Se construir temas no Magento Commerce já é visto como uma tarefa problemática, o que podemos dizer de construir temas otimizados, que possam auxiliar no desempenho da loja virtual? Pois aqui estão dez dicas de como otimizar temas no Magento Commerce:

1. lembre-se que o tema padrão, aquele que vem nativo no Magento Commerce e que está na pasta base/default, é completo. Isso significa que ele está no topo da hierarquia e tem tudo aquilo que uma loja precisa para funcionar. O seu tema só precisará ter realmente o que será modificado e nada mais. Não alongue seu tema – aquele que irá na pasta meu-tema/default – além do que é realmente necessário, criando e construindo apenas os arquivos que serão utilizados
2. quando eu me refiro a não alongar o tema, isso também inclui não colocar elementos desnecessários apenas porque se quer deixar a “loja mais bonita”. Pense na usabilidade e inclua elementos que sejam fáceis de carregar e práticos de usar. Quando se pensa na experiência do cliente, deve-se avaliar se realmente uma animação fará diferença em uma decisão de compra ou se será apenas mais um elemento potencial para falhas e travamentos de navegadores
3. conheça a estrutura de templates e layouts do Magento. Entenda como eles funcionam e utilize toda essa estrutura para criar temas mais leves e funcionais. Isso também lhe ajudará a criar temas que estejam de acordo com as boas práticas. Sim, o Magento é um software muito bem arquitetado e seguir as convenções propostas fará com que seu tema e sua loja sejam melhores
4. essa dica é manjada: utilize o Template Path Hints, na aba Developer da área de Configuração. Com ele você poderá saber exatamente quais blocos PHTML estão sendo carregados e onde fazer as alterações necessárias
5. instalar o Firebug em seu navegador também será muito útil. Com ele, você saberá quais são os estilos e classes CSS utilizados e poderá testá-las e alterá-las, à vontade
6. quando for montar um tema novo, do zero, utilize o pensamento ‘top-down‘. Pense primeiro nos blocos estruturais de sua loja, depois nos blocos de conteúdo, depois no posicionamento e por último na cara que eles terão
7. quando for usar scripts, tome cuidado para que ele não conflite com o Prototype, o framework javascript que vem com o Magento
8. o Magento traz uma função que permite a união de diversos arquivos CSS e JS, em um arquivo de cada tipo. Com essa função habilitada, ao invés de carregar 3 ou 4 arquivo CSS, o gerenciador de cache prepara um único arquivo com todo o CSS. O mesmo vale pro JS. Teste essa função e utilize sempre que possível para reduzir o tempo de carregamento da página
9. teste seu tema em diferentes navegadores e faça as correções necessárias antes do lançamento. Essa é uma das tarefas mais difíceis, pois envolve inúmeras variáveis, mas será fundamental para evitar problemas com potenciais clientes da loja no futuro e vendas perdidas
10. se estiver trabalhando em equipe, controle seus arquivos para evitar que dois colaboradores estejam trabalhando no mesmo arquivo, ao mesmo tempo

E você, quais são suas dicas para otimizar temas em Magento Commerce?