Como optimizar o seu site e aumentar a velocidade de carregamento

Como já devem de saber, o Google passou a utilizar a velocidade de carregamento das páginas como factor de rankeamento. Apesar de ser apenas mais um factor no meio de tantos outros nunca é de mais optimizar os nossos sites mesmo que não estejamos interessados nos motores de pesquisa.

O tempo de carregamento das páginas é uma coisa a ter em consideração pois um site lento pode aumentar a taxa de rejeição dos seus visitantes, principalmente os que vêm de sites de pesquisa. Essas pessoas estão a procura de informação e normalmente não têm muita paciência para esperar para a página abrir.

Neste artigo vou abordar alguns pontos que levam os nossos sites a serem lentos e soluções para esses problemas.

Alojamento

Uma das várias razões para o nosso site ser lento é o alojamento. Muitas vezes recorremos a empresas low-cost que carregam o servidor de mais para conseguirem obter o mesmo lucro que as empresas que cobram mais pelo mesmo serviço. É melhor pagar um pouco mais e estar bem do que pagar pouco e ter um serviço mau. A qualidade paga-se.

É importante também falar dos sites que estão alojados em serviços gratuitos. Existem várias empresas que oferecem muito (por exemplo o 000WebHost ) por nada. Eles são obrigados a sobrecarregar os servidores e a limitar a velocidade para que todos tenham um serviço razoável.

A localização do servidor também pode influenciar no tempo que as páginas demoram a carregar. Por outras palavras, se você vive em Lisboa e tem o site alojado nos Estados Unidos o tempo de carregamento era menor se ele estivesse em Portugal. Este também é um factor que muitos dizem ser utilizado pelo Google para colocar os sites em melhor posição nos resultados do país onde ele está alojado.

Optimize o seu template

Existem várias coisas que podem ser feitas para optimizar o template de um site. Algumas delas:

» Minimização do CSS

Deixo os seguintes exemplos daquilo que pode fazer:
Se tiver o css desta forma:

.div {
  color: #ffffff;
  line-height: 20px;
  font-size: 9px;
}

passe a utilizar desta maneira:

