Site lento e pesado? Saiba como deixá-lo mais leve e rápido!

Veja soluções para deixar seu site com carregamento mais rápido. Evitar excessos é primordial, mas há muita otimização que deve ser feita.

Acelerar o carregamento de um site não é mágica, nem impossível – mas também não é milagre.

A primeira coisa a ser feita é refletir sobre a quantidade de coisas que carregam em seu site. E quando digo coisas, me refiro a tudo: imagens, scripts, banners, funções e por aí vai.

Digo isso porque não é possível ter um site veloz e com excessos ao mesmo tempo. É possível ter apenas uma das duas versões.

Vou comentar abaixo item a item de o que pode ser feito para otimizar seu site. Nem sempre sacrifícios são necessários – às vezes você está apenas com imagens muito grandes ou em uma hospedagem ruim.

Mas na maioria dos casos há um grande vilão causador de lentidões. E esse vilão normalmente não pode ser reduzido – muito menos removido por completo.

comparação de png com webp

Otimização de imagens

Nada mais justo que esse seja o primeiro item. Afinal, em absolutamente todos os casos de lentidão que analiso, as imagens não estão otimizadas.

Alguns casos beiram o absurdo, como sites com imagem de fundo pesando quase 2MB. Isso é um exemplo real, e a otimização da imagem reduziu o arquivo para 366kb.

Mas não basta só reduzir o tamanho dos arquivos. Pra otimizar suas imagens por completo, tenha em mente:

  1. As imagens devem ter o tamanho certo: se o visitante irá visualizar a imagem com largura de 960px, por exemplo, não tem por que você salvar essa imagem com largura superior a isso.
    Lembrando que há diversos formatos de tela por aí, ou seja: nem todo mundo irá ver essa imagem com os mesmos 960px de largura, já que algumas telas podem ter 300px, por exemplo. Ou seja, é preciso entregar o tamanho certo para cada resolução também.
  2. Extensão correta para cada caso: Se você salva fotos como PNG, pode parar por aí! Para cada extensão há um tipo de imagem certo. Fotos devem ser salvas como JPG, e ilustrações como PNG. SVG é o formato ideal para ícones, logos e algumas ilustrações também. Aqui há um texto bem detalhado sobre o assunto.
  3. Menor peso possível: Agora sim vem a parte da redução do tamanho do arquivo. Escrevi um post com dicas para esse tipo de trabalho. É possível reduzir o tamanho das imagens sem que elas percam qualidade.
  4. WebP: Por fim, é possível converter as imagens para o formato WebP, que foi feito pelo Google e promete uma redução ainda maior no tamanho total do arquivo. Porém, alguns navegadores ainda não suportam esse formato, então é preciso entregar as duas versões para o visitante (de forma que o servidor, por exemplo, detecte se o navegador suporta ou não WebP, e então carregue apenas um dos dois formatos). No link do item 2 há mais detalhes sobre isso.

Lazy loading

Lazy loading é uma tecnologia que adia o carregamento de elementos até que o visitante esteja perto de visualizá-los.

Como assim?

Bom, imagine o seguinte: você fez um post com mais de dez imagens. Ao acessar seu site, o visitante vê apenas uma dessas imagens na primeira dobra (como “dobra” entenda a altura do monitor: a primeira dobra é o topo do site até o final da tela do monitor, a segunda dobra é vista quando o visitante rola a página para baixo ultrapassando essa primeira dobra – e por aí vai).

Aí ele decide que não quer ler o post e fecha a janela. Só que mesmo vendo apenas uma imagem, as outras nove carregaram mesmo assim.

Com lazy loading, só a primeira imagem é carregada. As outras imagens vão sendo carregadas conforme o visitante rola a página para baixo, chegando perto de visualizá-las. Ou seja, o lazy loading permite o carregamento do que está prestes a ser visto.

Isso também serve para vídeos e iframes em geral. Com isso o carregamento da página fica bem mais veloz, já que só o necessário é carregado de primeira.

Fontes de sistema

Fontes (tipografia, o “estilo das letras” do seu projeto) personalizadas são uma boa forma de manter sua identidade visual consistente. Mas sejamos sinceros: isso só é útil para fins institucionais. Se você tem um blog de conteúdo voltado para nichos e não tem uma preocupação com uma identidade específica para sua marca (algumas vezes nem há marca), não tem por que inventar.

