Como-deixar-meu-site-mais-rapido

Como deixar meu site mais rápido? Tutorial Completo

Um dos fatores que o Google e outros buscadores que ninguém liga leva em consideração para ranquear seus resultados é o tempo de carregamento do site. Então quer dizer que se seu site empata em todos os critérios, mas perde em velocidade de carregamento para um concorrente ou site semelhante, este outro site ficará na sua frente nos resultados orgânicos. Como deixar meu site mais rápido? Vislumbrando a resolução deste problema, desenvolvemos aqui de forma efetiva práticas que levarão seu site para um carregamento mais enxuto e rápido.

Este artigo terá dicas para leigos e para desenvolvedores, então se você é leigo e contratou alguém para criar seu site ou blog, certifique-se que o contratado se utiliza dessas técnicas para otimização. Se você é desenvolvedor de sites e soluções web, use e abuse de todas as técnicas ensinadas aqui na criação de produtos para seus clientes.

Antes de continuarmos, existe uma lei universal que seguimos quando se fala de compactação e criação de coisas leves: cada kbyte reduzido é importante. Então a partir de hoje você vai levar esta lei para seu estilo de vida no mundo digital, tudo bem? Então vamos lá.

Como deixar meu site mais rápido?

Há várias questões que devem ser consideradas quando se quer deixar um site com carregamento mais rápido. Abaixo segue uma lista resumida da maioria dos fatores que interferem na velocidade de carregamento. E todos eles devem ser revisados e otimizados afim de melhorar a velocidade que seu site leva para abrir. Segue a lista abaixo:

  • Tamanho das imagens do site;
  • Tecnologias utilizadas no desenvolvimento do site;
  • Práticas de uso dessas tecnologias;
  • Minificação de arquivos do site;
  • Tempo de resposta do servidor de hospedagem;
  • Utilização de cache;
  • Compactação dos arquivos no servidor;
  • Número de requisições efetuadas;
  • Utilização de CDN;

Compactação de Imagens

A primeira técnica para esse fim é a compactação de imagens para web. Acredito que esta prática é bastante consolidada nos meios dos profissionais e empresas que nasceram no digital, a exemplo de agências digitais e empresas de desenvolvimento web. Mas existe um ramo de empresas, que ainda estão engatinhando e querem abocanhar um pouco deste mercado, que falham muito nisso: agências tradicionais e offlines, aquelas que nasceram nos anos 50 e 60 com o “boom” da publicidade, profissionais que estão acostumados a pensar apenas na qualidade das imagens. Mas no digital precisamos de um equilíbrio muito grande nestes dois pontos: qualidade e tamanho. Seja você é de uma agência digital, offline ou 360 que não conhece ou utilizava-se desta prática, ou apenas tem um site e quer saber como carregá-lo mais rápido, esta técnica é básica na compactação de sites e, por tanto, básica também em como deixar seu site mais rápido.

Vamos as informações técnicas

Ao criar uma imagem para seu site, não importa o programa que você utilize, você sempre vai trabalhar com unidades em pixel e em resolução 72 pixels/polegada. Essa informação pode parecer básica, mas acredite que tem agências tradicionalmente offline que estão fazendo layouts de site no Illustrator e Corel, utilizando o centímetro como unidade de medida e 600dpi de resolução. Garanto a você. Há desenvolvedores que se deparam com essa situação quando contratados como desenvolvedor terceirizado dessas agências.

Se você utiliza o Photoshop para criar imagens para seu site ou projeto web, a tela a seguir deve ser o padrão de criação quando estiver utilizando o software.

Configuração correta do Photoshop para criação imagens para Internet

Caso utilize outro software para criação de imagens, basta seguir as mesmas configurações e variáveis mostradas acima.

Salve a imagem de forma otimizada para Internet

Para deixar o seu site mais rápido, além de criar as imagens que vão para o site com os padrões citados acima, é necessário também salvar esta imagem de forma otimizada para web. A primeira coisa que você deve dominar então é a preferência das extensões: se a imagem tem transparência, utilize png ou gif – escolhendo o que ficar menor. Se não tem transparência, utilize jpg ou png –  também escolhendo o que ficar menor. Entretanto para maioria dos casos de imagens sem transparência, a extensão que resultará no melhor resultado é a jpg.

