Melhorando significativamente a performance de aplicações web sem gastar tanto

Performance é uma coisa complicada. Sempre tem alguma coisa para melhorar na aplicação. Banco de dados, cluster, replicação de estado, cache dos dados, load-balance, pooling de recursos, processamento assincrono, networking, I/O… São tantas coisas que podem causar problemas de performance, gargalos, instabilidade, que nós, pobres desenvolvedores, ficamos perdidos!

Como diria Donald Knuth, “a otimização prematura é a raiz de todo o mal”. Ás vezes se gasta muito tempo otimizando determinada parte da aplicação, mas com um ganho de performance muito baixo. E além do tempo gasto na otimização, gastasse muito tempo testando se a otimização não quebrou o funcionamento da aplicação (ok, testes automatizados reduzem este tempo) ou testando quanto a performance melhorou por causa da otimização feita.

Sempre que se fala em melhorar a performance, muitos desenvolvedores pensam em load-balance, cache do banco de dados, pooling de recursos, melhoria nas queries, etc. Não há nada de errado em aplicar esses conceitos nas aplicações, inclusive muitas vezes isso deve mesmo ser feito. Mas quando se trata de aplicações web, a performance da aplicação, ou a percepção da performance da aplicação pelo usuário, pode ser melhorada por otimizações no front-end da aplicação, sem grandes alterações na arquitetura ou no código da aplicação.

Li recentemente o livro High Performance Web Sites, que traz 14 dicas para melhorar a performance de aplicações web alterando pontualmente o front-end das aplicações web. Algumas dessas dicas são bem fáceis de se implementar e trazem um excelente ganho na rapidez com que as páginas web são carregadas.

O livro diz que, na grande maioria dos casos, a maior parte do tempo gasto para visualizar uma página web é gasto na renderização do HTML pelo browser, e não no processamento da requisição web pelo servidor. Então vale a pena investir tempo e esforço para criar um front-end que é renderizado mais rápido pelo browser.

As dicas do livro são:

  • Fazer menos requisições HTTP
  • Usar uma Content Delivery Network
  • Adicionar um cabeçalho “Expires” na resposta HTTP
  • Utilizar Gzip para compactar os componentes da página
  • Colocar os Stylesheets no topo da página
  • Colocar os Scripts no fim da página
  • Evitar CSS Expressions
  • Colocar os códigos JavaScript e CSS em arquivos externos
  • Reduzir DNS Lookups
  • Compactar os códigos JavaScript
  • Evitar Redirects
  • Remover Scripts duplicados
  • Configurar as ETags
  • Make Ajax Cacheable
No livro esta explicado com mais, mas essas dicas podem ser encontradas no site do Yahoo.
Dessas 14 dicas, acredito que as que tragam mais ganho sem muita dificuldade são as dicas
Essas duas dicas não requerem alteração no código da aplicação e diminuem muito o tempo que o browser leva para carregar as páginas web.
Não vou entrar em detalhes sobre por que essas dicas melhoram a performance por que acho que o link já explica isso muito bem.
Implementei essas dicas rapidamente num projeto que desenvolvo e o ganho em rapidez foi muito bom! O projeto é uma aplicação web em Java. Para utilizar Gzip para compactar os componentes da página, bastou alterar o arquivo server.xml do Tomcat, adicionando o valor compression=”on” na entrada do HTTP Connection. Para Adicionar um cabeçalho “Expires” na resposta HTTP copiei utilizei um servlet filter descrito neste artigo.
Sem gastar muito tempo, sem alterar uma linha de código (ok… tive que alterar a configuração do Tomcat e o web.xml da aplicação web), com pouca configuração, a aplicação ficou bem mais rápida! O conteúdo estático ficou sendo “cacheado” pelo browser e o conteúdo não-estático é compactado antes de ser enviado para o browser.
A extensão YSlow foi de grande ajuda para medir e melhorar a velocidade do site. Recomendo que todos os desenvolvedores de aplicações web a tenham instalada no seu Firefox.
Às vezes as coisas mais simples são as que trazem melhores resultados🙂

9 comments so far

  1. Diego Carrion on

    Muita gente menosprecia o YSlow mas como voce disse, ela é de grande ajuda, tem me servido bastante.

    Esses artigos sao legais, nao e todos os dias que lemos sobre performance.

  2. Fernando Boaglio on

    Além dessas dicas, com um DOCTYPE definido, a página é renderizada mais rapidamente. Interessante também é isolar todo os estilos e rotinas Javascript em arquivos distintos, pois esses ficam em cache no browser.

  3. Davi on

    Muito boas as dicas, show de bola!
    Vou experimentar esse YSlow qualquer dia.
    Valeu!

  4. Badawi on

    Legais as dicas.

    Já apliquei muitas delas num projeto e o acesso ficou realmente mais rápido!
    Usando isto, com a nova geração de browsers com motor de javascript melhor, será bastante interessante o resultado final.

    abraço

  5. Roberto Nunes Neves on

    Obviedade!

  6. Edu Monesi on

    Além de medir os resultados, o YSlow também mostra uma nota-conceito para cada item listado neste post. É possível, por meio da nota-conceito, atacar os pontos mais críticos para elevar o desempenho.

  7. Paulo Silveira on

    excelente artigo!

  8. Jaguaraci Silva on

    Achei muito legal essas dicas de performance.

    Uma coisa que incomoda bastante e é simples de revolver são as referências às tagslibs. A cada utilização é necessário adicionar no web.xml.

    Tem uma dica bem legal: coloque as taglibs mais utilizadas em uma JSP e faça referência a JSP usando a diretiva include quando for utilizá-la, ex:

  9. Sergio Oliveira Junior on

    Eu utilizei o mod_gzip para compactar páginas web, no tempo que rodava resin com Apache em Linux no ParPerfeito. A performance melhorou, mas o bom mesmo foi a economia nos gastos com banda. Eu achei que o Tomcat por default já servia páginas compactadas. Ótimo artigo!


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: