O problema
Com o advento das bibliotecas javascript ficou muito fácil implementar quase tudo num site: de galerias de imagens a efeitos drag and drop; de animações a uploaders elegantes.
Mas tudo isso tem um preço e, quanto mais recursos, maior o tamanho e o tempo de carregamento dos sites. E quem paga o preço é sempre o seu visitante.
Felizmente, para todo problema há uma solução! Infelizmente, a otimização de websites, apesar de ser muito simples de ser implementada, é frequentemente ignorada por webdevelopers que não sabem (ou não ligam) que o Google inclui a otimização do site em seu algoritmo de busca.
Meu site não é lento!
Acredito que muita gente que leu até aqui alegue que seu site usa poucos recursos ou acredita que seu site seja bastante rápido. De qualquer forma, melhorar nunca é demais e para ver o quanto o seu site pode melhorar (e vai, se você aplicar a solução descrita abaixo), nada como poder medir a velocidade do seu site. Para isso, existem dois aplicativos bastante utilizados: YSlow e Pagespeed.
YSlow
O YSlow é uma ferramenta disponível como complemento para os principais browsers do mercado, além de ter seu código fonte disponível. Seu funcionamento é baseado em um artigo muito interessante da equipe do Yahoo contendo 35 regras para sites de alta performance. Não vou explicar como utilizar a ferramenta pois ela é bastante intuitiva e bem documentada (se é que alguém vai precisar da documentação dela).
PageSpeed
O PageSpeed é uma ferramenta desenvolvida pelo Google para a análise de websites. Está disponível como um serviço online e como complemento para o Firefox e o Chrome. Também é baseado em algumas regras (bastante parecidas com as do YSlow) que definem o que é um site otimizado para eles.
A solução
Se você é curioso como eu, certamente já testou as ferramentas, recebeu uma nota ruim em ambas e está coçando a cabeça enquanto se pergunta como resolver tantos problemas.
Se você usa PHP, a solução para quase todos os problemas apresentados é bem simples e se resume em uma palavra: Smartoptimizer. Se você usa alguma outra linguagem, vai precisar resolver os problemas manualmente ou encontrar uma solução similar.
A ferramenta Smartoptimizer é um pacote que inclui um arquivo .htaccess e alguns arquivos PHP e seu funcionamento é bem simples: o arquivo .htaccess resolve os problemas com Etags e cache de arquivos estáticos automaticamente ao mesmo tempo em que redireciona todas as requisições de arquivos css e js para seu processador que os minifica, concatena e zipa .
Instalá-lo é muito simples:
- Coloque o .htaccess na raiz de seu servidor web (se você já utiliza um, basta acrescentar as regras do arquivo).
- Configure a ferramenta utilizando o arquivo config.php. O arquivo é bem comentado e é fácil saber o que cada coisa faz. Normalmente não há muito o que configurar.
- Se você desejar utilizar a concatenação de arquivos estáticos (e deveria), vai ter que alterar suas páginas nas chamadas aos css e js.
Depois de instalar tudo, teste novamente os serviços YSlow e PageSpeed e veja o quanto o seu site melhorou sem grande esforço. Agora, basta tratar os poucos problemas restantes (se é que ainda há algum) que não foram resolvidos pelo Smartoptimizer.
Espero que o artigo seja útil e que vocês possam utilizar mais recursos para enriquecer seus sites mas mantê-los rápidos como a luz!
Se houverem dúvidas ou comentários, basta utilizar o formulário abaixo!
