Otimizar o tempo de carregamento do seu site é uma abordagem ganha-ganha para manter os visitantes do seu site felizes e aumentar as receitas geradas pelo seu negócio online.

Para esclarecer todos os problemas que tornam seu site lento, convidamos Stavros Papadakis a apresentar seu processo para acelerar sites lentos.

O que torna seu site lento?

Você definitivamente deve verificar meu post anterior com 16 maneiras de acelerar seu site WordPress.

Embora este post tenha fornecido uma lista de verificação rápida com os melhores ajustes para otimizar o tempo de carregamento do seu site WordPress, ainda existem muitos problemas que podem deixar seu site lento.

Se você ativou a compactação em seu arquivo htaccess, combinou arquivos CSS, moveu arquivos Javascript para o rodapé, mas ainda não está satisfeito com o tempo de carregamento do seu site, verifique esses 18 problemas comuns que tornam seu site lento.

1. Sites super pesados

Não há dúvida de que uma página de 3 MB fazendo 180 solicitações HTTP será mais lenta do que um site de 1 MB com 60 solicitações HTTP.

Quer otimizar o tempo de carregamento do seu site?

Uma das melhores maneiras de fazer isso é minimizar o tamanho de cada página do seu site.

Embora você possa otimizar suas imagens, combinar arquivos CSS, minimizar arquivos Javascript e aplicar muitos ajustes de otimização de front-end, ter um site de 3 MB tornará seu site lento e os usuários de seu site insatisfeitos.

21 MBs são uma carga enorme para o seu servidor e seu navegador.

Enquanto você está projetando ou redesenhando seu site, você deve fazer o possível para carregar apenas o que você precisa e nada mais.

Em outras palavras, você deve sempre se perguntar:

Eu realmente preciso de 8 imagens grandes na minha apresentação de slides na página inicial?

Tenho que exibir 20 itens do portfólio na página inicial?

Devo mostrar 12 depoimentos de usuários satisfeitos na página inicial ou 3 depoimentos também funcionarão?

Carregar todos esses dados faz com que seu site fique bonito, mas seu site também ficará mais lento devido a todos esses dados.

Você quer ter um site de carregamento lento? Caso contrário, minimize os dados carregados por página do seu site.

2. Imagens não otimizadas

Você sabia que 80% do tempo que leva para carregar um site é controlado pela estrutura front-end?

Este é um fato incrível de otimização de desempenho da web.

80% do tempo de resposta do usuário final é gasto no front-end. Concentre-se nisso.

Você pode tentar otimizar seu banco de dados ou código PHP, mas se você ignorar esse fato de suma importância, seu site ficará lento.

Um arquivo PNG de 460 KB pode se tornar 90 KB otimizando-o.

Se você tiver 10 imagens não otimizadas em seu site, poderá adicionar 2-3 MBs de carregamento de página extra.

Se você não otimizar suas imagens, o tempo de carregamento do seu site pode ser severamente afetado.

A boa notícia é que a maioria das imagens JPG e PNG podem se tornar 40% ou até 80% menores sem perder a qualidade da imagem, otimizando-as usando o Photoshop, ImageOptim ou uma ferramenta de terceiros, como Kraken.

3. Uso excessivo de anúncios

O Google Adsense e outros serviços semelhantes podem ser uma fonte extra de renda para você, mas também podem tornar seu site mais lento.

Um site que carrega anúncios no cabeçalho, na barra lateral direita, no corpo da postagem e na parte inferior da página usando 2 ou 3 serviços de anúncios diferentes será muito mais lento do que um site com apenas 1 anúncio na barra lateral direita ou no corpo do post.

Os anúncios não são apenas irritantes para a maioria dos usuários, mas também tornam seu site mais lento.

Verifique a seguinte captura de tela do site de um cliente.

Você realmente precisa de todos esses anúncios irritantes?

Acredite ou não, existem 4 anúncios diferentes nele, um anúncio na parte superior da captura de tela, o vídeo que é um anúncio, um anúncio na barra lateral direita e outro anúncio na parte inferior da página! Escusado será dizer que esses anúncios são irritantes para a maioria dos usuários e também diminuem o tempo de carregamento do seu site.

Para resumir, os anúncios devem sempre ser usados ​​com cautela. Enquanto um anúncio não gerar dinheiro, ele deve ser removido.

4. Dimensões erradas para suas imagens