.div{color:#fff;line-height:20px;font-size:9px;}

Outro exemplo:

{ padding-left: 10px; padding-right: 30px; padding-bottom: 20px; }

utilize:

{padding: 0 30px 20px 10px;}

Pode utilizar o minify para fazer este trabalho:
- www.code.google.com/p/minify

» Combine os CSS’s e Javascripts
Para diminuir o numero de requests junte o maior numero possível de folhas de estilho e javascripts num só ficheiro.

» Utilize CSS sprites
Os grandes sites como o Google por exemplo, utilizam uma imagem grande com várias imagens pequenas e depois utilizam no CSS a propriedade background-position para mostrar apenas uma parte dessa imagem. Para perceberem melhor como é que é uma imagem destas fica vejam a seguinte imagem:

CSS Sprites

Pode utilizar a seguinte ferramenta para facilitar o trabalho:
- www.spritegen.website-performance.org

» Folhas de Estilo e Javascript fora do seu alojamento
Por norma os browsers colocam em cache os css’s e javascript’s que estejam fora do mesmo domínio. Para que o browser não carregue esses ficheiros sempre que uma página é aberta, coloque esses ficheiros num subdomínio, noutro alojamento ou num serviço como o Amazon S3.

» CSS no topo, javascript no fim
Este é talvez um dos pontos mais importantes entre aqueles que referi. Para quem não sabe, o CSS é o “desenho” do site, ele dá informação o browser de como as coisas devem de ser mostradas e organizadas. Por isso a folha de estilo deve de estar sempre no inicio do tema para que o browser começe logo a “construir” a página.

Já os javascripts como o script do Google Analytics por exemplo, devem de ficar no fim, mais precisamente no footer. Normalmente são ficheiros mais pesados e que não são necessários para o funcionamento mínimo do site por isso convém que fiquem no fim da página.

» Utilize livrarias externas
Algumas empresas de confiança disponibilizam gratuitamente livrarias que já estão optimizadas para a web. A Google é um desses exemplos e disponibiliza AJAX Libraries no seguinte endereço:
- www.code.google.com/intl/pt-PT/apis/ajaxlibs/

Localização dos ficheiros utilizados no site

Por norma todos os ficheiros estão no mesmo domínio. Por exemplo, todas as imagens, ficheiros, etc são carregados através do endereço www.oseusite.com/ficheiros/ficheiro.jpg. Isto é mau porque o browser (o programa que você utiliza para navegar na internet) só carrega um certo numero de ficheiros em simultâneo de um domínio. Não tenho a certeza se todos os browsers têm o mesmo limite, mas vamos supor que um browser só pode carregar 5 ficheiros em simultâneo de um site. Enquanto que essas 5 transferências não terminam, o browser não começa a transferir outros ficheiros.

Para aumentar a velocidade de carregamento você pode utilizar subdomínios (por exemplo: www.images.seusite.com) e colocar lá os ficheiros ou utilizar outro domínio. A velocidade aumenta porque o browser começa a fazer o download dos ficheiros de vários locais diferentes ao mesmo tempo, ao invés do exemplo que dei em cima.

Se não quiser utilizar subdomínios e preferir alojar o conteúdo noutro host por causa do tráfego que está a gastar, utilize o famoso serviço Amazon S3. Este serviço serve para alojar ficheiros e é utilizado pelos maiores sites presentes na internet como o Twitter por exemplo. No Amazon S3 só paga o espaço e tráfego que utiliza (0,10USD por cada gigabyte alojado e 0,15USD por cada gigabyte de tráfego). Recomendo a leitura de um artigo criado pelo colega Gonçalo Martins e também da página na Wikipedia sobre este serviço.

Optimize as Imagens

A utilização de imagens “pesadas” nos posts ou no design do site aumenta o tempo de carregamento das páginas.

Uma das coisas que costumo fazer ao passar as imagens pelo photoshop para recortar e fazer algumas montagens é guardar a imagem através da opção “Save for Web & Devices” o que significa Guardar para a Web e Equipamentos. Esta opção diminui o tamanho da imagem e  permite escolher várias formatos entre elas o JPG, PNG, PNG-8 e GIF. O que faço é escolher cada um dos formatos e ver a qualidade/tamanho da imagem e depois guardo no formato que melhor qualidade apresentar com o menor tamanho possível.

É importante também nunca redimensionar uma imagem através de código HTML. Você continua a carregar uma imagem com um tamanho superior aquele que podia ter a imagem se fosse mais pequena.

No caso de querer mostrar uma imagem grande aos seus visitantes considere criar uma imagem mais pequena com um link para a imagem grande.

Utilize o Gzip

Outra coisa que pode utilizar é a compressão das suas páginas com gzip. As páginas são transferidas em gzip e depois é descomprimida ao chegar ao seu computador.

» Como Funciona?

Nos gráficos em baixo pode perceber como é que funciona o carregamento das páginas e a diferença entre a utilização e a não utilização do gzip.

HTTP: Pedido e Resposta

HTTP: Pedido e Resposta com Compressão

» Como utilizar?

Existem várias formas de utilizar o gzip. Uma delas é (só funciona com servidores que utilizem o Apache) adicionar um código ao .htaccess:

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

Se não tiver acesso ao .htaccess pode utilizar php. Adicione o seguinte código no início da página (se utilizar wordpress, coloque o código no header.php):

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

» Como sei se o Gzip está activo?
Existe uma ferramenta muito interessante que permite saber se o gzip está activo assim como o nível de compressão:
- www.gidnetwork.com/tools/gzip-test.php

» Informações Importantes
- Browsers antigos: O gzip não funciona com os browsers muito antigos.
- Compacte só ficheiros html, php, etc: As imagens por exemplo normalmente já estão compactadas, não vale a pena compactar novamente.
- Utilização do CPU: Como a compressão é feita no servidor é mais uma coisa para ser processada por isso se tem sites com um grande numero de visitas pode ter problemas com o load do servidor.

» Alguns artigos para leitura adicional
- Exemplo prático da compressão Gzip, por João Pedro Pereira
- Comprimir CSS e Javascript com o Gzip, por Gonçalo Martins
- How To Optimize Your Site With GZIP Compression, por Kalid Azad (em inglês)

Utilize um plugin para Cache

A Cache é o nome dado a um determinado armazenamento temporário de dados. No caso das páginas web, a cache é utilizada para guardar as páginas localmente durante um período para evitar consultas constantes à rede.

Para wordpress existem vários plugins. Em baixo deixo 3 plugins que podem ser utilizados:
- W3 Total Cache
- Hyper Cache
- WP Super Cache

É importante referir que alguns plugins têm opções que permitem compactar os ficheiros para poupar espaço em disco, mas lembre-se que o plugin terá de descompactar os ficheiros sempre que eles forem requisitados, por isso aconselho que desactive esta opção.

Conclusão

Espero que este artigo tenha sido útil. Se conhecer outras maneiras de acelerar o carregamento das páginas por favor deixe um comentário.

Até breve