Melhorando a performance de sistemas web.
Com a grande migração de muitos sistemas para a internet após o ano 2000, muitas técnicas foram propostas para a melhoria no processo de carregamento de sistemas web. Essas melhorias visam, claro, uma melhor performance de acesso para os usuários dos sistemas.
Nesse post irei tratar de algumas técnicas que são principais, de fácil identificação e que podem ser implantadas rapidamente. Um detalhe importante é que todas as informações colocadas aqui são as mais simples possíveis, por conseguinte se forem implantadas em ambientes de produção pode vir a ser necessário algum tipo de análise de segurança (não que todas irão precisar claro!). Por onde começar?
Um start interessante é instalar estas duas ferramentas, as quais irão proporcionar uma visão de como nossa página é carregada e sugerir melhorias a serem feitas:
Após isso, comece realmente a melhorar sua performance!
Minify your files!!!
A primeira técnica e que considero a mais simples de todas, é minificar e agrupar seus arquivos estáticos. Mas o que são arquivos estáticos? Eles são como páginas estáticas (Static Web Pages[1]), ou seja seu conteúdo não muda de acordo com o acesso. Os exemplos mais comuns são arquivos javascript, css e imagens!
Normalmente esses arquivos não são tratados para contemplar esse tipo de situação, e isso pode vir a se tornar um problema de payload[2] conforme vamos adicionando mais e mais bibliotecas, classes e imagens sem otimiza-los.
Algumas soluções para esse problema se resumem em minimizar manualmente os arquivos usando ferramentas como (estes são os top 4 na minha busca do Google) e posteriormente agrupando todos em 1 (um) só arquivo:
Javascript
CSS:
Dentre os outros milhões de ferramentas online, eles podem nos ajudar a melhorar a performance de nossa aplicação no que concerne no carregamento da bibliotecas e códigos que utilizamos, mas não são nem um pouco produtivos, pois devemos fazer manualmente essa cópia e compressão e ainda precisamos manter 2 (dois) arquivos (o original e o minificado).
Como melhorar isso? E sermos mais produtivos?
Podemos utilizar ferramentas automáticas que façam isso, alternativas é o que não faltam também. Particularmente conheço muito poucas ferramentas desse tipo em PHP, mas uma me chamou ultimamente:
A idéia aqui é a mesma, otimizar e automatizar a minificação dos arquivos estáticos, lembrando que ele não serve para imagens, mas sim para javascript e css.
Em outras linguagens temos alternativas ja incorporadas nos frameworks (que não é necessariamente o caso do Zend Framework[3], mas o minify pode ser usado em conjunto[4]), por exemplo em Django[5] temos um app chamado django-compressor[6] que faz a minificação e agrupamento dos arquivos automaticamente, sendo necessário apenas ativar o package.
Para imagens, podemos utilizar de alguns programas para compressão, alguns exemplos bem interessantes, sugeridos pelo Google são [7]:
- Imagens JPEG:
- Imagens PNG:
GZIP[8] on the fly!
Outra técnica bastante utilizada em sistema/sites da web é de comprimir seus arquivos, aqui vale a máxima de que 10% de redução pode diminuir em muito o payload de seu usuário!
Vou dar um exemplo bem simples e surpreendente, eu utilizo a biblioteca ExtJs[9] que tem um arquivo .js de 1Mb! Isso mesmo, e é 1Mb ja minificado! Usando gzip diminuímos esse payload para 400Kb, ainda é muito? Pode ser, mais é um ganho de 50%. Ou seja 50% menos de carga que um usuário terá de carregar em cada acesso ao sistema.
Devo dizer que o gzip não serve apenas para arquivos estáticos, podemos comprimir todos os arquivos e nossas respostas AJAX[10] também, ou seja, todo nosso site será mais leve para o usuário carregar. O lado ruim? nosso servidor deve aguentar a carga para comprimir todos os dados antes de enviar de volta para nosso usuário.
Para habilitar o gzip em nosso servidor apache devemos apenas habilitar o módulo mod_deflate! Simples não? Claro que tem-se muitas configurações, mas de modo simplista devemos apenas executar em shell:
$ a2enmod deflate
Fazendo isso estamos prontos, todo o conteúdo do nosso site será compresso para cada requisição realizada. Outros servidores podem possuir outras configurações.
Em Django podemos habilitar a compressão via gzip sem precisar interagir com o servidor, para isso basta habilitarmos o middleware GZipMiddleware[11], fazendo com que nosso sistema use script’s em python para a compressão!
Finalizando por aqui...
Seus usuários agradecem, mesmo não sabendo disso... :D!
Estas são duas regras muito simples que podemos habilitar em nossos sistemas, fazendo com que a performance de carregamento seja melhorada.
No próximo post vou tratar sobre o varnish cache e cache headers no apache!
falowaer
Referências:
[2] - http://pt.wikipedia.org/wiki/Payload
[3] - http://framework.zend.com/
[4] - http://www.marciopaiva.com/2011/11/05/solucao-para-minify-de-js-e-css-utilizando-zend-framework/
[5] - https://www.djangoproject.com/
[6] - http://django_compressor.readthedocs.org/en/latest/index.html
[7] - https://developers.google.com/speed/docs/best-practices/payload#CompressImages
[8] - http://en.wikipedia.org/wiki/Gzip
[9] - http://docs.sencha.com/ext-js/4-1/
[10] - http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
[11] - https://docs.djangoproject.com/en/dev/ref/middleware/#module-django.middleware.gzip