Você não deve dimensionar imagens em HTML, deve redimensionar uma imagem grande e usar a imagem redimensionada.

Por exemplo, vamos supor que você tenha uma imagem de 1200px x 600px e queira usar uma versão “menor” dela, por exemplo, 400px x 200px.

Nesse caso, não use a imagem original e reduza-a alterando as dimensões de largura e altura em HTML.

Você deve criar uma nova imagem em miniatura redimensionando a imagem original de 1200px x 600px para 400px x 200px e usar a nova imagem que é menor e carregará mais rápido.

Eu encontrei muitos sites que costumavam carregar uma imagem de 256 x 256 do facebook de 150 KB em vez de um ícone de 32 x 32 do facebook de 2 KB!

5. Redirecionamentos inúteis

Eu tenho um teste rápido para você.

Qual das seguintes imagens carrega mais rápido, A, B, C ou D?

A. http://www.domain.com/image.jpg
B. http://domain.com/image.jpg
C. https://www.domain.com/image.jpg
D. https://domain.com/image.jpg

Você escolheu A? Errado.
Você escolheu B? Errado.
Você escolheu C? Errado.
Você escolheu D? Errado de novo!

A resposta certa é que depende do seu site!

Se o seu site for https://www.domain.com, ao chamar a versão não HTTPS da imagem (http://www.domain.com/image.jpg), haverá um redirecionamento extra de http: //www.domain.com/image.jpg para https://www.domain.com/image.jpg pelo navegador para carregar a imagem.

Se você estiver usando a versão sem www para seu site (http://domain.com/), então você deve sempre usar a versão sem www para suas imagens (por exemplo, http://domain.com/image. jpg em vez de http://www.domain.com/image.jpg).

Os navegadores não gostam desse tipo de redirecionamento inútil.

Redirecionamentos inúteis tornarão seu site mais lento

Ao usar URLs relativos para seus arquivos (por exemplo, <img src="//eadn-wc04-1126528.nxedge.io/image.jpg" />), você pode facilmente se livrar desse problema comum que diminui o tempo de carregamento de seu site.

6. Localização errada do servidor

Se o tráfego do seu site for principalmente dos EUA ou do Reino Unido, seu site deve ser hospedado por uma empresa de hospedagem localizada nos EUA ou no Reino Unido, respectivamente.

Quanto mais próximo o servidor estiver dos visitantes do seu site, mais rápido ele será.

Escusado será dizer que, se você recebe tráfego de todo o mundo, recomendo que você use uma Content Delivery Network ou CloudFlare para que imagens, arquivos CSS e Javascript sejam carregados de um servidor mais próximo da localização de cada usuário.

7. Planos de hospedagem compartilhada duvidosos

Ninguém quer pagar $$$ para hospedar um site, mas servir um site WooCommerce com 40 plugins ativos ou um site Magento com 5.000 produtos por meio de um plano de hospedagem compartilhada que custa $5 por mês é uma receita para o desastre.

Você deve sempre investir em uma boa empresa de hospedagem para obter o melhor tempo de carregamento do seu site.

Se o seu site estiver indisponível ou lento, você poderá economizar alguns dólares por mês usando um plano de hospedagem compartilhada, mas perderá muito mais ao perder seus clientes (um usuário que visita um site de carregamento lento não revisitará este site).

Se você tem um site WordPress pesado usando Woocommerce ou muitos plugins ativos, então eu recomendo o WP Engine e o FlyWheel (links afiliados).

Você não deve esperar receber 200.000 visitas únicas por mês para atualizar para um VPS, isso nunca acontecerá enquanto você estiver hospedando seu site no mesmo servidor sobrecarregado com centenas de sites nele.

8. Uso excessivo de scripts de mídia social

Os scripts de mídia social (Facebook, Twitter, Pinterest etc) adicionam uma pesquisa de DNS, um conjunto de arquivos Javascript e algumas imagens sempre que são adicionados em uma página.

Embora muitas dessas opções de compartilhamento devam estar disponíveis no final de suas postagens para que seus usuários possam compartilhar suas postagens facilmente, não faz sentido carregar todas essas opções de compartilhamento em cada página.

Qual é o sentido de carregar esses ícones de mídia social em cada página, por exemplo, na página de contato ou nas páginas de sua categoria?

Mostrar 5 contagens diferentes de mídia social para cada postagem na página inicial ou nas páginas de categoria adiciona muita carga ao seu site. Qual a importância de mostrar as contagens nessas páginas? Você precisa mostrar o Facebook, Twitter, Pinterest, Google Plus e LinkedIn também?

Muitos scripts de mídia social podem matar o desempenho do seu site

Você seria melhor apenas mostrar 1 ou 2 que funcionam bem para você? Se você não conseguir muitos compartilhamentos, há muito sentido em mostrar algum?

Você deve sempre pensar duas vezes antes de adicionar qualquer opção de mídia social em uma página do seu site.

9. Tipo de arquivo errado para suas imagens

Se você precisar de transparência para suas imagens, não poderá evitar o tipo de arquivo PNG, MAS se não precisar de transparência, nunca salve suas imagens como arquivos PNG porque elas são muito maiores em tamanho de arquivo e muito mais lentas do que as imagens JPG.

Minimize ou até mesmo elimine quaisquer arquivos GIF pesados, pois eles podem diminuir drasticamente o tempo de carregamento do seu site.

Você também deve tentar evitar salvar imagens com texto como conteúdo, pois pode ser um processo demorado editar o texto nas imagens e as imagens geradas também são muito mais pesadas.

Use JPG como padrão. É o tipo de arquivo de carregamento menor e mais rápido para a maioria dos arquivos.

10. Não aproveitar os serviços dedicados

Há um grande número de serviços populares que podem reduzir a carga do seu servidor.

Você tem vídeos em seu site? Você deve usar o Youtube, Wistia ou Vimeo.

Você tem muitos comentários em seu site? Você deve usar Disqus, IntenseDebate ou
Discurso.

Você usa jQuery, jQuery UI, AngularJS ou Mootools? Você deve carregá-los por meio das bibliotecas hospedadas pelo Google.

Você usa o WordPress e exibe postagens populares? Você deve usar o Jetpack, que faz isso automaticamente para você.

Você também pode usar uma rede de entrega de conteúdo (CDN) para veicular suas imagens a partir dela em vez de seu site.

Se o seu site está recebendo tráfego significativo e você carrega muitas imagens e vídeos, o tempo de carregamento do seu site pode ser otimizado drasticamente equilibrando a carga de trabalho do seu site com os truques mencionados acima.

11. 404 erros

Se você tentar carregar um arquivo que não existe ou o navegador não conseguir encontrar, o tempo de carregamento do seu site será afetado por esse erro 404 HTTP.

Você deve sempre verificar se há erros 404 durante a renderização de suas páginas para obter o tempo de carregamento mais rápido. Você pode fazer isso verificando a cascata gerada do seu site usando Webpagetest e GTMetrix ou usando a guia de rede de navegadores como Chrome e Firefox.

Se o Webpagetest mostrar alguma linha vermelha na cascata, você deverá solucionar imediatamente e corrigir esses erros 404.

Erros 404 podem arruinar o tempo de carregamento

Esse tipo de erro pode realmente arruinar o tempo de carregamento do seu site, especialmente se você veicular seu site por meio de um plano de hospedagem compartilhada.

12. Não armazenar em cache seu site

Todos os sistemas de gerenciamento de conteúdo (WordPress, Joomla, Drupal, Magento) usam um banco de dados para salvar um grande conjunto de dados nele.

Embora isso seja ótimo para gerenciar seu site, também significa que adiciona carga extra em seu servidor para gerar cada página toda vez que for solicitada.

Você pode resolver esse problema usando o cache.

Se você usa o WordPress, pode usar um plug-in de cache, como
W3 Total Cache ou WP Super Cache ou ZenCache ou use uma empresa de hospedagem de servidores gerenciados como WP Engine e FlyWheel (links afiliados) que cuidam do cache.

Escusado será dizer que Joomla, Drupal e Magento também oferecem opções de cache, o que pode ajudar muito, fornecendo versões em cache do seu site para visitantes consequentes do site, em vez de gerar cada página repetidamente.

O armazenamento em cache de suas páginas pode acelerar drasticamente seu site

O cache é um acéfalo para qualquer site baseado em banco de dados. Mesmo um período de cache de 10 minutos pode otimizar drasticamente o tempo de carregamento do seu site.

13. Centenas de solicitações HTTP

Cada arquivo CSS, arquivo Javascript ou imagem carregado em seu site é uma solicitação HTTP. Quanto mais solicitações HTTP seu site tiver, mais lento ele será.

Embora você possa tentar combinar arquivos CSS e Javascript, para arquivos CSS embutidos e usar sprites CSS para imagens pequenas, se você implementar esses ajustes e ainda tiver 150 solicitações HTTP, obviamente deve tentar organizar seu site removendo conteúdo de isto.

246 solicitações HTTP deixarão seu site mais lento, não importa o quão otimizado ele seja

Eu sei que é tentador exibir muito conteúdo em cada página do seu site, mas lembre-se de que “menos é mais”, então tente não carregar tantas imagens ou scripts.

14. Configuração incorreta do servidor

Se você estiver em um plano de hospedagem compartilhada, é bastante comum que eles façam o possível para atender o maior número possível de sites por servidor.

Eles geralmente fazem isso desativando recursos como compactação e KeepAlive, entre outros.

A ativação do HTTP Keep-Alive permite que a mesma conexão TCP envie e receba várias solicitações HTTP, reduzindo assim a latência para solicitações subsequentes.

A compactação reduz o tamanho dos arquivos enviados do seu servidor para aumentar a velocidade com que eles são transferidos para o navegador.

Se você estiver em um plano de hospedagem compartilhada e sua empresa de hospedagem desativou a compactação e o Keep-Alive, troque a empresa de hospedagem o mais rápido possível.

Keep-Alive e compressão devem estar habilitados em seu servidor

15. Importações CSS

As importações de CSS são uma boa maneira de importar arquivos CSS no topo de um novo arquivo CSS, por exemplo, importando um arquivo CSS de redefinição, mas também adiciona atrasos adicionais durante o carregamento de uma página da web.

Você deve evitar importações de CSS, sempre que possível.

16. Carregando arquivos desnecessários em cada página

Você deve carregar arquivos CSS e Javascript somente quando eles forem necessários em uma página do seu site.

Por exemplo, se um arquivo Javascript específico for necessário apenas em uma única página, nesse caso, você deve carregar esse arquivo Javascript apenas neste URL em vez de carregá-lo em todas as páginas do seu site.

Se você não seguir esta regra simples, pode acabar carregando 30 arquivos CSS e 40 arquivos Javascript em uma página que precisa apenas de 3 arquivos CSS e 4 arquivos Javascript, então você está fazendo 63 solicitações HTTP extras e adicionando muitas centenas de kilobytes na página Tamanho.

17. Carregando arquivos pesados ​​em segundo plano

Muitos sites costumavam carregar grandes imagens de fundo que dificilmente são visíveis.

Você realmente precisa de uma imagem de 500 KB carregada em segundo plano? Você deve tentar usar CSS3, sempre que possível ou usar uma cor de fundo.

Também é uma má prática carregar arquivos de som em segundo plano enquanto seu site está carregando.

A maioria dessas técnicas está deixando seu site mais lento e deve ser evitada.

18. Não usar um especialista

Meu objetivo era fornecer informações suficientes para começar a corrigir as páginas de carregamento lento do seu site.

Otimizar o tempo de carregamento do seu site é uma situação vantajosa para você e para todos que visitam seu site. Sites mais rápidos significam conversões mais altas, melhores classificações nos mecanismos de pesquisa e uma experiência do usuário mais agradável.

É melhor contratar um especialista quando você quer um trabalho bem feito.

Os amadores podem seguir as melhores práticas, mas não sabem por onde começar.

Um especialista corrigirá os problemas reais que tornam seu site mais lento.

Sempre que um amador não souber os problemas reais do seu site, ele recomendará uma solução temporária inútil, como mover hosts, alterar tema, instalar um plugin de cache diferente ou até mesmo trocar de CMS.

Muitos dos meus clientes desperdiçaram seu tempo e dinheiro com amadores que acabaram de instalar um plugin de cache sem corrigir os problemas reais de seu site.

Você deve sempre ter em mente que cada site é único, portanto, diferentes ajustes de otimização de velocidade devem ser aplicados por site.

Para resumir, otimizar o tempo de carregamento do seu site deve sempre ser feito por um especialista que fará os ajustes de otimização de velocidade com precisão cirúrgica.

Imagine como seus usuários ficarão felizes ao ver tempos de carregamento super rápidos!

Se você quiser me contratar, ficarei feliz em ajudá-lo. Veja meu portfólio e entre em contato comigo no AwesomeWeb hoje mesmo!