Digo isso porque webfonts (fontes que são carregadas em seu site) podem ser bem pesadas. Pra evitar isso, basta utilizar fontes de sistema. As ideais são essas:

FontesWindowsMacUbuntuiOS
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS

Arial, Georgia e Times New Roman são as grandes campeãs. Não há Android na tabela acima porque as fontes pré-instaladas por lá são bem específicas. Então, é recomendável sempre utilizar um fallback como serif, sans-serif, monospace e cursive – nesses casos o sistema substituirá a fonte por uma do mesmo estilo.

Utilizando fontes de sistema, ou “web safe fonts”, você evita mais uma coisa carregando em seu site – afinal, a fonte utilizada está instalada no dispositivo do visitante.

Repense os scripts do projeto

Será que você precisa mesmo de tanto javascript assim? É necessário que o jQuery carregue em todas as páginas?

Analise e repense todos os scripts utilizados em seu site – os internos e principalmente externos, como aquela caixa de curtidas do Facebook e botões oficiais de compartilhamento das redes sociais. Acredite, isso retarda o carregamento do seu site.

Faça também com que cada script carregue apenas onde é necessário. Com isso, utilize apenas o que é necessário também. Não tem por que carregar o jQuery se você precisa de algo simples que seria possível fazer em javascript puro.

Também recomendo baixar todos os scripts possíveis e carregá-los diretamente em seu site, evitando utilizar hospedagem de terceiros. Isso, inclusive, ajuda a aprimorar o próximo tópico.

Por fim, certifique-se de carregar os scripts no final do código, se possível. Se não for possível (ou seja, se algo parar de funcionar), mais um motivo para repensar os scripts!

código minificado

Minificação do código

A minificação e fusão dos códigos é imprescindível pra deixar as coisas mais leves.

Em meus projetos, sempre que possível deixo o CSS inline no <head> em vez de carregá-lo de um arquivo .css. E todos os arquivos internos de Javascript viram um só no final do código – os externos permanecem independentes, mas também carregam no final.

Mas detalhe: Isso pode prejudicar o funcionamento do seu site. Alguns scripts, por exemplo, dependem de chamadas no começo do código. Como o autoads do AdSense, que precisa “ler” seu site antes de decidir onde colocar os anúncios. Então, sempre é preciso fazer uma série de testes.

Corrija todos os erros 404

Isso é importante, porque um erro 404 pode até fazer com que seu site saia do ar.

Quando você deletar alguma imagem, por exemplo, certifique-se de que o código dela foi removido do site. Caso contrário, a cada acesso o servidor tentará carregar essa imagem, gerando o erro 404.

Cache é indispensável

Indispensável, mas infelizmente nem sempre pode ser utilizado.

O cache transforma seu site em uma página em HTML estático. Assim, quando um visitante acessar seu site, o servidor não precisará fazer requisições ao banco de dados e coisas do tipo: tudo estará salvo em HTML.

Porém, há algumas restrições.

Por exemplo, se você utiliza um sistema de comentários nativo em seu site, a cada comentário feito o cache é reiniciado. Afinal, pra mostrar o novo comentário, a página precisa ser gerada novamente. Mas esse é o menor dos “problemas”, a não ser que seu site receba uma quantia muito alta de comentários – aí recomendo sistemas de terceiros, como Disqus.

Em sites com área para usuários fazerem login e senha, como loja virtuais e grupos, o cache praticamente inexiste. Isso porque não é possível fazer cache de uma área de login de usuários. E se em todas as páginas do site há o nome do usuário logado em alguma parte, aí não há cache mesmo (para quem está logado).

A explicação é básica: Se fosse cacheada, a página de login exibiria sempre o mesmo usuário independentemente de quem estiver visitando a página, logado ou não.

Imagina que você acabou de fazer o login em seu internet banking. Se existisse cache nesse caso, qualquer pessoa que acessar o site em seguida estará logado em sua conta, afinal, o cache é gerado no primeiro acesso à página – que foi seu.

Então, planeje seu site de forma que você consiga aproveitar ao máximo o cache. Evite que todas as páginas tenham alguma função dinâmica que não pode ser armazenada em cache.

Aliás, isso é um fator importante para seu investimento em hospedagem. Sem cache seu site consumirá mais recursos, demandando um servidor mais caro.

Repense os plugins do projeto

Quando cito plugins, não pense apenas no WordPress: me refiro também a scripts, widgets e add-ons em geral.

