Fotos são um fator crucial na taxa de conversão de seu e-commerce. Mas não adianta…
Conforme o seu catálogo de produtos cresce e você adiciona mais extensões e outras integrações de terceiros, o desempenho e a velocidade da sua loja virtual diminui. Nós já observamos isso mais de uma vez em nossos clientes. Um bom exemplo são as extensões instaladas que não são usadas e deixadas ativadas no administrador do Magento para serem executadas em segundo plano.
As recomendações neste post focam na otimização de sua loja virtual Magento, tanto para desktop quanto para celular. Esse tipo de técnicas de otimização são úteis principalmente para sites que estão rodando há algum tempo e quando foram adicionadas extensões e outros add-ons ao longo do tempo e o site perdeu performance.
Para ser franco, um dos fatores mais importantes para a velocidade de um e-commerce Magento é o ambiente de hospedagem. A otimização do servidor não será tratada aqui. Para ter os melhores resultados, você deve escolher um servidor dedicado ou, no mínimo, um VPS.
Ferramentas de Teste de Desempenho para lojas virtuais Magento
Para começar a otimizar um e-commerce Magento, primeiro precisamos medir e testar o desempenho. O teste pode ser feito usando ferramentas online publicamente disponíveis como:
https://www.webpagetest.org/
https://gtmetrix.com/
https://developers.google.com/speed/pagespeed/insights/
https://tools.pingdom.com
Estes sites fornecem vários relatórios que podem ajudar a identificar o que está carregando uma página e às vezes eles fornecem instruções sobre como corrigir os itens problemáticos. Tenha em mente que é quase impossível otimizar um site para obter uma pontuação de 100%. Além disso, todas as ferramentas acima mencionadas são ferramentas de referência. Para diagnosticar mais a fundo o que está carregando o seu site deve-se executar testes usando a ferramenta de desenvolvedor dos navegadores e outras ferramentas.
O que o Google sugere
Recentemente, trabalhamos na otimização de um site onde o cliente tinha falado diretamente com o Google para ajudar otimizar o site.
– Para nossa surpresa, os próprios engenheiros do Google sugeriram usar https://www.webpagetest.org/ para testar, em vez de PageSpeed (ferramenta do Google).
– Índice de velocidade ideal é 2000 ou menos (mas não é tão ruim se for até 6000)
– O Google não pode armazenar tudo da página em cache.
O que Shero recomenda para acelerar uma loja Magento
O objetivo final ao aperfeiçoar um Web site de Magento para uma velocidade mais rápida de carregamento da página é alcançar os resultados de FTTB e de WebPageTest iguais aos da foto abaixo. Como se pode chegar lá?
Ao falamos de um projeto de otimização, a primeira coisa que deve ser feito é separar melhorias em fases. Isso ajuda os desenvolvedores e clientes a ver o progresso e também dá uma idéia de quais etapas de otimização funcionam bem e quais etapas não funcionam. Tenha em mente que nenhum site é o mesmo e as fases do trabalho são intercambiáveis.
Vamos analisar cada passo que seguimos ao otimizar um site Magento:
1) HTTPS em todo o site
HTTPS em todo o site torna o site seguro e melhora o desempenho em 0,1 segundos.
2) Otimização de imagem
O tamanho da imagem do banner do produto e da homepage é um dos fatores mais importantes que afeta o desempenho de um site Magento. Normalmente, os comerciantes carregam imagens brutas com resolução total no site e não seguem diretrizes para reduzir o tamanho das imagens para uma resolução aceitável. Às vezes, tais imagens podem chegar a até 50MB e o site leva uma eternidade para carregar. Ferramentas de compressão como https://optimizilla.com/ são super valiosas para reduzir as imagens. Com o Optimizilla você pode carregar várias imagens ao mesmo tempo e otimizá-las com um toque.
É ainda melhor para otimizar imagens para uso da web antes mesmo de carregá-los para uma ferramenta como Optimizilla. Por exemplo, se você estiver usando o Photoshop, as imagens precisam ser otimizadas lá primeiro e depois carregadas para a ferramenta de otimização.
3) Minify Jvascript e CSS
Minifying CSS e JS às vezes é recomendado, mas na verdade não funciona o tempo todo e é bastante complexo. Além disso, você tem que lidar com um código ilegível / script que torna impossível depurar. Uma das melhores ferramentas usadas para a minificação é o YUI Compressor (https://yui.github.io/yuicompressor/).
Existem alguns casos em que a minificação corrompe o site, ou realmente o torna mais lento. O que sugerimos é encontrar os conflitos entre os diferentes arquivos Javascript ou CSS e tentar minify novamente. Se isso não ajudar, não “minify”.
4) Habilite a compressão GZIP
Para compressão GZIP nós adicionamos o seguinte no final do arquivo .htaccess:
#### Gzip Compress #####################################
<files *.js.gz>
AddType “text/javascript” .gz
AddEncoding gzip .gz
</files>
<files *.css.gz>
AddType “text/css” .gz
AddEncoding gzip .gz
</files>
RewriteEngine on
#Check to see if browser can accept gzip files.
ReWriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
#make sure there’s no trailing .gz on the url
ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$
#check to see if a .gz version of the file exists.
RewriteCond %{REQUEST_FILENAME}.gz -f
#All conditions met so add .gz to URL filename (invisibly)
RewriteRule ^(.+) $1.gz [QSA,L]
Se o htacess não ter resultado, você pode fazer no arquivo index.php
if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) {
ob_start(“ob_gzhandler”);
}
else {
ob_start();
}
ob_start(“ob_gzhandler”);
}
else {
ob_start();
}
5) Mesclar CSS e JSPara mesclar JS e CSS, podemos usar a configuração padrão do Magento:
Sistema -> Configuração -> Avançado -> Desenvolvedor.
Você deve ter em mente que a fusão de CSS e JS não funciona sempre. Portanto, é melhor manter um olho no desempenho “real” e no que as ferramentas de benchmark nos dizem.
6) Usar cache
Dependendo do sistema de cache do seu servidor, para a etapa de habilitação de cache você terá que habilitar um dos seguintes caches:
Memcached https://memcached.org/
Apc https://php.net/manual/en/book.apc.php
Varnish https://varnish-cache.org/
Redis https://redislabs.com/rlec-flash
O cache deve ser instalado e configurado pelo desenvolvedor ou pela empresa de hospedagem que administra o servidor.
7) Bloqueio de cache nas listas de produtos
Para instalações da Comunidade Magento, onde as páginas de categoria consomem muitos recursos, usamos um módulo que permite o bloqueio de cache nas listas de produtos. Para instalações do Magento Enterprise você não precisa deste módulo porque o Magento EE usa o cache do APC. Este módulo é livre e adiciona informações de cache em Mage_Catalog_Block_Product_List. Abaixo tem uma captura de tela dos resultados com o módulo ativado e desativado.
8) Instalar o Cache de página inteira da Amasty
O cache de página inteira de Amasty é uma extensão impressionante que melhora muito o desempenho do Magento. Em nossa experiência nós vemos sempre um impacto (diminuição) para o Time To First Byte (TTFB).
9) Use CDN para conteúdo estático
Usar um CDN é uma boa maneira de melhorar o desempenho do site. Isso porque você na verdade está usando outro servidor para entregar imagens ou arquivos JS / CSS.
10) Flat Categorias no Magento
Esta opção pode ser ativada no administrador Magento. A ativação remove as tabelas EAV e reduz a velocidade de carga, pois os dados nas tabelas do banco de dados podem ser encontrados com mais facilidade.
Você pode encontrar em Sistema -> Configuração -> Avançado -> Desenvolvedor -> Catálogo -> Catálogo -> Frontend
1) Limitar links Externos e Chamadas de API
Usando o menor número possível de link externos reduziremos o tempo de carregamento, tornando o site mais rápido. Diminuir também as chamadas de API reduzirá a carga do servidor e aumentará o desempenho geral.
Por último, a maioria dos esforços de otimização tendem a se concentrar apenas no desktop e negligenciam otimização para celulares e tablets. Como as compras on-line através de dispositivos móveis e tablets aumenta a cada dia, não se esqueça de testar e otimizar sua versão móvel do site. Sinta-se livre para comentar abaixo se você tiver outras formas de otimizar uma loja em Magento.
Post relacionados
This Post Has 0 Comments