Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Como deixar seu Site Mais Rapido (Parte 2)

Como deixar seu Site Mais Rapido (Parte 2)

No artigo Como Deixar Seu Site Mais Rapido (parte 1) eu escrevi algumas dicas importantes de como encontrar problemas na estrutura do seu site na internet que podem estar atrapalhando o desempenho.

Erros como arquivos de imagens com tamanho incorreto, links quebrados (páginas apontando para outras inexistentes – erro 404), códigos javascript que bloqueiam o carregamento da página e até instruções CSS mal escritas e repetidas.

São diversos aspectos que devem ser trabalhados individualmente mas graças a estas ferramentas que apontei no artigo anterior, um relatório com os problemas mostra detalhadamente o que deve ser feito. Agora neste artigo mostro algumas soluções para ajudar a corrigir estes problemas.

Instalar Google PageSpeed Module

pagespeed apache

O PageSpeed é um módulo compatível com o servidor web (que serve as páginas do seu site) Apache que faz diversas atualizações dinâmicas no seu site para deixa-lo mais rápido. Por exemplo, compacta todo código html ou javascript, até imagens são adequadas para os padrões de desempenho que o Google recomenda.

Instalar o PageSpeed é fácil:

Siga os passos deste documento do próprio Google. A instalação depende do sistema operacional do seu servidor.

Os servidores compatíveis são:

  • CentOS/Fedora (32-bit and 64-bit)
  • Debian/Ubuntu (32-bit and 64-bit)

Baixe o arquivo apropriado para seu servidor, para ver qual a versão deve baixar use o comando:

uname -a

Instale com o comando (Debian/Ubuntu):

sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install

CentOS/Fedora:

sudo yum install at # if you do not already have 'at' installed
sudo rpm -U mod-pagespeed-*.rpm

Reinicie o servidor Apache para concluir:

/etc/init.d/httpd restart

ou no Ubuntu

service apache2 restart or /etc/init.d/apache2 restart

O arquivo de configuração do pagespeed pode ser encontrado nos caminhos:

Debian/Ubuntu: /etc/apache2/mods-available/
CentOS/Fedora: /etc/httpd/conf.d/

É importante notar que o Pagespeed tem diversos submódulos que podem ser ativados ou desativados. Por exemplo você pode escolher compactar apenas as imagens do site ou o CSS, deixando o javascript de fora. Para saber o que você deve ativar ou desativar, sempre verifique o desempenho através das ferramentas que passei no artigo Como deixar Seu Site Mais Rapido.

Duas dicas importantes.

1. Após a instalação caso você precise visualizar uma página do seu site sem o cache do Pagespeed, utilize a seguinte palavra-chave na sua url:

https://www.seusite.com/?ModPagespeed=off

Utilize também a ferramenta do Google de Flush Cache

2. Caso queira reiniciar o cache do Pagespeed, você precisará acessar seu servidor via ssh e dar o seguinte comando:

touch /var/cache/mod_pagespeed/cache.flush

Obs: Note que o caminho do mod pagespeed pode variar dependendo da versão do sistema operacional do seu servidor.

Verifique o Desempenho do Site

PageSpeed Insights

Escrevi no primeiro artigo de como deixar seu site mais rápido diversas formas de verificar quais problemas estão atrapalhando o desempenho da sua página na internet. Os problemas podem ser desde imagens mal dimensionadas até links quebrados. A cada alteração que fizer, lembre-se sempre de fazer um backup antes e depois verificar novamente o desempenho através das ferramentas que indiquei como por exemplo o gtmetrix.

Utilize um Cache no seu Site

WordPress W3 Total Cache  WordPress Plugins

Se você usa o WordPress, o melhor cache existente que conheço e testei é o W3 Total Cache.

Talvez ele seja difícil de configurar, o que recomendo é ir ativando aos poucos seus módulos e depois verificar novamente o desempenho com o gtmetrix ou Google PageSpeed Insights.

Ativando O Keep-Alive

Nos servidores Apache, o Keep-alive indica que quando o cliente acessar o site aquela conexão será mantida caso existam outras requisições, evitando abrir múltiplas conexões com o servidor. Isso melhora de forma significativa o desempenho do site.

Para ativar o keep-alive, edite o arquivo .htaccess na raiz do seu site e acrescente as seguintes instruções. Note que para o WordPress as instruções devem ficar após o fim da seção do WordPress.

# END WordPress


Header set Connection keep-alive

Adicionar Cabeçalhos de Expiração

Para evitar que os navegadores armazenem suas páginas no cache interno por um tempo determinado, é importante determinar o tempo de expiração de cada tipo de conteúdo como imagens, scripts, etc.

Quem utilizar o WordPress o plugin de cache W3 Total Cache já faz isso para você, é uma das opções de configuração que você pode ativar opcionalmente.

Se você quiser adicionar manualmente, precisa apenas colocar no arquivo .htaccess algumas instruções que apontam o tempo de expiração do conteúdo. Edite seu arquivo .htaccess e adicione:

ExpiresDefault "access plus 2 months"

#Expire Header

ExpiresDefault "access plus 2 hours"

or
# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
A2592000 means 1 month in the future (60*60*24*30=2592000)

Conclusão Sobre Como Deixar Seu Site Mais Rápido

Vimos aqui algumas medidas concretas que você pode tomar para deixar seu site mais rápido. Lembre-se que o mais importante é deixar o código leve e sem erros, isto significa que menos coisas é sempre melhor e a simplicidade é um caminho seguro.

Duas regras de ouro que sigo:

  1. Identifique e corrija os erros
  2. Certifique-se que todo conteúdo do site passa por um controle rígido de padrões. Exemplo: as imagens devem ser otimizadas para web.

Mesmo sem implantar qualquer medida que apontei aqui, um site simples com bom conteúdo sempre será melhor que outro cheio de distrações e scripts que bloqueiam o desempenho.

Leia também: Como Deixar Seu Site Mais Rapido (parte 1)

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest
This div height required for enabling the sticky sidebar