O questionamento que deve ser feito aqui é o mesmo de sempre: você realmente precisa de tudo isso?

Como já dito acima, widgets do facebook e até mesmo botões oficiais de compartilhamento retardam o carregamento da página. Uma coisa é certa: praticamente todo script externo vai demandar mais tempo de carregamento em seu site.

Para esses casos há soluções caseiras como um banner estático convidando os usuários para a sua fan page, e ícones também estáticos (sem contador) para o compartilhamento.

E por aí vai: slideshows podem ser destaques estáticos (inclusive isso também é um ganho para a usabilidade de seu site) ou imagens lado-a-lado; efeitos de animações podem ser simplificados (preferencialmente com CSS puro); modais (popups internas, ou “lightboxes“) muitas vezes poderiam ser páginas independentes (o que pode ser um ganho em SEO e compartilhamento)…

Repense! Ao deixar seu site mais leve, muitas vezes você também estará deixando-o com a navegação mais fácil.

Cloudflare pode ser útil

Cloudflare é uma boa solução para cache, desempenho e segurança. Mas não faz milagres, e recentemente teve uma instabilidade que deixou vários sites offline no mundo (incluindo alguns blogs meus).

Ao utilizar uma CDN (Content Delivery Network) assim, infelizmente você estará sujeito às instabilidades do serviço. Então, o ideal é fazer todas as otimizações possíveis em seu site e contratar uma hospedagem de qualidade, assim soluções como a Cloudflare passam a ser opcionais.

ilustração de barra de loading com uma lesma em cima

Hospedagem de qualidade

Não tem segredo: se você quer algo bom, não deve economizar no mais básico, que é uma hospedagem de verdade.

Infelizmente por falta de conhecimento muita gente acaba caindo na lábia das hospedagens mais conhecidas (que além de anunciarem por aí com banners e até na TV, “compram a opinião” em alguns blogs e também oferecem recompensas na indicação por clientes – essa parte não é errada, mas gera mais indicações não pela qualidade da empresa, mas por dinheiro) e baratinhas.

Afinal, sempre quando há “ilimitado” no nome, parece se tratar de um excelente negócio.

Não existe isso de “hospedagem ilimitada”. E quando há muitos recursos por um preço baixo, é balela também.

A explicação para isso é o bom (?) e velho overselling, que consiste em literalmente atolar um servidor barato com milhares de clientes. Porém, quando um desses clientes começa a consumir mais do que deveria (e não chega a ser 10% do que é oferecido na maioria dos casos), o site começa a sair do ar. Afinal, uma sobrecarga poderia derrubar todos os outros sites desse servidor.

A verdade é essa: se você não quer passar raiva, contrate uma hospedagem de qualidade. Não é barato, mas não é caro também: trata-se de um investimento. As minhas favoritas (além da WOWF, que é um serviço meu) são PortoFácil, Via Hospedagem e Liquid Web.

Por fim, o grande vilão: anúncios

Já disse pelo menos duas vezes acima, mas é algo importante a se repetir: evite scripts externos.

Scripts de anunciantes, então, nem se fala!

Uma pena que o próprio AdSense, um serviço da Google, seja uma carroça. Mas tem coisa bem pior para o carregamento do site, como o Taboola e anúncios da UOL. Esses são bem lentos.

De qualquer forma, a regra é simples: não abusar.

Se você quer um site realmente leve e veloz, reduza drasticamente a quantidade de anúncios do seu site.

É isso. Não tem erro.

Precisando de ajuda?

Algo no texto pareceu grego pra você? Não se preocupe: a não ser que você trabalhe na área de desenvolvimento web ou SEO, você não é obrigado a saber de tudo isso.

Então, se precisar de auxílio profissional, fale comigo!

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Quero um orçamento

Leia também...

...alguns textos que têm a ver com o assunto:

Repaginação: Criação e desenvolvimento de site  – PortoFácil

Veja meu trabalho no redesign do site de hospedagem PortoFácil. Logo, design, desenvolvimento front-end e WordPress.

Como descobrir a fonte pela imagem?

Tá difícil achar a fonte usada naquele logo? O WhatTheFont te ajuda! Saiba como usar o site para encontrar fontes a partir de imagens.

As melhores (e piores) hospedagens para WordPress

Procurando uma hospedagem para seu projeto com WordPress? Veja algumas indicações e também cuidados que você deve tomar!

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento