Anúncios do Facebook em sites externos e aplicativos Android e iOS
Veja como anunciar no Mercado Livre em 3 passos

Meu site está lento. E agora?

Publicado em: • Última Atualização:

Sendo um lojista preocupado com sua loja e com a experiência do seu cliente, você já pode ter testado seu site em alguma ferramenta de teste de performance, como o Google PageSpeed Insights, ou o WebPage Test, ou o GTmetrix, para ver se seu site não está pesado demais para o usuário.

Se você não fez, faça, pois a velocidade de carregamento e resposta de um site é um fator crucial para a permanência do usuário. Quem nunca desistiu de acessar um site que demorou demais para carregar ou ficar funcional, legível, clicável, navegável?

É pensando nisso que o próprio Google leva em conta a velocidade do site na hora de classificá-lo nas buscas. Sites mais rápidos podem ganhar posições em relação aos mais lentos. Especialmente em celulares a performance é um fator ainda mais determinante, pois a experiência de uso de um site no celular já é ruim por causa do espaço reduzido, imagine se o site for lento!

Se você já fez o teste, muito provavelmente tomou um susto: você certamente não sabia quão ruim era o score do seu site até esse momento! Mas você não é o único não: ao menos na minha experiência, um site com uma performance realmente boa é algo relativamente raro, ainda mais quando ele é criado ou gerenciado por um leigo no assunto. É muito fácil cometer erros e perder pontuação com isso.

Mas eu não vim aqui para desanimar ou culpar ninguém: a intenção deste artigo é mostrar como esse problema é multifatorial, e depende de inúmeras coisas, nem todas dentro do seu controle (mas algumas sim).

Mas vamos lá, abaixo vou apresentar os principais fatores gerais, explicar o que são e a ideia básica de como resolver ou melhorar os resultados em casa um.

Peso / Imagens

Uma página de um site é uma coleção de arquivos: HTML, JavaScript, CSS, imagens, vídeos, etc. Esses arquivos, assim como os que você tem no seu computador, possuem um peso, medido em bits, bytes, Kb, Mb e assim por diante.

Quando baixamos uma página, esses arquivos são baixados, o que funciona como qualquer download: quanto mais pesado, mais demora. Então, o ideal é que esses arquivos sejam leves, ou em menor quantidade.

Dicas de ouro: 

  • Pegue leve com as imagens! Use menos imagens, menos banners;
  • Tome cuidado de utilizar imagens com pouco peso, compactadas;
  • Em alguns temas da Tray você pode escolher quantos produtos mostrar em uma vitrine. Escolha de acordo com a sua estratégia de vendas e coloque poucos.

Observação: quando pensamos em testes de performance, é importante entender que a maioria das medidas é feita por página, e não por site. Então, para ter a real medida de performance de um site, a performance de cada página precisa ser testada. Algumas vezes uma página é super pesada, enquanto as outras são leves, o que indicaria que só uma delas tem um problema isolado.

JavaScript

Os arquivos JavaScript (JS) são responsáveis por boa parte da interatividade da sua página e são quase imprescindíveis. Mas, infelizmente, se forem pesados, excessivos e mal programados, são um dos principais fatores de lentidão no uso do seu site. Ele pode até carregar rápido, mas demorar muito tempo para ficar clicável, por exemplo.

O que faz com que um JS torne seu site lento é muito complexo para explicar aqui, mas algumas coisas podem indicar algum possível mal uso de JS. O Google (como sempre) mostra algumas possibilidades de melhoria de performance.

Dicas de ouro: 

  • Pegue leve com as animações! Não carregue seu site com animações só por animar. Certifique-se que as animações cumprem uma função clara no uso do site;
  • Nem toda animação é feita por JS, mas ainda assim, podem impactar a performance. Alguns exemplos de animações comumente feitas com JS são sliders de banners e carrosséis de produtos;
  • Evite pop-ups! muitos deles são feitos com JS e ainda por cima obstruem a interação do usuário, se tornando um incômodo mesmo que sejam rápidos;
  • Desenvolva com quem entende!

Código de Terceiros

Digamos que você tenha feito um site impecável em termos de performance, e em um determinado dia, você decide instalar uma nova ferramenta de análise, ou um plugin de pop-up, ou colocar o bloquinho de Fanpage do Facebook. Pronto: seu site começou a ficar com score de performance ruim.

Os códigos de terceiros (que podem ou não ser JS) não são algo necessariamente ruim, mas são justamente códigos sobre os quais você não tem nenhum conhecimento ou controle.

Ao mesmo tempo, existe o Google Tag Manager, que serve justamente para facilitar a inclusão de código de terceiros. E não é à toa, pois às vezes você precisa do código. Mas a chave é garantir que você realmente vá ter benefício com isso.

Dicas de ouro: 

  • Evite instalar códigos de terceiros;
  • Se precisar instalar, instale poucos;
  • Os poucos que você instalar, tente conhecer;
  • Garanta que vá fazer um uso que compense a perda de performance!

Servidor

Os arquivos do seu site estão sempre hospedados em um ou mais computadores em algum lugar do mundo, que são os servidores. Quando você tenta abrir um site, você está mandando um “pedido” para o servidor, que manda a “resposta”, no caso, é a página do site.

Cada pedido vai demorar um tempo para chegar no seu computador. E isso se deve a muitos fatores, que são os mais difíceis de você controlar. São fatores que afetam a velocidade da sua conexão com o servidor e o tempo que leva para ele processar e enviar o pedido.

Algumas coisas se resolvem na programação do seu site, mas outras, só por quem é responsável pelo servidor!

Dicas de ouro: 

Desenvolva seu site com quem entende (acho que já ficou claro);

  • Contrate bons servidores de hospedagem;
  • Veja com seu desenvolvedor se é possível utilizar uma CDN.

Tema

Imagino que muitas pessoas estavam esperando justamente por esta parte, já que muitas vezes uma troca de tema causa uma grande variação de performance. Isso é porque o tema é ponta onde culminam todas as variações que apresentamos nos itens anteriores.

Um tema deve ser bem desenvolvido para que ele faça uso de boas técnicas de performance e que utilize os recursos e as funcionalidades de forma mais otimizada. Mas ele não age sozinho: ele depende do seu conteúdo e de suas configurações (especialmente em temas que permitem muitas configurações).

Vamos colocar aqui alguns exemplos de como o tema interage com as questões acima:

  • é o tema que apresenta as imagens cadastradas. Não é culpa dele se você cadastrar muitos banners, ou banners pesados, mas pode ser culpa dele se ele mostrar a versão mais pesada de uma imagem mesmo tendo uma versão mais leve disponível;
  • é o tema que utiliza os arquivos JS para fazer seus sliders, carrosséis, cronômetros, carrinhos flutuantes, etc. Não é culpa dele se você decidir utilizar demais esses recursos e ligar todos ao mesmo tempo sem necessidade, mas é culpa dele se esses arquivos forem pesados, mal escritos e colocados no lugar errado do código do tema;
  • o tema pode estar funcionando perfeitamente sem nenhum contratempo, e simplesmente começar a ficar lento ou até mesmo “travar” totalmente o funcionamento se for colocado um código de terceiros incompatível com ele ou muito pesado.
  • um tema mal escrito pode até mesmo fazer o servidor responder mais devagar! Mas claro, isso também pode depender de quais e quantos recursos do tema estão ligados. Se você quiser exibir 4 produtos na home, é bem diferente de você exibir 100! O servidor vai penar mais no segundo caso.

Resumindo: se você comprar um tema, mostrar 8 produtos e 4 banners na home, pode ser que a performance fique excelente! No momento em que você decidir exibir 60 produtos em 3 carrosséis, colocar 3 sliders de banners com 6 banners cada um, ligar o plugin de página do Facebook e incluir aquele pop-up maroto que abre quando você tenta trocar de aba, pode ser que sua performance vá lá embaixo.

Deu pra perceber como o tema pode ter bastante responsabilidade, mas não toda? Isso é muito importante de entender. E se ficou difícil de entender, é aí que eu digo: não adianta apenas fazer os testes de performance sem entender o que eles avaliam. Por isso é muito importante o auxílio de um profissional que entenda do assunto e também do seu tema para avaliar com você como fazer as melhorias. E isso exige a sua participação, pois não adianta o profissional decidir remover um código de terceiros que você considera importantíssimo para o seu negócio. Talvez seja preciso pensar em alternativas em conjunto.

E se você está muito preocupado com performance, em primeiro lugar, parabéns! Em segundo lugar, entenda que esse assunto é mesmo complicado e o caminho é árduo. Nem todos (na verdade bem poucos) chegam ao topo da performance!

Ficou com alguma dúvida? Faça parte do nosso grupo no Facebook com especialistas em e-commerce e outros lojistas e envie sua pergunta.

Está pensando em criar uma loja virtual? Faça o teste e descubra se você está pronto!

Meu site está lento. E agora?
Avalie esse artigo!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *