Recentemente, foi anunciado que o Google está levando a consideração a velocidade de carregamento dos sites para classificá-los no motor de busca. É fato que um site lento espanta visitantes, mas, com essas mudanças do Google, o assunto tomou maiores proporções, já que os mecanismos de busca são a principal fonte de tráfego de muitos sites ou blogs. Existem alguns “macetes” para não deixar seu visitante esperando muito tempo para visualizar seu conteúdo. Confira!

1. Contrate um bom provedor de hospedagem

A dica mais óbvia de todas é: assine uma boa empresa de hospedagem. Não adianta fazer várias otimizações apresentadas aqui se o seu servidor é lento, certo? Empresas de hospedagem com servidores no Brasil costumam ser muito mais rápidas do que as com servidores localizados nos Estados Unidos ou em outro país. No Brasil, o link de conexão e os servidores são mais caros, mas em compensação você consegue uma latência mais baixa.

Outro fator que interfere na velocidade do servidor é o número de sites que ele hospeda. Se você não possui um site com muito tráfego, provavelmente estará utilizando um plano de hospedagem compartilhado. Quanto mais sites hospedados, mais lento o servidor fica. Uma boa ferramenta para verificar o número de sites contidos no seu servidor é o Reverse IP Domain Check.

Servidor gratuito? Só em último caso.

2. Otimize seu CSS e JavaScript

Escreva seu CSS e JavaScript da maneira mais compacta possível. Evite “caprichos” como:

body {
	color: #333333;
    font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 26px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-width: 5px;
	border-style: dotted;
	border-color: #000000;
}

Ao invés disso, faça assim:

body {
	color: #333;
    font: bold 14px Arial, Helvetica, sans-serif;
	line-height: 26px;
	padding: 2px;
	border: 5px dotted #000;
}

Ou assim:

body{color:#333;font:bold 14px Arial,Helvetica,sans-serif;line-height:26px;padding:2px;border:5px dotted #000;}

Para eliminar espaços e comprimir seus arquivos, tanto CSS quanto JS, uma boa ferramenta é o YUI Compressor, desenvolvido pelo pessoal do Yahoo!. Existe um site que utiliza a engine do YUI Compressor para otimizar seus arquivos online, sem precisar fazer nenhum download: Online JavaScript/CSS Compression.

3. Utilize menos imagens

É sempre bom colocar algumas imagens no meio do conteúdo para não deixar a leitura enfadonha. Porém, imagens pesadas em excesso também podem espantar o seu visitante. Evite utilizar uma imagem se você não tem motivos para utilizá-la.

Na página inicial do blog pessoal, por exemplo, as imagens somadas pesavam 3,5 MB. Com a velocidade máxima de uma conexão discada, o conteúdo demoraria quase 8 minutos para ser carregado completamente e, numa banda larga “popular”, de 1 Mbps, meio minuto.

Se o seu layout tiver muitas imagens referenciadas no CSS, uma boa dica é transformar todas essas “imagenzinhas” numa só “imagenzona”, diminuindo o número de requisições e melhorando o carregamento. Isso pode ser feito com o CSS Sprite Generator.

O Smush.it remove informações desnecessárias de uma imagem, não afetando a qualidade (sério!). Dá para economizar alguns kilobytes ou até megabytes, dependendo do caso. E você ainda pode baixar todas as imagens otimizadas mantendo a mesma estrutura de diretórios. É só baixar, descompactar e enviar para o servidor. Simples assim.

4. Modifique seu .htaccess e melhore o cache de arquivos

Em servidores Apache, é possível otimizar o cache de arquivos no navegador do visitante pelo arquivo .htaccess. Isso melhorará bastante a visitação em “partida quente”, pois a maioria dos arquivos já estarão armazenados no computador do usuário e ele não precisará baixá-los novamente.

Para tal, basta criar um arquivo .htaccess (ou modificar o arquivo já existente) no diretório público onde estão armazenados os arquivos do site (geralmente public_html ou www). No blog, mantenho o código abaixo, que controla o cache de arquivos estáticos (imagens, CSS, JavaScript) e comprime as páginas com GZIP, para navegadores que suportam a tecnologia.

# Netscape 4.x or IE 5.5/6.0
BrowserMatch ^Mozilla/4 no-gzip
# IE 5.5 and IE 6.0 have bugs! Ignore them until IE 7.0+
BrowserMatch \bMSIE\s7 !no-gzip
# IE 6.0 after SP2 has no gzip bugs!
BrowserMatch \bMSIE.*SV !no-gzip
# Sometimes Opera pretends to be IE with "Mozila/4.0"
BrowserMatch \bOpera !no-gzip
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/html
Header append Vary User-Agent

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=518400, public"
</FilesMatch>

Header unset ETag
FileETag None

5. Faça o possível para servir páginas estáticas, não dinâmicas

Páginas dinâmicas, seja em PHP, ASP ou qualquer outra linguagem, necessitam de mais processamento por parte do servidor antes de chegar ao visitante. Sendo assim, páginas estáticas carregam mais rapidamente.

Se você utiliza algum CMS para gerenciar o conteúdo do site, provavelmente ele possui algum plugin para servir páginas estáticas ao usuário. O Drupal, por exemplo, possui o recurso de série. O WordPress possui vários plugins para isso, como o WP Super Cache, o W3 Total Cache ou o Hyper Cache.

6. Sempre meça a velocidade do seu site com ferramentas especializadas

Existem inúmeras ferramentas para medir a velocidade de carregamento do seu site. É importante acompanhar e efetuar as otimizações sugeridas pela ferramenta sempre que possível.

No Mozilla Firefox, por meio do Firebug, existem duas ferramentas: YSlow e Page Speed, do Yahoo! e do Google, respectivamente. As duas dão uma pontuação para determinada página e ainda fornecem sugestões.

Outras ferramentas mais simples, mas que cumprem o dever, são: Pingdom Tools, Web Page Analyzer e WebPagetest.

Concluindo…

Se você seguiu todas as dicas básicas apresentadas aqui, com certeza terá algum ganho de performance. Com uma página mais otimizada, você gasta menos tráfego, suas páginas abrem mais rapidamente, seus visitantes agradecem e você também fica feliz. Legal, não?