Vistando esta otimização, surgiu nas últimas versões do Adobe Photoshop a função “salvar para web” que traz uma série de ferramentas fantásticas que ajudam na otimização de imagens.

Função Salvar para Web implementada no Photoshop afim de otimização de imagens para internet

Ao utilizar esta função, uma nova tela cheia de possibilidades aparece para o usuário. E é nela que você irá efetuar todas as otimizações afim de conseguir o melhor resultado em otimização e compactação de imagens, sempre comparando a imagem original com o resultado mostrado abaixo e o tamanho final da imagem compactada. Não vamos entrar em detalhes aqui porque este não é um artigo sobre o photoshop, correto?

Janela de Configuração do Photoshop para Otimização de Imagens para Internet

Lembre-se: cada kbyte reduzido é importante, mas não estrague a imagem. A regra é utilizar o bom senso.

Tecnologias no desenvolvimento do Site

Segundo ponto para otimização, é que seja desenvolvido com tecnologias modernas, isto significa necessariamente que seu projeto deverá ser utilizar html5 e css3. O uso de tabelas, exceto para dados tabulares, está totalmente fora de questão. Deve-se utilizar tags semânticas e a customização de estilos através do css. Se você não é desenvolvedor, apenas tem um site ou blog, cobre isso de quem você contratou para desenvolvê-lo.

Entretanto ser desenvolvido em html5 e css3 não significa que essas tecnologias estão sendo usadas necessariamente da forma correta. Então segue aqui alguns princípios que devem ser observados na escrita das duas tecnologias:

1º Menos é mais. Se você pode conseguir o mesmo resultado escrevendo menos código, faça. Escolher o que é mais fácil de se fazer não é uma boa prática. Você deve escolher o que oferece melhor resultado em termos de otimização.

2º Utilize css otimizado. Não use mais de duas classes em série, em caso extremos três. Dê preferência as versões compactadas dos parâmetros utilizados. Agrupe seletores com parâmetros iguais em um mesmo bloco de parâmetros. Uma a uma, consegue-se diminuir muito o mesmo código CSS, conseguindo um arquivo mais enxuto e compacto.

3º Use versões minificadas dos arquivos. Existem várias ferramentas para minificação de arquivos HTML, CSS e JavaScript. Salve as versões de trabalho em sua máquina, mas com as versões que serão colocadas em produção, passe todos os arquivos por um bom minificador e reduza drasticamente o tamanho dos dados carregados. A prática de minificação consiste em escrever todo o código em uma única linha, economizando vários bytes de espaços em branco e quebras de linha.

Outro artigo detalhado sobre este tópico será produzido. Neste cabe apenas evidenciar os princípios que devem ser respeitados afim de conseguir um código otimizado.

Tempo de resposta do Servidor

Se você não tem um serviço de hospedagem como a WideHosting, que garanta um excelente tempo de resposta do servidor em que seu site encontra-se hospedado, este fator também implica em lentidão ao carregar seu site. Existe uma ferramenta conhecidíssima e muito poderosa que efetua alguns testes neste sentido: o Website speed test da Pingdom. Nesta ferramenta você insere seu domínio e ele apresenta o tempo em várias etapas de todas as requisições. É possível então ver se o seu site não está demorando a carregar por culpa do seu servidor de hospedagem. Traga seu site para a WideHosting e resolva este problema.

Teste de velocidade WideHosting Pingdom

Utilização de Cache de Navegação

O termo cache pode ser entendido como uma área de armazenamento onde informações e dados que são frequentemente utilizados são guardados para acesso futuro mais rápido, poupando recursos de forma geral. Este modelo de otimização é utilizado em várias esferas da tecnologia, e não seria diferente também no caso do acesso a internet.

Quando você acessa um site que tem o uso correto do cache de navegação pela primeira vez, este site demora a carregar um pouco mais de tempo do que quando você acessa na maioria das outras vezes. Isso acontece porque um bom percentual de dados daquele site não se altera com frequência, e estes dados ficam salvos em sua máquina para acessos futuros. Ou seja, quando você acessa este site pela segunda vez, você só irá baixar o que foi modificado, e não mais o site inteiro como da primeira vez. Esta técnica é excelente para economizar recursos do servidor e garantir maior otimização no carregamento de suas páginas.

