melhorar velocidade do site

Como deixar o meu site mais rápido?

Tornar o seu site mais rápido parece uma tarefa difícil, mas hoje você vai descobrir que não é assim tão complicado quanto parece. Alguns passos feitos no código-fonte de seu site e na sua hospedagem (ou servidor) já poderão causar grande impacto na velocidade.

Vale lembrar que é extremamente importante otimizar o seu site para abrir no menor tempo possível, pois isto também é levado em conta pelos motores de busca para definir o posicionamento de seu site em uma pesquisa. Procure seguir todas as dicas deste artigo para melhorar ao máximo possível a velocidade de carregamento e dar aquela turbinada no seu site.

As mudanças citadas aqui foram testadas no site da CloudBrain, o que fez com que a página inicial abrisse em apenas 33% do tempo que era gasto anteriormente.

Agora, sem enrolação, vamos ao que interessa.

Tópicos do artigo:
  • Alterações na hospedagem (ou servidor);
  • Alterações no código-fonte;
  • Alterações no domínio;
  • Alterações nas imagens.

Alterações na hospedagem/servidor

Hospedagem/servidor de qualidade:

Ter uma hospedagem de qualidade é, obviamente, um fator que influencia bastante na velocidade de carregamento da página. Busque principalmente por serviços de hospedagem em SSD (para garantir maior velocidade na leitura dos arquivos) e/ou que estejam localizadas no Brasil (para reduzir ao máximo o tempo da latência).

O servidor é o responsável por armazenar as informações e responder aos usuários com estas informações assim que uma determinada página é acessada ou alguma ação (com um script, por exemplo) seja executada. Ele funciona exatamente como o dispositivo que você está usado neste exato momento para ler este artigo, quanto melhor for o Hardware dele, melhor será o desempenho para o carregamento das informações.

Caso queira unir o útil ao agradável, você poderá contratar uma hospedagem em SSD localizada no Brasil no site da CloudBrain e ainda testar os serviços gratuitamente por 30 dias.

Vale muito a penas investir na otimização da performance de seu site, pois a otimização dele é um dos fatores relevantes para melhorar o posicionamento de seu site nos motores de busca.

Otimizar imagens:

Ao acessar uma página, todas as informações contidas nela são baixadas pelo visitante e, justamente por isso, todos os arquivos devem ser leves,  para que carreguem mais rapidamente. Evite ao máximo possível usar imagens com mais de 300kb cada e também usar muitas imagens na página.

Busque enviar as imagens já no tamanho que serão usadas (para não haver necessidade de adicionar linhas de código) e reduzi-las ao máximo possível. Para reduzi-las, você pode usar o site ImageCompressor.

Ativar a compressão gzip:

Assim que um visitante acessa seu site, é enviado ao servidor uma solicitação dos arquivos necessários para que a página seja devidamente carregada. Porém, o tamanho destes arquivos está diretamente relacionado com a velocidade em que eles serão carregados. E essa é justamente a função da compressão gzip: comprimir os arquivos necessários antes que estes sejam enviados ao navegador do usuário, para que o tempo de carregamento do conteúdo seja significativamente reduzido.

Como ativar a compressão gzip no cPanel:

  1. – Acesse sua conta de hospedagem
    acessar conta cpanel
  2. Vá até a categoria “Software” e acesse a opção “Otimizar site”
    funcao otimizar site
  3. Por padrão, estará marcada a opção “Desabilitado”, marque “Compactar todo o conteúdo”
    ativar o gzip
  4. Clique em “Atualizar configurações” e estará tudo pronto
    gzip ativado

Como ativar a compressão gzip em qualquer servidor:

  1. Vá ao seu gerenciador de arquivos (ou até mesmo por FTP) e encontre o arquivo .htaccess
    encontrar htaccess
  2. Abra um editor de texto à sua escolha e abra o seu .htaccess nele e cole as seguintes linhas de código:
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/opentype
    # For Older Browsers Which Can't Handle Compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    </IfModule>

    Se o seu servidor não suportar o mod_deflate, você poderá tentar usar o mod_gzip:

    <ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_include handler ^cgi-script$
    </ifModule>
  3. Feito isso, basta salvar o arquivo.

A COMPRESSÃO GZIP ACELERA O CARREGAMENTO DA PÁGINA, MAS CONSOME MAIS CPU.
ATENTE-SE A ISTO PARA QUE NÃO HAJA UMA DEMANDA MAIOR QUE OS RECURSOS QUE PODE OFERECER.

Alterações no código-fonte

Reduzir HTML:

Como eu já disse anteriormente, ao acessar uma página o conteúdo dela é baixado pelo visitante. Justamente por isso é importante usar arquivos comprimidos (com o gzip) e minimizados tanto quanto for possível.

O processo de minimizar os arquivos pode ser feito facilmente utilizando o site Willpeavy

  1. Para comprimir com o WillPeavy, basta acessar a página e colar seu código HTML no campo de texto que aparece na página e depois clicar em “Minify”.minimizar html
  2. Feito isso, o site irá gerar uma versão reduzida de seu código, que basta você copiar e substituir em seu código original.html minimizado

Reduzir CSS:

O processo para reduzir os arquivos CSS é o mesmo do processo de redução de HTML, você só precisará acessar o site CSSMinifier e colar os códigos de cada um dos seus arquivos CSS. Para reduzir arquivos CSS, siga os seguintes passos:

  1. Acesse o site CSS Minifier e encontre o campo “Input CSS”
    campo input css
  2. Cole todo o conteúdo do seu arquivo CSS no campo InputCSS
    input css com o código
  3. Clique em “Minify” e seu código reduzido estará pronto logo ao lado.
    css reduzido

Feito isso, basta copiar todo o conteúdo reduzido e colar no arquivo original, substituindo-o; depois disso basta salvar.

Reduzir JavaScript:

Como você já deve imaginar, o processo para redução dos arquivos JS é exatamente o mesmo usado para reduzir arquivos CSS e HTML. Dessa vez, o processo é realizado através do site JavaScript Minifier. Para reduzir os arquivos JS, siga os seguintes passos:

  1. Abra o site JavaScript Minifier e encontre o campo “Input JavaScript”
    adicionar js
  2. Cole o seu código JS antigo
    codigo js antigo
  3. Clique em “Minify” e logo aparecerá o seu novo arquivo, agora reduzido.
    codigo js reduzido
  4. Agora, basta copiar o novo código e substituir.

Adie o carregamento dos arquivos JavaScript:

Quando há um script para ser executado em sua página, todo o conteúdo só será exibido depois que todos os arquivos forem carregados (incluindo o script), o que torna o carregamento da página mais lento. Adiando o carregamento destes scripts, a página abrirá mais rapidamente, pois estes scripts só serão executados após o conteúdo antes da tag </body>. Adiando o carregamento, a página poderá abrir mesmo que o visitante não consiga carregar os arquivos JavaScript.

Você ficará surpreso com o quão simples essa alteração funciona e o impacto que ela causa no carregamento da página. Confira os passos:

  1. Vá ao arquivo da página que deseja editar e abra-o em um editor de textos à sua escolha
    abrir arquivo
  2. Procure por todas as chamadas de arquivos JavaScript e adicione, dentro da tag <script> a informação async
    exemplo async
  3. Feito isso, salve o arquivo e atualize a sua página com CTRL + F5 (para remover o cache) e verifique a diferença na velocidade de carregamento do conteúdo.

ALTERAÇÃO NO DOMÍNIO 

Uso de CDN:

Uma CDN (Content Delivery Network/Rede de Distribuição de Conteúdo) traz traz uma série de benefícios para o seu site como, por exemplo: Armazenamento de cache no dispositivo do usuário; Maior disponibilidade do site (pois utiliza o cache para executar o site em caso de quedas); Redução de latência, Proteção contra possíveis ataques; Melhoria de posicionamento em motores de busca (SEO); Redução de uso de recursos no servidor.

Uma das principais vantagens da CDN é a já citada redução da latência juntamente com o uso de cache. As CDNs possuem servidores espalhados por várias parte do mundo, e fazem cópias de seu site nesses servidores. Quando um usuário acessa o seu site, ele será direcionado ao servidor que possui a menor distância, fazendo com que o site abra de forma mais rápida. Além disso, caso uma das cópias esteja corrompida ou apresente algum tipo de ameaça ao site, ela é automaticamente deletada do servidor onde está e é substituída.

