Como Fazer o MAGENTO Voar – Parte 1

Uma das primeiras dúvidas ao se decidir empreender e vender pela internet é: QUAL É A MELHOR PLATAFORMA PARA LOJA VIRTUAL? e com base em N critérios os empresários escolhem uma plataforma que melhor se adequa às suas necessidades.

Muitos escolhem a plataforma de comércio eletrônico Magento, por vários aspectos. No entanto, muitos que decidiram por trabalhar com esta tecnologia ficam frustrados com a velocidade dela, e por isso podem até estar perdendo vendas.

O intuito deste artigo é mostrar que o Magento é uma máquina poderosa que precisa ser entendida, de forma que seja possível utilizar todo o seu potencial em prol ao aumento de vendas na loja. Irei apresentar vários pontos e otimização iniciais necessários, mas como o escopo é amplo, dividirei em mais dois artigos de técnicas mais avançadas.

Porque é tão importante ter uma loja virtual rápida?

Muitos artigos e blogs técnicos apresentam uma série de argumentos e fatos a respeito da velocidade da loja versus conversões, visitas entre outras variáveis. Não discordo nem um pouco deles, mas prefiro ser mais prático.

Se eu acesso uma loja (ou qualquer site), na intenção de buscar uma informação, ou mesmo comprar um produto, e este mesmo site demora mais do que 2 a 3 segundos para me mostrar o conteúdo, ele já começou com o pé esquerdo comigo. Se mesmo assim, eu continuo a navegar na loja, porque ela me apresenta outras coisas bacanas ou produtos que podem ser interessantes para mim, e ainda continua a carregar lentamente às páginas, daí eu desisto!

Isto não é muito difícil de acontecer, principalmente quando o acesso é realizado por um dispositivo móvel em redes 3G. Além do mais, estamos ficando cada vez mais acostumados à coisas mais rápidas (esta é a experiência que os usuários de smartphone possuem, eles querem a mesma velocidade que têm nos aplicativos que utilizam com mais frequência)

Este mesmo conceito acima relatado é o que o Google considera como um dos critérios de ranqueamento na página de pesquisa, ou seja, quanto melhor a experiência do usuário em utilizar o seu site, melhor será o seu posicionamento nas páginas de pesquisa. Claro que este não é o único critério, na verdade há mais do que um par de centenas de critérios de ranqueamento, no entanto a velocidade de carregamento e navegação do site é um bem importante.

Como saber se minha loja é rápida o suficiente

Há diversos serviços de teste de sites disponíveis na internet, posso citar três bem interessantes:

Para sabermos se a loja está com uma velocidade de carregamento legal, primeiro precisamos entender alguns conceitos básicos. Para isto vamos utilizar o GTMetrix por ser um serviço bem completo e rápido de análise de site.

Após realizar um teste em uma página do site, o GTMetrix apresenta algumas informações principais:

PageSpeed Score: PageSpeed é um plugin do Firefox para avaliar a performance dos sites e quais aspectos podem ser melhorados. O melhor conceito é o “A”.
YSlow Score: Igualmente ao PageSpeed, o YSlow é um serviço do Yahoo! que analisa e sugere melhorias. Também sendo o melhor conceito o “A”.
Fully Loaded Time: Tempo total de carregamento da página. Quanto menor este valor, melhor. O resultado apresentado possui um símbolo em sua lateral (podendo ser um marcador vermelho, verde ou amarelo) que mostra o seu tempo comparado com outros sites. É um ótimo indicador para saber se o tempo de carregamento está além ou aquém do ideal.
Total Page Size: Tamanho total da página carregada. O ideal é que a página seja mais leve possível, não passando dos 2MB. Também há um símbolo ao lado com o parâmetro da ferramenta.
Requests: Quantidade de requisições que o navegador faz ao servidor. Cada imagem, vídeo, script, arquivo de estilo (CSS) etc, que está no código da página (HTML) é interpretado pelo navegador para que faça uma nova conexão e busque o item para ser renderizado (mostrado) na tela. O ideal é que este número fique abaixo de 100.

Importante lembrar que não basta avaliar somente a página principal (homepage) da loja, também é importante testar algumas páginas de produtos. São estas páginas as principais procuradas pelas pessoas com intenção de compra em buscadores de internet, ou seja, a sua loja possui inúmeros cartões de visita para dar uma boa primeira impressão.

Como base no resultado geral informado pelo GTMetrix, é possível verificar quais são as principais necessidades de otimização na sua loja.

O Magento

O Magento é uma plataforma de e-commerce de código-aberto que pode ser utilizada sem necessidade de comprar uma licença de uso ou pagamento de mensalidades, como são as plataformas alugadas (prontas para uso).

No entanto, é necessário que você (ou alguém especialista em Magento) disponibilize uma hospedagem, e que tenha conhecimento para instalar, configurar e manter a plataforma em perfeito funcionamento. Estes aspectos já são suficientes para restringir um pouco a sua adoção. Mas mesmo assim, é uma das plataformas para comércio eletrônico mais usadas em todo o mundo, e não é difícil entender o porque.

O Magento é uma das plataformas mais completas existentes, mas ainda sim possui uma grande capacidade (e facilidade) de ser complementada por meio de módulos de terceiros, o que a torna extremamente flexível e abrangente, podendo atender praticamente todas as demandas dos e-commerces sem a necessidade de desenvolver novas funcionalidades. Basta procurar componentes de terceiros (gratuitos ou pagos) que implementem as funcionalidades requeridas.

Esta flexibilidade possui um custo de desempenho, muitos dizem, e eu também concordo, que o Magento é uma plataforma muito robusta, mas também pesada. Daí a necessidade de executar configurações e otimizações.

Neste artigo quero trazer algumas experiências utilizadas em projetos executados que trouxeram resultados reais. Dividi estas estratégias em três níveis, de forma que, a depender do seu grau de conhecimento e controle da plataforma, possa aplicar em sua loja.

Otimizações iniciais no Magento

Nesta primeira parte, demonstro o que pode ser realizado em termos de configuração do magento, sem a necessidade de realizar instalação de componentes ou alterações nos servidores que hospedam a plataforma. Estou considerando pelo menos que você possua acesso ao usuário administrativo, e possa acessar as configurações administrativas da sua plataforma.

Vale ressaltar que é de suma importância que todas as ações aqui mostradas sejam executadas em um ambiente de homologação e que sejam atestadas os seus efeitos em sua loja antes de colocar em produção. Além disso, é imperativo que seja realizado cópias de segurança (backups) da sua loja antes de qualquer alteração no ambiente de produção para que, em caso fortuito, seja possível recuperar sem maiores problemas.

Para as técnicas abaixo, estou considerando a versão 1.9.x do Magento traduzido para o Português. É bem possível que seja possível utilizar estas mesmas técnicas em outras versões.

Habilitar o Catálogo de Produtos Flat (Flat Catalog Product)

O banco de dados do Magento foi arquitetado de maneira que fosse flexível e expansível. Desta forma, é mais fácil gerenciar suas futuras atualizações e principalmente desenvolver extensões (componentes) que irão complementar a plataforma.Powered by Rock Convert

Na contrapartida desta facilidade, a leitura e gravação no banco de dados se torna mais onerosa, reduzindo o desempenho da plataforma quando esta é mais exigida.

Para contornar este problema, o Magento possui um dispositivo que faz uma indexação destes dados de produtos (que são um dos mais acessados na loja) para que a sua leitura seja muito rápida, e assim, ganhe desempenho.

Para habilitar esta funcionalidade você deve acessar: Sistema -> Configuração -> Catálogo -> Frontend e habilitar a opção Utilizar Catálogo de Produtos Flat. Após habilitar esta opção, é necessário indexar as tabelas do Magento.

Juntar arquivos JS e CSS

Arquivo JS, ou JavaScript, são scripts utilizados pela loja para realizar as mais diversas funções na loja. Por exemplo: Quando um produto da loja é configurável e você tem a opção de escolher uma cor ou tamanho, a troca das imagens ao selecionar a cor é executado por uma instrução JavaScript. Outro exemplo: Um campo de validação de email ou CPF no cadastro também é uma função executada por um arquivo JS. Por isso a loja possui inúmeros arquivos de funções que fazem as lojas virtuais terem este aspecto dinâmico.

Igualmente são os arquivos CSS (Cascading Style Sheet), que são arquivos de manipulação visual da loja. São os arquivos de estilo – CSS – que fazem as lojas terem um aspecto bonito e principalmente responsivo, tão necessário nos dias atuais com o advento do smartphone. Portanto, as lojas em Magento e seus temas instalados nadam de braçada nos arquivos CSS.

Devida a esta necessidade de usar inúmero arquivos JS e CSS, o Magento acaba por gerar muitas requisições (Indicador Requests do GTMetrix) para o servidor, e isto gera um tempo de carregamento mais demorado nas páginas.

Para minimizar este problema, o próprio Magento possui duas funcionalidades nativas para diminuir estas requisições ao servidor, que é juntar os arquivos JS e também juntar os arquivos CSS, desta maneira ao invés de ter N requisições ao servidor, haverá somente uma para o JS e outra para o CSS, em arquivos que incluirão todo o conteúdo necessário dos arquivos separados.

Para habilitar esta funcionalidade você deve: Acessar Menu Sistema -> Configurações -> Desenvolvedor -> Configurações de JavaScript e habilitar a opção Juntar Arquivos JavaScript. Idem para o CSS, porém a última opção do menu será Configurações CSS e depois habilitar a opção Juntar Arquivos CSS.

Recomenda-se apagar o cache após as modificações, caso esteja habilitado, caso contrário, continue lendo. rs

Habilitar Cache do Magento

