Otimizando desempenho

Nos últimos dias, temos brigado muito por coisas muito pequenas, as vezes passageiras. Cada migalha desperdiçada é motivo para um nova discussão que acaba mudando o rumo das coisas… Calma gente, não estou tendo problemas de relacionamento não, são apenas discussões sadias de trabalho para se melhorar os níveis de performance nos aplicativos.

Quando se atinge um certo número de usuários de uma única aplicação, devemos tomar certos cuidados. Muitas vezes, ignoramos alguns pontos que podemos melhorar, deixando 1KByte, 2KB mais leves, pois afinal, para um usuário parece tão pouco, mas quanto representa 2KB multiplicado por 100 mil usuários? 195 MB. É, assusta, e as cifras só tendem a aumentar.

Com o advento da computação em nuvem, alguns perceberam que realmente deveriam otimizar suas aplicações, pois cada KB gasto vai representar algum valor que será, com certeza, debitado num cartão de crédito futuramente. Enquanto antigamente, bastava planejar a compra de uma máquina muito além das necessidades e ter um custo fixo, agora, a briga é para sempre diminuir a conta no fim do mês, como numa economia doméstica (certa vez, ouvi que toda economia é de migalhas. Concordo).

Mas muitas vezes, desenvolvedores de aplicações esquecem de alguns detalhes como por exemplo, o peso dos arquivos da camada de apresentação de suas aplicações. Na Web, isso também deve entrar na conta: tamanho do HTML, CSS, JS e imagens. E hoje em dia, são relativamente conhecidas técnicas para aprimorar esses estáticos para uma melhor experiência do usuário. Digo relativamente porque ainda me deparo com muitos websites, sistemas e gadgets por aí sem nenhuma otimização nesse sentido. No Brasil ainda temos muitos usuários que não dispõe de banda larga, e eles agradecem cada byte salvo.

Primeiro passo: Limpeza

Um arquivo limpo de tudo que não é necessário é muito melhor, sem dúvida. Elimine dos arquivos aquelas linhas velhas, cheias de comentários inúteis, atributos desnecessários, funções que não são usadas, variáveis zumbis (que estão ali apenas para … nada). Em minha última façanha do tipo, deu pra economizar cerca de 10KB. Como vamos usar uma ferramenta mais pra frente, não precisa deletar nada do arquivo ainda, a não ser que queira ver o quanto você ganhou com esse processo. Comentários podem ser mantidos, e métodos “depreciados” podem ser mantidos comentados também (eu faço isso para armazenar código que venha a ser útil ou que queira manter no histórico para referência rápida).

Reavaliação

Depois desse passo, é a hora de fazer uma certa mágica. Esse passo depende de experiência do usuário, e que tenha um bom conhecimento de lógica e da linguagem em si: reavaliar seu código, diminuindo estruturas de código sem aumentar a quantidade de cálculos, quando não diminuindo o custo computacional (análise assintótica). Isso pode envolver uma análise mais  matemática do código, estimando o número máximo de comparações e operações que ele pode executar. Por isso demanda um profissional graduado. Mas lembre-se: não sacrifique o processamento em troca de tamanho de código! Diversas vezes um código maior e mais específico pode rodar muitas vezes mais rápido. Também, outras vezes, uma simples instrução a mais pode representar um laço a menos.

Comprimindo o código: YUI Compressor

Esse compactador transforma seus arquivos JS e CSS em versões minificadas: com sintaxe reduzida, sem quebras e espaços desnecessários, sem comentários, tudo numa única linha. Isso pode reduzir drasticamente o tamanho do arquivo sem alterar seu conteúdo (eu consegui em minha última utilização a marca de reduzir um .js de 135KB para 84KB!!!), o que é o que buscamos (afinal, quem quer codificar duas vezes a mesma coisa? Otimizar tempo também é muito importante! O YUI Compressor é muito prático e rápido para essa tarefa.

Apenas para exemplificar: ele também altera as assinaturas das suas funções/classes:

function xyz(value_1, value_2) {
    this.param_1 = value_1;
    this.param_2 = value_2;
    ....

Ficará assim, num primeiro momento, assim:

function xyz(f, g) {
    this.param_1 = f;
    this.param_2 = g;
    ....

E depois, assim:

function xyz(f,g){this.param_1=f;this.param_2=g;....

Não se preocupe! Tudo vai funcionar normalmente. Mas podemos perceber que esse compressor realmente vai diminuir seus arquivos. Na tabela abaixo, pode ver o que esses três métodos podem fazer com o peso da sua aplicação:

Um ganho de ~50% no peso total da aplicação, apenas na parte de storage e fileserv.

A União faz a Força Velocidade

Se possível, junto todos os arquivos num único. Tem vários .js? Faça apenas um. O mesmo para os CSS. No protocolo HTTP/1.1, temos uma definição que recomenda não ter maiss de duas requisições sendo processadas ao mesmo tempo para o mesmo servidor. Alguns browsers, como o I.E., seguem isso a risca. Logo, quanto mais arquivos tiver para carregar, pior: mais conexões serão necessárias para atender a demanda, e como o browser só fará duas ao mesmo  tempo, o usuário vai ter que esperar. Aposto que você até teve aquele momento “lâmpada sobre a cabeça” agora, imaginando se poderia fazer isso também para as imagens… e poderá! Veja a seguir no próximo tópico. Uma outra dica para sanar esse problema das conexões simultâneas é manter arquivos em vários servers diferentes.

Sprites

Essa já é mais complicada (principalmente para os desenvolvedores não designers, pelo skill necessário), mas pode significar um gadget/site muito mais rápido para o usuário final. Assim, imagine você carregando vários arquivos .png, os ícones da sua aplicação, por exemplo. Seguindo esse conceito, eles vão ser carregados apenas 2 a 2, mesmo que o usuário tenha uma banda larga suficiente e seu servidor um canhão para carregar muito mais do que isso (falando em tamanho).

Para sanar essa deficiência indireta, uma técnica utilizada são os sprites: você coloca todas as imagens num único arquivo .png (pode ser outra extensão, se aplicável, mas eu recomendo essa), e com os comandos CSS, você seleciona apenas a parte que deseja. Assim será possível usar todo o potencial da banda disponível para trazer todos seus ícones numa única conexão com o servidor, enquanto a segunda concorrente pode ser uma fonte de dados essencial para seu funcionamento.

Nesse tutorial do A List Apart você encontra uma extensa referencia sobre a técnica de sprites.

Concluindo

Bom, com estas ações simples, aposto que sua aplicação será bem melhor carregada, economizará até alguns $$$ para poder me pagar uma cerveja. Sendo assim, deixe seus comentários e dicas nos comentários, caso eu tenha deixado passar alguma! Em breve, um artigo sobre otimização de banco de dados e de fluxo de aplicações.