A velha expressão “tempo é dinheiro” não faz tanto sentido em outras áreas como no e-commerce. Cada segundo ou milésimo de segundo perdido no carregamento de uma página representam oportunidades de negócio que ficam pelo caminho.


Esse cenário pode ser demonstrado com alguns dados conhecidos do mercado, como:



  • De acordo com a Kissmetrics, 40% dos consumidores abandonam um site se ele demorar mais do que 3 segundos para carregar;

  • Segundo a Radware, um segundo de atraso no carregamento pode representar uma queda de 7% nas conversões, 11% nos pageviews e 16% na satisfação do consumidor;

  • Dados do Web Performance Today mostram que o Walmart, quando começou a trabalhar na otimização de desempenho do site, teve um ganho de 2% nas conversões para cada 1 segundo de carregamento mais veloz das suas páginas.

  • Se o site da sua loja virtual não carrega em 1, 2 ou até 3 segundos, sua performance pode e deve melhorar.


Com o intuito, o Gustavo Rios, sócio e diretor de Customer Care da VTEX, conduziu o Webinar: Dicas práticas para aumentar a velocidade do seu site. Você pode conferir o vídeo na integra logo abaixo e, depois, acompanhar a continuação deste artigo, pois mostraremos as principais informações apresentadas no webinar e algumas dicas que complementarão o conteúdo transmitido.



Como diagnosticar a velocidade da sua loja?


A maneira mais viável de identificar se o seu site está demorando para carregar é utilizando ferramentas de monitoramento de velocidade. As melhores são o WebPagetest, Pingdom Website Speed Test, PageSpeed Insights, GTmetrix e o plugin Developer Toolbar para o Google Chrome (basta apertar ‘F12’ quando acessar o site, ir na aba ‘Network’ e recarregar a página para fazer a medição).


Tomando como base os testes feitos no WebPagetest, seus resultados exibem métricas interessantes para o varejista acompanhar, como:


First Byte Time; Load Time; Start Render; Bytes In; Keep-Alive Enabled; Compress Transfer; Compress Images; Cache Static Content; Effective use of CDN.



O que pode causar lentidão em um e-commerce?


De um modo geral, o que mais pesa no carregamento de um site de loja virtual são as customizações. Isso significa que a forma como um site é personalizado, ou seja, a quantidade de imagens e tags HTML, Javascript e CSS é o que pode diferenciar o desempenho de um e-commerce dos demais.


Por exemplo, o excesso de rastreadores de publicidade, remarketing, análise, heatmap, motor de recomendação de produtos e interação com os clientes podem retardar a abertura completa do site. Aliás, muitas dessas tags são acionadas por terceiros para aumentar a quantidade de recursos do site, mas, apesar de algumas serem realmente necessárias, nem sempre essas funcionalidades adicionais compensam. Por isso, cabe a cada lojista julgar o quanto cada requisição impacta em suas conversões. Se os resultados estiverem sendo positivos, então esses chamados podem ser mantidos.


Além disso, há os recursos como armazenamento em cache e do uso de CDN. A questão é que, nesses casos, quem é cliente VTEX não sente tanto a diferença, pois a infraestrutura da plataforma é a mesma para todos. Por exemplo, em nosso sistema, tanto o CDN quanto a definição do tempo de aproveitamento da cache são nativos.


Existem outros problemas de ordem mais técnica ou profunda que merecem ser um pouco mais detalhados. São eles:


Imagens pesadas e com dimensões exageradas


As imagens carregadas em uma loja virtual não representam um problema se considerarmos apenas sua quantidade, mas sim o quanto seus arquivos pesam e o quanto eles medem.


Por exemplo, uma imagem que pese mais do que 100kb é um exagero, principalmente se levarmos em conta que um e-commerce carrega muitas imagens. O ideal é que o tamanho do arquivo não passe da casa dos 50kb até 80kb.


Em relação às dimensões dessas imagens, o problema aparece quando, por exemplo, a foto de um produto é exibida em um tamanho reduzido na prateleira da página inicial sendo que, na verdade, ela possui uma dimensão bem maior.


Vamos ser mais práticos. Imagine uma foto de uma batedeira na home de uma loja virtual de eletrodomésticos que, para o usuário, é exibida em 220px x 220px. Até aí, tudo bem. A falha ocorre quando, originalmente, essa mesma imagem possui 1000px x 1000px. Os navegadores fazem a requisição e o download da foto original e a redimensionam, geralmente via CSS, para o tamanho definido pelo lojista ou por sua equipe de desenvolvedores.


