O que é performance?
Performance é um grupo de estratégias que tem por consequência manter uma boa usabilidade na loja virtual, ou seja, desde a entrada do usuário até seu fechamento de compra. Quando o cliente entra numa loja virtual, primeiramente a pretensão é encontrar fácil e rapidamente o que procura. Um site lento, é umas das maiores causas de fugas, que faz com que a receita do lojista despenque. Para que o lojista resolva este problema, é necessário investir em algumas estratégias e utilizar ferramentas adequadas.
Para melhorar o tempo de carregamento de um site, utilize ferramentas como Webpagetest, Pingdom Tools e Google Page Speed Insights.Algumas inclusive sugerem diversas melhorias para aumentar a velocidade, por meio de otimização de alguns recursos.
É um conjunto de estratégias adequadas que ajudam a manter uma boa usabilidade na sua loja virtual, evitando quedas de conversão. É sobre essas estratégias que iremos enfatizar mais abaixo, em 6 dicas.
1. Melhoria de Assets (Código do Site)
Para uma navegabilidade mais rápida, é importante se ter páginas mais limpas e leves. A melhor maneira de se conseguir isso é a minificação de códigos HTML, CSS e JavaScript, evitar plugins de terceiros e escrever um HTML enxuto.
Um excelente otimizador de códigos de HTML, CSS e JS é o cloudflare, que é um serviço conhecido entre os webmasters de fora do país, que ajuda na velocidade em que o usuário recebe as páginas do seu site.
O Google analytics é uma ferramenta muito poderosa para ajudar a melhorar a usabilidade, por meio de medições e métricas precisas. É possível se fazer análises do tempo de carregamento, colher métricas de estatísticas de visitas, quantidade de pedidos, taxa de conversão da loja virtual, dentre outras inúmeras medições.
2. O Cache
O Cache ajuda muito na usabilidade de sua loja virtual por melhorar o tempo de resposta do WebSite, pois seu recurso é utilizado para evitar a sobrecarga dos servidores e diminuir o tempo de carregamento.
Ele também melhora a indexação do Google e isso é muito importante, pois dá mais visibilidade da loja nas buscas e reduz o índice de fuga dos clientes. É interessante que essa taxa de rejeição (Bounce Rate) seja baixa, em torno dos 30%, sendo calculado através de uma relação entre a quantidade de visitas na página e a quantidade de visitantes que deixaram a mesma sem nenhum clique a mais.
Para um cliente final, a primeira experiência de ficar aguardando a abertura do site, é primordial para ele voltar ou não no mesmo, então quanto melhor o desempenho, mais chances terá de ele voltar.
Qual a taxa de rejeição aceitável para um site? (Esses são os valores geralmente encontrados nos principais mercados)
- Varejo – 20 a 40%
- Landing pages simples – 70 a 90%
- Portais (exemplo: MSN, G1) – 10 a 30%
- Sites de serviço/FAQ – 10 a 30%
- Venda de serviços (geração de leads) – 30 a 50%
- Sites de conteúdo – 40 a 60%
- Blogs – 70 a 98%
3. Estruturar bem o HTML
Primeiro temos que entender o que seria uma boa estrutura de HTML.
A boa estrutura é aquela que tem o código dentro dos padrões de sintaxe e demandas. Quando o código tem uma boa semântica e está bem estruturado, fica mais fácil e rápido a leitura e o carregamento das páginas.
O HTML pode ser comprimido também, removendo espaços, comentários e até certas aspas e fecha tags desnecessárias, isso também ajuda em deixá-lo mais leve.
Para te ajudar nessas validações, utilize o Validator W3 para obter informações a respeito do seu HTML.
4. Scripts
Além da minificação do JS, a nossa ideia nesta dica, é dar um outro foco de como os scripts podem ser menos prejudiciais ao carregamento da página e o que fazer para diminuir esses problemas.
O uso do carregamento assíncrono, por exemplo, é uma excelente prática, que diminui o tempo de carregamento da página consideravelmente. Outra forma de reduzir esses carregamentos é colocar todos os JavaScripts no rodapé da página, onde, desta forma os mesmos seriam os últimos a serem baixados, assim não bloqueando o carregamento.
Por último, uma outra dica, é fazer uma análise se é necessário a utilização de um JS na página. Muitas vezes, após analisar com cuidado cada página, vemos que não há motivos para certos JS. Eles podem ser substituídos ou até excluídos da página.
5. Otimização das imagens
Na grande maioria dos sites e e-Commerces o que mais pesa no carregamento, são as imagens. Precisamos entender se realmente é necessária muita quantidade, ou se pode diminuir a quantidade sem diminuir a visita e conversão.
Uma home page por exemplo pode ficar bastante atrativa caso tenha diversas fotos, mas talvez possa prejudicar muito o carregamento da página, perdendo conversão.
Uma página de produto com uma foto incrível, pode ser muito boa para convencimento de compra, mas igualmente ruim para o usabilidade.
No caso de não poder diminuir, é necessário otimizar essas imagens, nesse caso é preciso pensar no formato correto, mas que seja um formato que não perca qualidade e que seja específico para sua necessidade (Ex: PNG e GIF bons para imagens com cores sólidas “gráficos e logotipos” e JPG para imagens realistas e com cores em degradê).
Uma outra forma de otimizar, é usando compactadores para diminuir o tamanho. Alguns deles são: JpegMini e http://optimizilla.com/pt/.
6. Usar Content Delivery Network (CDN)
O CDN é uma Rede de distribuição de conteúdo para o cliente final, como bibliotecas de JavaScript, HTML, CSS, tipos de letras (fonte) e outros ativos, um dos mais conhecidos são o Akamai e a Amazon Cloud Front
Sua principal função, é fazer com que os usuários finais fiquem mais “próximos” dos conteúdos solicitados com segurança, uma consequência, é uma diminuição das requisições diretas aos servidores, tornando o tráfego com custos mais baixos.
Sendo assim, quando uma página é requisitada, em vez dessa chamada ir até o datacenter, processar no servidor e obter a página, a chamada vai até a rede CDN mais próxima do usuário, que pode estar na mesma cidade por exemplo.
Com isso, além do percurso ser mais curto, o próprio hosting onde está instalado o sistema, tem menos requisições.
Um ponto de atenção pode ser o custo já que esse tipo de sistema geralmente são indicados para empresas de maior porte.
Exemplos de e-commerce com performance alta:
Os 3 E-Commerces com os melhores desempenhos segundo a pesquisa do Blog Pingdom, foram os “bhphotovideo.com , hm.com e bestbuy.com”, eles carregaram nos testes em menos de 1 segundo.
Se você quer saber como a VTEX ajuda o seu site a ter uma melhor usabilidade, fale agora com um dos nossos especialistas e conheça mais.
