O que devo fazer para minha loja ser mais rápida

por: Gustavo Rios   October 18, 2016 11:59 em

Entre as dúvidas recorrentes que os lojistas enfrentam, uma chama atenção pela frequência e importância. Diz respeito ao tempo de carregamento da página, que tem influência direta na performance da loja.

De acordo com a Amazon, para cada 1 segundo a mais no seu tempo de carregamento, a conversão sofre queda de 7%.

O Walmart fez um estudo pelo qual concluiu que quando o tempo de carregamento saltava de 1s para 4s, sua conversão despencava drasticamente, conforme a ilustração abaixo:

grafico

Fonte: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic

 

O mesmo estudo concluiu que para cada 1s a menos no tempo de carregamento, a conversão crescia 2%.

E não é somente a conversão que é afetada pela lentidão. O Google passou a levar em consideração o tempo de resposta da loja como um dos fatores de relevância na busca.

Em relação às lojas VTEX, muitos me questionam por que algumas são tão mais rápidas que outras. “Gustavo, me coloca na mesma infra desta loja aqui!”

É importante ressaltar que a VTEX possui uma estrutura SAAS Multi-Tenancy, ou seja, todos os clientes usufruem de uma mesma infraestrutura – infraestrutura esta que é escalável, fornecida por nossa parceira Amazon AWS. Todos os nossos serviços estão distribuídos para atenderem a todas as lojas, sem exceção.

cloud-based-infra

 

Após esta introdução, vamos aos termos práticos.

1. Ferramentas para diagnóstico

Existem hoje diversas ferramentas gratuitas que realizam um diagnóstico detalhado da sua loja. Dois exemplos são o Web Page Test (webpagetest.org) e o Page Speed Tool (https://developers.google.com/speed/pagespeed).

Estas ferramentas geram alguns indicadores de performance com respectivos níveis de criticidade, para fornecerem melhores resultados.

indicadores

Com o Web Page Test, é possível inclusive gerar um vídeo comparando a performance da sua loja à dos seus concorrentes.

 

2. Entendendo esses indicadores

  • First Byte Time – É o tempo decorrido do momento em que um usuário faz uma requisição até o momento em que o primeiro byte da resposta chega até o navegador. Quanto maior o First Byte Time, mais tempo vai passar até o início da renderização da página, e quanto mais demorar para chegar qualquer informação ao cliente, mais tempo o navegador vai esperar até poder fazer o parse e assim começar seu trabalho.
  • Keep-Alive Enabled – Uma conexão Keep-Alive significa uma conexão persistente, ou conexão de vida persistente, entre o cliente e o servidor. Ou seja, esse indicador mostra que a conexão não se quebra de forma intermitente.
  • Compress Transfer – Compressão de transferência de arquivos para acelerar o tempo de carregamento.
  • Compress Images – Compactação do tamanho das imagens. Este é um dos pontos que diferenciam bastante a performance de uma loja da outra. É comum o carregamento de imagens grandes demais, que depois sequer são exibidas com esse tamanho, o que tem grande influência no tempo de carregamento.
  • Cache Static Content – Em resumo, é o aproveitamento do cache do navegador. Essa técnica consiste em ativar o cache do site e faz com que todo o conteúdo estático da página visualizada seja armazenado no computador do usuário. Supondo que o usuário acesse a mesma página pela segunda vez, esse conteúdo estático será carregado diretamente do computador do usuário, fazendo com que o tempo de carregamento do segundo acesso seja muito mais rápido que o do primeiro.
  • Effective use of CDN – A VTEX usa servidores CDN (Content Delivery Network ou Rede de Distribuição de Conteúdo) para melhorar o tempo de carregamento da sua loja. Esse indicador mostra o uso desse recurso.

 

3. Por que não consigo nota A no quesito Cache Static Content (Leverage browser caching)?

Essa avaliação é baseada na declaração do tempo de validade do conteúdo estático armazenado em cache. Acontece que estas ferramentas definem como tempo razoável de cache um mínimo de 30 dias. Na VTEX, por conta da dinâmica do nosso negócio, o tempo dos arquivos estáticos é bem menor: 50 minutos. Este é o motivo de essas ferramentas normalmente darem nota baixa nesse quesito. Um ponto importante a ser considerado, no entanto, é que nessas ferramentas não existe uma distinção da natureza do site. Para elas, tanto faz se ele é de comércio eletrônico ou uma página institucional que requer menos atualizações.

 

4. Analisando scripts de parceiros executados na loja

Outro ponto importante é avaliar os scripts de terceiros que estão sendo executados na loja. Hoje temos várias soluções baseadas em scripts, como Prateleira de Recomendação, Chats, Remarketing etc., e entender quantos e quais estão em execução ajuda a identificar possíveis gargalos de performance. Uma boa sugestão para analisar o que está sendo carregado na sua loja é a extensão Ghostery (https://www.ghostery.com). É uma ferramenta que pode ser facilmente instalada no seu navegador e que possibilita a análise individual de cada script, como mostra a imagem abaixo:

ghostery

5. Conclusão

Por possuir estrutura SAAS Multi-Tenancy, a VTEX oferece uma infraestrutura única a todas as lojas, sem exceção. Isso significa que as diferenças de performance entre as lojas têm origem nas diferentes customizações, e não na infraestrutura disponibilizada pela VTEX. Portanto, para entender como tornar a loja mais rápida, é essencial saber medir – por meio de ferramentas e indicadores – a performance de diferentes atributos do site, como compactação de imagens, compressão de arquivos, cache, consistência da conexão e número de scripts executados. Entendendo esses indicadores, e como eles afetam a performance da loja, é possível tomar as medidas que diminuirão o tempo de carregamento e aumentarão a taxa de conversão.

  • Paulo André

    Bom artigo, parabéns!

  • Marcelo Anderson

    Artigo muito bom!

  • demidiodesign.com.br

    parabéns pelo artigo !! 🙂 http://www.demidiodesign.com.br