Scripts sendo chamados antes da hora


Falamos anteriormente sobre o peso que as requisições acionadas por terceiros causam no carregamento de um site de e-commerce. Só que, aqui, o grande problema está na ordem de chamada dessas tags.


Pense, por exemplo, na necessidade de exibir uma caixa de chat de atendimento sem que o usuário fique mais tempo no site ou de acionar um motor de recomendação sem que o visitante sequer tenha rolado o scroll na página de produto.


Certas requisições não precisam ser chamadas logo de cara com o carregamento principal da página. Quando isso acontece, o carregamento invariavelmente fica mais lento.


Prateleiras horizontais de produtos


Uma prática que provoca lentidão e que muitos lojistas não percebem é o uso de prateleiras de navegação horizontal.


Muitas vezes, em uma prateleira que exibe 4 produtos de uma única vez, o varejista prefere incluir 12 itens na mesma linha. O problema é que os outros 8 ficam ocultos e dependendo dos cliques dos visitantes para serem mostrados.


O Gustavo Rios, durante o webinar, destacou que o público tende a navegar de forma mais vertical do que horizontal. Portanto, incluir essas novas requisições (mais imagens e rolagens horizontais) pode ser desnecessário – a não ser que isso funcione muito bem para a sua loja.


Como reduzir o tempo de carregamento da loja?


Existem algumas boas práticas que ajudam os lojistas a melhorarem a performance do seu e-commerce e, com isso, oferecer uma experiência de uso mais agradável aos consumidores. Vamos elencar as principais a seguir com base nas dicas apresentadas no webinar:


Compacte o tamanho das imagens


Uma foto de 500kb pode ser comprimida para menos de 100kb sem perder muita qualidade na imagem. Isso é possível com a utilização de alguns programas e ferramentas. O Adobe Photoshop é uma das opções, mas existem outras aplicações mais simples, como o Riot e sites como o TinyJPG, Kraken (use a opção “Lossy”) e Compress PNG.


Na maioria dos casos, você conseguirá reduzir pelo menos 50% o tamanho dos arquivos dessas imagens, o que já traz uma leveza considerável para o site.


Redimensione as imagens


Redimensionar as fotos é mais simples do que compactá-las. Você pode fazer isso usando até o mesmo o Paint ou, se preferir, o Photoshop e o Riot.


Na internet, sites e ferramentas como o Fotor, iLoveIMG e ImageResizer podem simplificar esse trabalho.


Não há um padrão ideal para o tamanho das fotos, pois isso dependerá de onde elas serão exibidas. Na home, por exemplo, caso elas não sejam ampliadas com o passar do indicador do mouse, as imagens podem ser carregadas do tamanho que forem exibidas. Nas páginas de produtos, aí sim elas podem ser um pouco maiores, pois mesmo que sejam mostradas em dimensões menores, os consumidores podem dar um zoom para ver os produtos em alta definição.


Reduza os códigos Java, HTML e CSS da loja


A compressão de códigos desses tipos é uma tarefa mais técnica e, geralmente, fica a cargo do time de desenvolvedores e programadores da sua plataforma.


A minificação de requisições em Java, HTML e CSS consiste em retirar, modificar ou reduzir espaços, comentários, caracteres, quebras de linha e nomes de algumas variáveis. A intenção é compactar esses códigos na menor quantidade de linhas possíveis para torna-los mais rápidos e, assim, poupar recursos e acelerar o tempo de resposta dos servidores.


Algumas ferramentas podem ser usadas para fazer essa otimização de códigos, como o Adobe Dreamweaver (foco em melhoria de HTML), Minify (CSS e Java) e YUI Compressor (CSS e Java).


Altere a quantidade ou a disposição dos produtos nas prateleiras


Conforme comentamos, a organização visual dos produtos exibidos na home e nas páginas de categoria pode fazer bastante diferença no carregamento do site.


Por isso, é interessante testar um layout que elimine qualquer tipo de rolagem horizontal para focar na rolagem de scroll vertical.


Os produtos que antes ficavam ocultados podem aparecer em uma nova linha ou, se preferir, a quantidade de itens pode ser reduzida, fazendo com que o navegador tenha que carregar menos requisições.


