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).
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:
# comprimir todo os ficheiros de texto & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
# Ou comprimir certos ficheiros por extenção:
<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
- 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 🙂
Gostei muito da dica que orienta a colocar os css no header da página. Meu site tava super lento, por que eu coloquei no footer com os javascript. Ai demorava para montar o layout. Agora tá instantâneo. Muito obrigado pelas dicas. Parabéns!!!
colocar no header.php, mas na Head ou no Body ?
Eu coloquei no inicio do da página do header.php, 1º linha
Muito bom mesmo
Parceiro gostei muito da dica, agora não tenho certeza se procedi da maneira correta pôs puz no meu blog mais some na hora que salva.
como faço e onde coloco o comando para dizer quanto tempo o cache vai durar no navegador?
Este artigo foi muito útil!!! Melhorou muito a performance do meu fórum!
Que Deus te abençoe e traga prosperidade para todas as áreas de sua vida!
Muito show essas suas dicas. Valeu!
ERA DISSO Q EU PRECISAVA °°)... AGORA POSSO FAZER UM PEQUENO SITE DE ARQUIVOS MISTOS :D... o/
Eu uso a eerramenta http://tools.pingdom.com/fpt/ para testar o peso do meu site e ele está com 1mb será que ta pesado?
Uma pergunta, aqui no WP Total, vocês optaram por usar um subdominio para o host de arquivos ou estão utilizando o Amazon S3?
Obrigado.
Neste momento todo o conteúdo mais "pesado" é servido usando o Cloudflare 🙂
Excelente tutorial.
Esta bastante directo, completo e bastante fácil de se interpretar mesmo para quem não é um "webmaster".
O tutorial de compressão do GZip ajudou-me bastante e realmente aclarou a minha web page.
Grande abraço malta 🙂
Obrigado pelo comentário:)
Excelente Artigo, já otimizei meu blog com as dicas. abraços.
Sem duvida um grande post, obrigado e continue o seu excelente trabalho!
Gostei muito do artigo. Pelo menos uns 80% das informações eu não conhecia, principalmente com relação ás imagens pequenas em uma única imagem maior. Show de bola!!
Reforçando o que o amigo "Windowstec" perguntou: Qual plugin utilizou para esse recurso de "Veja também:". Achei muito interessante.
Cássio Oliveira.
Olá, utilizo o plugin "Yet Another Related Posts Plugin" com um template personalizado para que funcione desta forma 😉
Link: http://mitcho.com/code/yarpp/
Obrigado.
Muito bom texto, Celso. Você explica e mostra como fazer. Seu texto diminuiu bastante minhas dúvidas sobre este assunto tão importante que é melhorar a velocidade do site.
PARABÉNS!
Obrigado pelo comentário 😉
Excelentes dicas e algumas ja vou botar no meu site
Obrigado a todos pelos comentários 🙂
o minyfy faz meu blog buggar, nunca dei certo com ele ou com outro do tipo
Olá Celso!
Reuniu as melhores dicas que em pratica ajudam em muito a otimizar o site ou blog,a do gzip é fantástica,a do css relamente lembrou de uma coisa em que o browse le linha por linha e se pularmos uma ele considera codigo mesmo que esteja em branco por isso você deixou na mesma linha os codigos,bem lembrado!
Obrigado pelas dicas e um Abraço!
Boas sugestões.
Não conhecia a melhoria da rapidez com subdomínios embora seja algo que faça...
Olá Celso,
Primeiramente parabéns pelo blog, muito bom todo o conteúdo.
Você poderia postar uma dica de como otimizar consultas lentas no mysql? Estou tendo problemas com isso.
Utilizo o wp super cache, mas esta sendo pouco.
Até mais
Olá Diego,
estes plugins para cache não servem para as bases de dados. Recomendo que faça uma limpeza, remova comentários não aprovados, spam, revisões de posts, etc.
Existe um plugin muito bom que uso em todos os meus blogs: https://wordpress.org/extend/plugins/wp-optimize/
Se nem isso melhorar, a causa do problema pode ser o seu alojamento (hospedagem) ou o tamanho da base de dados.
Espero ter ajudado.
Excelentes dicas. Havia algumas dicas que desconhecia. Obrigado Celso
Estas dicas vieram na hora certa o meu blog estava muito lento, apliquei algumas destas ferramentas e resultou.
Obrigado
Desculpe mas poderia dizer o que usa para por "Veja Também"???
Já agora parabéns pelo post 🙂
Olá, utilizo o plugin "Yet Another Related Posts Plugin" com um template personalizado para que funcione desta forma 😉
Link: http://mitcho.com/code/yarpp/
😉
Muito bom artigo Celso me ajudou bastante valw.