Se seu site utiliza WordPress você pode fazer uso de plugins como o W3 Total Cache para este fim.

Compactação de Arquivos no Servidor

Quando eu coloquei anteriormente que cada kbyte otimizado e compactado é importante para o melhor carregamento do seu site, isto não foi apenas para dá força ao artigo. A otimização de arquivos deve ser feita no desenvolvimento, através dos princípios evidenciados nos tópicos anteriores, e a compactação deve ser feita diretamente no servidor. Esta compactação é semelhante a quando você gera um arquivo com o WinZIP ou WinRAR e dentro deste tem vários outros arquivos compactados.

Com esta tecnologia habilitada no servidor, ele envia de forma compactada para o cliente o conjunto de requisições que foram feitas para carregamento do site, e este arquivo é descompactado direto no navegador. O carregamento se torna mais rápido por que de forma geral aquele arquivo compactado leva bem menos tempo para trafegar na rede de uma ponta a outra, e o tempo utilizado na descompactação no navegador é desprezível.

Em breve lançaremos um artigo sobre como habilitar a compactação de arquivos no cPanel.

Número de Requisições

Um outro fator que também é diretamente ligado ao tempo em que seu site vai carregar é o número de requisições que este tem do cliente para o servidor. Se lembra lá em cima o resultado do Pingdom Tools? O resultado da WideHosting foi 62 requisições. Isso quer dizer que o cliente ao acessar www.widehosting.com.br fez de forma geral 62 requisições na rede, onde 99,9% delas é diretamente ao servidor de hospedagem, e os outros 0,1% é serviço de nomes de domínio ou DNS em inglês.

Existem técnicas no desenvolvimento para diminuir o número de requisições ao servidor. Em outro artigo iremos ensinar como fazê-lo detalhadamente. Mas aqui irei ensinar o maior princípio de todos para este ponto: agrupe o máximo de arquivos possíveis na mesma requisição.

Podemos falar em imagens em CSS Sprites, onde várias imagens do seu site são carregadas em um único arquivo jpg ou png, e o CSS se encarrega de fazer os cortes e exibir apenas as imagens corretas em suas devidas posições. Segue exemplo de um sprite que temos no site da WideHosting:

Sprites do site da WideHosting

Percebem a quantidade de requisições que foi economizada em um único arquivo de Sprite CSS? Todos esses ícones carregam de uma única vez em nosso site, mas só há uma requisição. Mas o CSS diz onde cada parte da imagem vai ser exibida. Volto a dizer, se você não é desenvolvedor, apenas quer saber como fazer seu site carregar mais rápido, cobre essas técnicas de quem você contratou ou observe na documentação dos temas que você pretende comprar se elas são utilizadas.

Utilização de CDN

A última e não menos importante (muito pelo contrário) técnica que iremos abordar é o uso de CDN. Esta é a sigla para Content Delivery Network, ou Rede de Fornecimento de Conteúdo no nosso amado português. Na prática e de forma objetiva, ao utilizar uma CDN uma cópia em cache do seu site fica salvo em vários servidores pelo mundo. Quando alguém acessa seu site, todos esses servidores podem ajudar no carregamento com as informações salvas no cache, melhoram problemas de rota, e em alguns casos até mantém seu site no ar quando no seu servidor principal houver um downtime – situação que não ocorre com os clientes WideHosting.

Uma das maiores e mais utilizadas CDN do mundo é a CloudFlare que pode ser habilitada direto do cPanel do cliente WideHosting. Em outro artigo iremos ensinar a fazê-lo.

Com este recurso existe caso de sites que melhoraram em até 80% o tempo de carregamento para seus clientes, além de outras vantagens que a técnica traz como diminuir o uso do hardware em seu servidor de hospedagem.

Conclusão

Com a aplicação correta e de bom senso de todas essas técnicas, não há nem como mensurar a quantidade de desempenho que seu site irá adquirir. Com certeza ganhará vários segundos no tempo de carregamento e até ficará melhor indexado pelo Google – lembrando que este não é o único requisito de boa indexação.

Se houver alguma dúvida, deixe nos comentários que teremos o maior prazer em te ajudar.

Deixe uma resposta

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