A CDN mais utilizada no momento é o CloudFlare, que oferece um ótimo serviço e ainda dispõe de um plano totalmente gratuito, mas que mesmo assim atende muito bem às necessidades dos usuários. Para começar a utilizar o CloudFlare é muito simples, confira:

  1. Acesse o site da CloudFlare e clicar em “Sign Up”
    cloudflare
  2. Preencha as informações de cadastro e prossiga clicando em “Create Account”
    criar conta cloudflare
  3. Insira seu domínio e depois clique em “Add Site”, será iniciada uma rápida verificação
    adicionar site cloudflare
  4. Após o fim da verificação, clique em “Next”
    proximo
  5. Selecione o plano desejado e clique em “Confirm Plan”, neste tutorial usaremos o plano “Free”, que é gratuito
    escolha de plano cloudflare
  6. Após isso, abrirá uma janela de diálogo, clique em “Confirm”
    confirmar dominio cloudflare
  7. Feito isso, a página será atualizada e mostrará todas os registros DNS que seu domínio possui, você pode editar/excluir/adicionar uma ou mais entradas, caso deseje. Vá ao fim da página e clique em “Continue”
    registros de dns do dominio
  8. Agora, aparecerão  2 novos NameServers para os quais você deve apontar seu domínio (essa alteração não afeta o seu domínio nem sua hospedagem, o seu site continuará a usar a mesma hospedagem, pois o IP para o qual apontará será o mesmo).
    novos nameservers
  9. Vá ao seu domínio e faça o apontamento para os NameServers que recebeu e, depois, salve a alteração.
    alterando nameserver
  10. Feito isso, volte a sua conta do CloudFlare e clique em “Continue”, vide imagem do item 8
  11. Enquanto seu domínio não propagar para os novos NameServers da CloudFlare, esta faixa estará na cor preta.
    propagacao em andamento
  12. Após a propagação do domínio, a barra passará a ficar verde e seu site já estará apontando corretamente para a CloudFlare
    propagacao concluida

DICAS ADICIONAIS:

  • REMOVA LINKS QUEBRADOS:  A remoção de “links quebrados” ou solicitações que resultam em erros 404/410 evitam solicitações desnecessárias, isto, inclusive, é relevante até para o posicionamento de seu site nas pesquisas.
  • USE CSS SPRITE: A combinação de imagens no menor número de arquivos possível usando CSS sprites reduz o número de viagens e atrasos no download de outros recursos, reduz a sobrecarga de solicitações e pode reduzir o número total de bytes baixados por uma página da web.
  • NÃO USE @import EM ARQUIVOS CSS: Usar CSS @import em uma folha de estilo externa pode adicionar mais atrasos durante o carregamento de uma página da web.
  • “CHAME” TODOS OS ARQUIVOS CSS ANTES DA TAG <body>: Mover blocos e <link>elementos de estilo inline do corpo do documento para o cabeçalho do documento melhora o desempenho da renderização.
  • “CHAME” TODOS OS ARQUIVOS JavaScript APÓS A TAG </body>: Fazer com que os arquivos JS comecem a ser carregados apenas após todo o conteúdo anterior à tag </body>faz com que eles não sejam prioridade no carregamento, o que garante mais velocidade.
  • USE UM CERTIFICADO SSL: Sites que não possuem um certificado SSL já saem atrás em vários fatores, como: não transmite confiabilidade e credibilidade, não fornece um ambiente seguro e, além disso, sofre “punição” do Google, não ficando bem posicionado nas pesquisas (justamente por conta da falta de segurança).
  • APROVEITE O CACHE DO NAVEGADOR DO USUÁRIO: Os tempos de carregamento da página podem ser significativamente melhorados pedindo aos visitantes para salvar e reutilizar os arquivos incluídos no seu site.

 

Empreendedor, estudante de Marketing e apaixonado por filmes, séries e todos os campos da informática.
Post criado 10

Posts Relacionados

Comece a digitar sua pesquisa acima e pressione Enter para pesquisar. Pressione ESC para cancelar.

De volta ao topo