Avalie a necessidade de usar determinadas requisições


Por meio das ferramentas de monitoramento de velocidade de site, você pode identificar as requisições carregadas por seu e-commerce. Nos resultados, vale a pena avaliar o impacto de cada script na performance e, principalmente, nas conversões da página. Isso ajudará a definir a real necessidade de cada um.


Além disso, não deixe de verificar a presença de possíveis códigos e requisições duplicadas nesses mesmos resultados ou na estrutura de HTML, CSS e Javascript do seu site.


Outra dica pertinente passada pelo Gustavo Rios foi o uso do plugin Ghostery para o Google Chrome. Por meio dele, você pode identificar todos os rastreadores e requisições de terceiros que rodam no site.


Caso você note a presença de tags duplicadas ou que executem funções iguais ou parecidas, cogite o bloqueio ou a retirada dessas requisições pelo Google Tag Manager ou por qualquer outro gerenciador de tags do seu site.


Configure a ordem de chamada dos códigos


Outra forma de gerenciar o uso dessas requisições é reordenando seus carregamentos. A sugestão, aqui, é fazer com que determinados scripts sejam acionados de acordo com a interação do usuário com o site.


O varejista pode fazer isso usando o Google Tag Manager. Nessa aplicação, ele pode, por exemplo, chamar uma tag de remarketing para ser ativada somente quando o visitante passar mais de 30 segundos no site.


Outra ferramenta que pode ser bastante útil é o LazyLoad, que melhora o carregamento das páginas ao fazer as imagens serem chamadas apenas quando aparecem no campo de visão do usuário.


Em suma, esses serviços ajudam o seu site a carregar o conteúdo primário de forma mais rápida, fazendo com que o Time to Interact seja mais curto.


Como a VTEX ajuda seus clientes a terem uma performance melhor?


O back-end do seu e-commerce também possui grande influência na velocidade do site. No caso da VTEX, como a infraestrutura é única para todos os clientes, o ponto de partida é o mesmo. Ainda assim, os lojistas começam com recursos que já aprimoram sua performance.


Um deles, o CDN nativo, já foi mencionado no texto. Além disso, os varejistas ainda contam com a compressão WebP, que consegue compactar imagens em formatos PNG, JPG e JPEG em torno de 30% a 40% do tamanho do seu arquivo, mesmo que esse já tenha sido comprimido antes.


Outra maneira que a VTEX ajuda seus clientes é com a implantação do protocolo HTTP2 para os lojistas que migrarem seus e-commerces para HTTPS na plataforma. Essa combinação oferece mais segurança para as transações feitas pelos consumidores e mais rapidez para a abertura de páginas do que o tradicional HTTP 1.1.


Além do mais, adicionamos, recentemente, na home do dashboard de cada cliente, um gráfico que monitorará o histórico do tempo médio de carregamento da loja e em comparação com os demais e-commerces da base da VTEX.



Em breve, novos recursos serão adicionados pela VTEX para melhorar a velocidade dos sites da sua base de clientes. Conforme o Gustavo Rios apontou no webinar, podemos destacar:



  • A definição de um novo período máximo para o aproveitamento da cache para arquivos estáticos;

  • A minificação de requisições em javascript.


Em uma loja virtual, velocidade de carregamento e conversão são duas coisas que estão diretamente ligadas. Por essa razão, os varejistas deveriam acompanhar mais a performance do seu site e ter um pouco mais de cautela em relação às customizações feitas nas suas páginas. Afinal, a personalização é o que mais diferencia os e-commerces mais rápidos dos mais lentos.


No caso da VTEX, isso ainda é mais evidente, já que a infraestrutura é a mesma para todos os clientes. No entanto, mesmo os lojistas que não são da nossa base deveriam se atentar a isso, pois imagens e códigos não otimizados e tags pouco produtivas podem atrasar a vida dos consumidores.


Logo, não deixe de fazer o monitoramento dessas requisições, comprimir imagens e códigos, manter apenas os scripts que mais ajudam nas conversões, entre outras práticas que tornarão sua loja mais rápida e, consequentemente, mais rentável.


O caminho para gerar mais conversões não depende apenas de uma boa velocidade de carregamento, mas também de uma usabilidade amigável ao usuário.