Como otimizar o seu site e aumentar a velocidade

Como já devem de saber, o Google passou a utilizar a velocidade de carregamento das páginas como fator de ranqueamento. Apesar de ser apenas mais um fator no meio de tantos outros nunca é de mais otimizar 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.

Velocidade 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 fator que muitos dizem ser utilizado pelo Google para colocar os sites em melhor posição nos resultados do país onde ele está alojado. Otimize o seu template

Existem várias coisas que podem ser feitas para otimizar 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.

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 comece 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 otimizadas 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).

Otimize 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:

# comprimir todo os ficheiros de texto & html: AddOutputFilterByType DEFLATE text/html text/plain text/xml # Ou comprimir certos ficheiros por extenção: SetOutputFilter DEFLATE

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):

» Como sei se o Gzip está ativo? 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 – 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 desative esta opção.