Cache é uma solução utilizada por diversos sistemas e plataformas para agilizar o carregamento de dados utilizados. Um exemplo que posso mostrar é quando acessamos algum site pela primeira vez. Normalmente este acesso é um pouco mais lento, no entanto da segunda vez em diante, o mesmo site é carregado mais rapidamente. Isto é possível porque o próprio browser (Chrome, Firefox e Cia) fazem o cache (armazenamento local de arquivos estáticos) dos arquivos do site, e portanto da próxima vez que o site for acessado, muitos dos arquivos utilizados pelo navegador serão carregados pelo próprio cache interno ao invés de serem baixados novamente do servidor do site.

Algo semelhante é feito pelo Magento, porém no contexto do servidor e não do navegador (não que isto também não seja realizado, mas é em outro contexto). Quando habilitamos o cache do Magento, este cria um local de armazenamento de arquivos que serão reaproveitados das diversas requisições feitas a ele, de maneira que não é necessário gerar todo o conteúdo novamente para ser enviado ao navegador do visitante.

Para habilitar o cache do magento, acesse: Menu Sistema -> Gerenciar Cache. Marque os tipos de cache que deseja habilitar (uma boa opção é habilitar todos os tipos de cache) e depois selecione a ação habilitar no menu superior esquerdo.

Importante dizer que com o cache habilitado, algumas modificações e cadastros realizados na loja podem não aparecer de imediato, portanto quando for atualizar alguma informação da loja, é sempre uma boa prática limpar o cache para que as alterações entrem em vigor mais rapidamente.

Habilitar Compilador

Há outra grande funcionalidade do Magento que aumenta significativamente o desempenho da loja é o compilador. Como o Magento foi construído de forma a ser expansível, ele acaba gerando uma infinidade de arquivos, em diversas pastas, que devem ser lidos e processados inúmeros vezes para gerar as páginas e processos necessários para a execução da compra dentro da loja.

A fim de melhorar e agilizar esta busca e leitura desta infinidade de arquivos espalhados na instalação do Magento, o compilador, ao ser habilitado, realiza uma varredura nos arquivos e extensões utilizadas no código e realiza uma cópia de todos os arquivos para uma única pasta dentro da instalação do magento. Dessa forma, todos os arquivos PHP (códigos-fonte da loja) serão consultados em uma única pasta de forma ordenada, acelerando a sua consulta.

Para habilitar o compilador, acesse: Sistema -> Ferramentas -> Compilação. Acionar o processo “Rodar Processo de Compilação” e caso não tenha sido habilitado, Acionar “habilitar”.

Muito importante!!!! Ao habilitar o compilador, caso tenha necessidade de realizar alguma instalação ou remoção de extensões ou customizações, é fundamental que antes desligue o compilador. Caso contrário, terá uma surpresa desagradável com a sua loja fora do ar!

Algumas dicas Bônus sobre as otimizações iniciais

Escolher uma boa hospedagem

Como descrito anteriormente, o Magento é uma plataforma muito robusta e completa, e portanto exige mais dos equipamentos (servidores) que hospedam a solução. Sendo assim, hospedagem muito barata pode não ser adequada para a sua loja Magento. No início, quando não há muito tráfego, pode até parecer suficiente, mas quando o mínimo de visitantes começa a surgir, ela já não dará mais conta.

Seguem alguns critérios que podem ajudar a escolher uma boa hospedagem:

Faça alguns testes com as ferramentas em lojas que utilizam o servidor e verifique os resultados.
Prefira servidores que estejam próximos ao seu público-alvo, para que o tempo de latência seja o menor possível. Quando o servidor fica longe (China por exemplo), há um pequeno atraso para carregar o site.
Prefira opções onde o servidor de banco de dados seja distinto do servidor que hospedará a loja, dessa maneira haverá menos disputa por recursos da máquina.
Dê preferência por servidores que utilizam NGINX ao invés do Apache. Não que este último seja ruim, mas o NGINX é uma solução melhor e mais rápida.

Upload adequado de imagens

Por último, mas não menos importante, são as imagens que são utilizadas dentro da loja. Imagens representam boa parte do tráfego de carregamento das páginas do seu site, e quanto mais imagens (e imagens pesadas) houver, mais demorado poderá ser o carregamento da página (indicadores Fully Loaded Time e Page Size do GTMetrix).

Para melhorar e reduzir o tamanho das imagens utilizadas, sugiro duas coisas:

Não utilize resoluções de imagens maiores do que realmente serão usadas pela plataforma. Exemplo: Se as imagens apresentadas pelo seu produto possui resolução máxima de 1000 x 1000 pixels, não vale a pena subir uma foto do produtos com altíssima resolução (5000 pixels) porque o Magento irá mostrar apenas 1000 px, no entanto será carregado uma imagens de 5000 px, que será muito mais pesada. Escrevi um artigo explicando melhor sobre o uso de imagens em lojas virtuais, vale conferir!
Antes de subir qualquer imagem (png ou jpg) para a sua loja, além de utilizar a resolução correta, é importante fazer uma compactação. Há diversos serviços na internet que fazer esta compactação, um que recomendo é o tinyPNG (tinypng.com), com ele é possível reduzir as imagens em mais de 50%.

Nos próximos dois artigos irei explorar técnicas mais avançadas de otimização da loja Magento, não perca!