As 7 práticas para um site otimizado

Todo mundo gosta de sites rápidos. Seus primos não sabem dizer se você tem um arquitetura escalável, se seu banco NoSQL é mais robusto ou se é melhor usar Web Services SOAP ou REST. Mas eles sabem dizer duas informações com precisão: se seu site é bonito e se ele é rápido. Performance, medida pelo usuário, é o que te diz se a velocidade de resposta da sua aplicação é aceitável. E, assim como usuários não se cansam de bordas redondas e sombrinhas bonitas, sempre haverá otimizações possíveis para tornar seu site mais rápido.

[Update] Interessado em Otimizações Web na prática com truques do básico ao avançado? Confira a grade do futuro curso online de otimizações da Caelum!

Inspirado pela recente edição 2010 da Velocity Conference organizada pela O’Reilly e por uma palestra recente que dei com o Alberto Souza aqui na Caelum, além de discussões que aparecem no nosso curso que trata de HTML, CSS e Javascript, selecionei um punhado de dicas para deixar qualquer site ou aplicação Web mais rápido em instantes. Meu TOP 7 não pretende ser uma lista completa e nem detalhada de boas práticas. É mais um guia rápido sobre tudo o que você deveria fazer em qualquer site antes de perguntar a opinião dos seus primos – ou do seu chefe, ou de qualquer usuário. Eis então:

TOP 7 das Otimizações na Web:

0. Habilite GZIP em todas as suas páginas. Se você ainda não fez isso, pare imediatamente de ler esse post e faça. É o passo zero, nem vou contá-lo. Dicas de como fazer no Tomcat, Jetty, Apache, IIS.

1. Agrupe arquivos JavaScript/CSS. 90% do trabalho de otimização consiste em diminuir o número de requests feito na página e o peso de cada um deles. Você usa JQuery (ou qualquer outro framework) com JQuery UI e mais meia dúzia de plugins, sem contar o código JS da sua aplicação? Junte tudo no menor número de arquivos possíveis para evitar muitos requests. Mesma coisa com CSS, um arquivo com tudo basta. Mas gosta de manter as coisas organizadas ao invés de escrever um arquivo com milhares de linhas? Então junte essas coisas dinamicamente como faz o pessoal do Digg ou faça o serviço no build da aplicação como preferimos aqui na Caelum.

2. Comprima o JavaScript/CSS. Você escreve JS/CSS elegante, bem documentado, com código organizado e variáveis de nomes legíveis. Mas seus primos não se importa com isso, eles querem um site rápido e isso significa não trafegar no request bytes e mais bytes de documentação ou de código legível. Comprima todo o seu código JavaScript e CSS usando o YUI Compressor ou o Google Closure Compiler. Faça isso em build time ou dinamicamente.

3. Otimize suas imagens com Smush-it. Nem todos os KB de suas imagens são necessários para o cliente. Arquivos JPEG possuem uma série de metadados e PNGs possuem palhetas de cores. Remova vários KBs desnecessários de suas imagens usando o Yahoo Smush-it em todas elas.

4. Coloque CSS no topo e JavaScript embaixo. Simples assim. Referencie os seus CSS no <head> com <link> para evitar o flash effect, e coloque seus scripts logo antes do fechamento do <body> para não atrasar a renderização da tela.

5. Não redimensione imagens no HTML. Não use os atributos width e height das imagens para redimensionar seu tamanho. Sirva as imagens já com tamanho certo e otimizadas. Mas coloque sempre o width e height de todas as imagens para ajudar o browser nos cálculos da renderização da página.

6. Configure o Expires corretamente. Use o cache do navegador para prover uma melhor experiência ao usuário no segundo request – seja no retorno ao site ou navegando para a próxima página. Permita também que Proxies entre seu servidor e o cliente cacheiem elementos do seu site para evitar um download demorado. Configure o header de Expires de todo seu conteúdo estático (JS, CSS, imagens) com alguns dias de duração.

7. Use YSlow e PageSpeed. Depois que você fez todas as otimizações anteriores, instale o YSlow e o PageSpeed para um diagnóstico detalhado de seu site. Monitore sua performance constantemente e vá implementando sempre novas otimizações. Seus usuários agradecem.

Esse TOP 7 são todas as otimizações que você deveria ter feito ontem em qualquer site seu antes de começar a falar em performance. Há muitas outras práticas, algumas mais complicadas, como CSS Sprites, usar CDNs, otimizar seus cookies, fazer preload e postload de conteúdo, ou comprimir seu HTML. Dependendo da tecnologia que você usa no seu sistema, você terá maior ou menor facilidade de aplicar todas essas práticas: no JSF e ASP.NET você terá benefícios para desenhar sua interface, mas muito mais trabalho de fazer esse ajuste fino; com Struts, Rails, ASP.NET MVC, VRaptor e frameworks action based, será o contrário.

Bônus: Onde ir depois?

E você, que outras práticas aplica no seu website?

[Update] Interessado em Otimizações Web na prática com truques do básico ao avançado? Confira o novo curso online de otimizações da Caelum!

62 Comentários

  1. Humberto 08/12/2011 at 17:53 #

    Olá, quanto à compressão gzip, isso é possível no JBoss AS 7? Pelo que vi parece que essa funcionalidade foi retirada nessa última versão.

  2. Felipe 27/03/2012 at 18:18 #

    Ola,
    Estou tentando setar o Header Expires e mesmo com o Page Speed mostrando q esta tudo OK, o browser continua chamando o arquivo no servidor.
    Postei a pergunta no guj com mais detalhamento.

    http://www.guj.com.br/java/268731-problema-com-cache-no-browser—cache-control-expires-last-modified-etc

    Valeu a ajuda,
    e parabéns pelo post!!

  3. Felipe 28/03/2012 at 02:10 #

    Como vcs fazem para setar a data de Expiracao/Cache-Control dos Arquivos?
    Vcs fazem um filtro manualmente no java ou configuram para q o servidor faça cache?
    E mais uma pergunta: Como fazer para configurar o cache pelo servidor? Eu achei esse link aqui será q ta certo?
    http://www.symphonious.net/2007/06/19/caching-in-tomcat/

    valeu!

  4. Sydney de Oliveira 06/06/2012 at 14:16 #

    Se ainda der tempo, o link do item 0, Habilite GZIP, mudou para http://www.brunopereira.org/otimizacao/2010/06/20/acelerando-seu-site-parte1-compressao/
    Fora isso, as dicas são nota 100 para novatos como eu.

  5. Ricardo 05/04/2013 at 19:00 #

    Otimo

  6. Guilherme Velloso 23/04/2013 at 15:29 #

    Parabéns pelo post!! Fantástico.
    Se não for pedir de mais, teria como dar uma dica de como usar htmlcompressor ou indicar tutorial? Estou procurando algum tutorial mas não encontrei.

    Abraços

  7. Sérgio Lopes 23/04/2013 at 18:23 #

    Oi Guilherme!

    Usar o htmcompressor é simples. Depois que baixou ele (um arquivo jar), basta rodar na linha de comando:

    java -jar htmlcompressor.jar arquivo.html

    Tem varias opcoes avancadas pra voce usar se quiser tbm. Ai a documentacao oficial dele é o melhor lugar pra pegar:

    https://code.google.com/p/htmlcompressor/

    Se nao quiser o trabalho de instalar e configurar, da pra usar algo online mais simples e mais facil:

    http://htmlcompressor.com/compressor.html

    Abracos

  8. Panorâmica Social 03/02/2014 at 13:36 #

    São ótimas e importantes dicas, mas infelizmente você diz o que fazer, e não como fazer, preferindo direcionar a links de terceiros, geralmente em inglês.

    Gostaria de sugerir que fizesse tutoriais em português para quem quisesse aplicar de modo fácil cada uma dessas sugestões.

    Grande abraço.

  9. Sallma Motta 17/04/2015 at 12:02 #

    Sergio,não vou me ater a tantas tarefas a realizar que a maioria absoluta de Blogueiros não entende.Como fazer para otimizar imagens que não estão em formato de imagem(tipo,quando tiramos fotos),estas imagens se encontram em outros formatos,então não sei como otimizar. O Google me enviou o Download de recurso de imagens javaScript e CSS, mas como isso é feito,precisa instalar no Html da pagina? Tenho como faze-lo,mas não como faze-lo pode me ajudar?

  10. Devlinux2 04/08/2015 at 16:40 #

    Eu testei a configuração do gzip no ssl labs e acusou vulnerável para BREACH (CVE-2013-3587) para conexões criptografadas não é boa idéia então?

  11. Micaele Nascimeto 29/10/2015 at 11:43 #

    Olá… falar mais sobre otimização de sites no lado servidor?!

Deixe uma resposta