O que fiz para deixar meus sites mais rápidos e poupar recursos
Desenvolvimento, Desenvolvimento, Magento 1, Magento 2, Para Magenteiros
Atualizado em 27 de maio de 2020
Quem trabalha com e-commerce sabe que cada segundo a mais para carregar uma página impactará no número de pedidos e taxa de conversão.
De acordo com estudos, o Google aponta que um segundo a mais em seu site pode representar até 20% a menos na taxa de conversão. Ou seja, se a cada 100 visitantes, 10 comprariam alguma coisa, ao fazer alguma alteração que aumente em 1 segundo o carregamento do seu site, você perderia 2 vendas desta amostra.
Como saber o que pode ser feito?
Ao abrir seu Google Chrome e navegar até o inspetor de elementos você pode ter uma ideia do que pode ser feito para melhorar a velocidade do seu site.
No relatório de auditoria do Chrome é possível ver o score da nossa página e o que fazer para melhorar sua velocidade. Isso também é possível através de ferramentas de performance como GTMetrix, WebPageTest ou Pingdom.
Muitas destas melhorias são complexas de serem realizadas, e eventualmente precisam de um desenvolvedor.
Um dos problemas…
Praticamente todo site hoje em dia usa bibliotecas JavaScript e CSS vindos de projetos open source e bibliotecas bastante conhecidas.
No Magento e até no WordPress não é diferente. Fazemos uso de jQuery, PrototypeJs, Bootstrap CSS, e muitos outros componentes que nossos clientes precisam baixar para suas máquinas ao menos uma vez ao visitar nosso e-commerce.
Além disso, a maioria dos sites não são hospedados no Brasil devido ao alto custo de infraestrutura. Desta forma, ainda temos mais um fator para deixar nosso cliente esperar um pouco mais.
Bom, não precisa ser assim.
Uma solução
A utilização de CDN’s, ou Redes de Entrega de Conteúdo tem nos ajudado a otimizar esta entrega há algum tempo. Soluções até gratuitas como Cloudflare, nos permite ter nosso site replicado em diversos lugares do mundo e entregá-lo à nossos visitantes usando o servidor que estiver mais rápido/próximo dele.
A configuração de um serviço como este pode ser um tanto complexa e muitos testes devem ser feitos para evitar problemas.
Uma outra solução para todos
Uma outra solução mais simples de ser implementada resolve magicamente o problema da entrega de conteúdos comuns como jQuery, Prototype e outras bibliotecas em nossos sites.
Se um único serviço de CDN possuí diversos servidores espalhados pelo mundo para entregar um conteúdo de forma rápida e otimizada, imagine se você pudesse ter vários CDN’s de uma só vez para entregar esses conteúdos?
Bom, você pode. Não custa nada e é simples de implementar.
Estou falando do JsDelivr.
Ele não é o único com a mesma proposta, mas tenho usado ele há algum tempo e não tenho do que reclamar.
Todo arquivo estático (CSS, JS, etc) que estiver hospedado em um repositório público pode ser cacheado, otimizado, distribuído e entregue pelo JsDelivr em um dos seus parceiros de CDN.
Além disso ainda é possível especificar a versão que deseja, e se quer que o arquivo seja entregue minificado, tornando ele ainda menor e mais rápido.
Troque uma URL e converta mais
Se o seu site ou e-commerce faz chamadas à bibliotecas que estão hospedadas no NPM, WordPress ou Github, faça um teste e experimente trocar suas URL’s.
Por exemplo:
<script type="text/javascript" src="https://www.magenteiro.com/magento2/assets/js/jquery.js"></script>
Troque por:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>
https://www.magenteiro.com/magento2/assets/js/jquery.js – corresponde ao jQuery versão 1.11.1. Ele está em uso, e é hospedado localmente no Magenteiro.
Trocando a URL dele para https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js faz com que o mesmo arquivo além de ser minificado seja entregue de forma otimizada pelo datacenter mais próximo. Veja o resultado:
O mesmo arquivo, 66% menor carrega em 28 milésimos de segundo ao invés de levar 1 segundo inteiro. E caso o seu usuário já tenha visitado outro site que usa o mesmo arquivo ele carregará à partir do cache.
Como o jQuery está disponível e versionado em vários lugares, incluindo o github (em github.com/jquery/jquery), bastou trocar a url. Veja adiante neste artigo como isso funciona.
No exemplo acima, alterando uma linha de código posso deixar de perder 20% da minhas conversões (de acordo com o Google). (Por sinal, o exemplo acima é real e preciso mesmo mudar isso. :P)
Módulos para Magento com CDN (e como isso funciona)
Se você desenvolve temas ou módulos open source esta pode ser uma boa oportunidade de melhorar a experiência de seus usuários.
Há alguns meses, implementei tal recurso no módulo PagSeguro para Magento 1. Ou seja, agora os usuários podem optar por usar o JsDelivr na entrega do JavaScript que é carregado no checkout.
Desta forma, como o módulo está no Github, ao invés de inserir o arquivo JS a partir da loja do cliente, ele pode optar por carregar a partir do JsDelivr. Ao invés de buscar o JS em lojadocliente.com/js/pagseguro/pagseguro.js, a URL carregada passa a ser por exemplo https://cdn.jsdelivr.net/gh/r-martins/[email protected]/js/pagseguro/pagseguro.min.js.
Onde:
- /gh/ – indica ser uma URL do Github
- /r-martins/ – o dono do repositório
- /PagSeguro-Magento-Transparente/ – o nome do repositório
- @3.8.4 – a versão do módulo no github, correspondente à tag/release que queremos
- /js/pagseguro/pagseguro.min.js – buscará o arquivo em questão no repositório, e se não existir, pegará o arquivo de mesmo nome (pagseguro.js) e minificará seu conteúdo, removendo espaços e afins para torná-lo menor.
Outras melhorias de performance em uma loja Magento 2
O uso de CDN’s é apenas uma das formas de se melhorar a performance em busca de uma nota A nos testes de velocidade. O JsDelivr apresenta uma forma simples de se ganhar velocidade em chamadas à bibliotecas comuns e arquivos estátivos.
No Magento 2: O Curso eu mostro como configurei um servidor de $10 otimizado para uma loja Magento, e como fiz ele carregar em menos de 1 segundo mesmo com 42 mil produtos. Além de mostrar um passo a passo com a instalação do Magento 2, também mostro como configurar caches, e outros componentes do Magento e do servidor para uma melhor performance.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/para-magenteiros/magento-site-mais-rapido/"]