IGTI Blog

7 passos para melhorar o desempenho da sua aplicação Web

Com algumas poucas ações podemos melhorar significativamente o tempo de carregamento da aplicação.

A cada dia surge uma nova tecnologia para web que nos permite fazer cada vez mais coisas em nossas aplicações. Dessa forma, os sistemas ficam maiores, mais robustos e mais pesados. Com isso um problema tem ficado muito evidente: desempenho. Quanto mais tentamos fazer sistemas robustos, capazes de fazer muitas coisas, mais o desempenho se torna uma questão relevante para desenvolvedores.

O principal motivo para nos preocuparmos com desempenho é dar uma experiência melhor a quem usa o sistema. Empresas conseguem aumentar consideravelmente a retenção de clientes e a rentabilidade de seus sites ao melhorar o desempenho da aplicação e, consequentemente, a experiência de seus usuários.

Os problemas de desempenho se concentram em dois pontos principais da aplicação: no carregamento da página e na renderização na página. O carregamento da página é quando todos os recursos estáticos são carregados no servidor para o navegador. Isso significa que quanto maiores forem os arquivos, maior será o tempo de carregamento.

O tempo de renderização diz respeito ao tempo que demora depois que todos os arquivos essenciais foram carregados, e o navegador vai precisar trabalhar para compilar, interpretar tudo, e dispor os elementos de uma maneira que seja entendível visualmente.

Em alguns passos simples é possível melhorar significativamente a experiência de quem usa a aplicação. Veja só:

1.   Reduzir o tamanho dos arquivos enviados

O principal gargalo nas aplicações web é o tamanho dos arquivos que é carregado para que as pessoas comecem a usar a aplicação. Vários arquivos são enviados para o computador de quem acessa a aplicação. São arquivos Javascript, CSS, HTML, imagens, vídeos, músicas, etc.

Nem sempre quem acessa nossa aplicação tem uma boa conexão com a internet e vai precisar esperar bastante até a aplicação estar pronta para uso. Reduzir o tamanho dos arquivos significa reduzir o tempo de espera. Afinal, ninguém gosta de ficar esperando o carregamento das páginas.

Tanto HTML, CSS quanto Javascript são interpretados nos navegadores. Dessa forma a máquina do usuário do sistema será responsável pelo processamento e pela renderização da interface. Como não conhecemos a capacidade de processamento da máquina do usuário, precisamos estar atentos ao desempenho da interface construída. Nenhum usuário gosta de ficar esperando o site carregar. É muito irritante.                                                                            

Algumas dicas para reduzir o tamanho dos arquivos enviados:

Habilitar compressão de arquivos no servidor

Essa é uma tarefa muito rápida de se fazer e é suportado em praticamente todos os servidores e navegadores. Com ele todo o conteúdo da página é comprimido (ex.: usando GZIP) antes de enviar ao cliente, chegando a cortar quase metade do tráfego.

Minificar todo o código Javascript e CSS

Todo código JS e CSS deve ser bem documentado, conter nomes legíveis e boa indentação. Entretanto, nada disso importa na execução. Há diversas ferramentas que minificam o JS e o CSS facilmente, e reduzem muito o tamanho do código. Integrar uma ferramenta de minificação de código é uma tarefa rápida e fácil.

Comprimir HTML

O código HTML também pode ser comprimido. Apesar de não ser tão simples comprimir o HTML, é possível remover aspas, espaços e comentários desnecessários.

2.   Remover o conteúdo desnecessário

Verifique se todas as bibliotecas e dependência que você utiliza são realmente necessárias. Muitas vezes usamos canhões para matar formigas. Usamos bibliotecas ou frameworks inteiros para resolver problemas simples. Essas bibliotecas vão adicionar tempo de carregamento à sua aplicação, muitas vezes desnecessariamente.

Muitos dos frameworks que usamos têm versões mais leves, chamadas Lites, que provêm funcionalidades limitadas, mas que para muitos casos pode ser o suficiente.

3.   Adiar o carregamento de tudo que não for essencial

Com o carregamento assíncrono de componentes, a renderização não é bloqueada e a página fica mais responsiva. Tudo o que for essencial para o início da navegação deve ser carregado prioritariamente. Elementos secundários, ou que inicialmente estão ocultos do usuário, devem ser carregados depois. Diferenças de frações de segundos já podem ser notadas pelo usuário.

Essa estratégia é chamada de Carregamento Preguiçoso (Lazy Loading) e consiste em carregar as coisas depois para dar a sensação de que a aplicação está rodando de maneira fluida. Dessa forma, deixamos o carregamento e processamento de coisas secundárias acontecendo durante os instantes de ociosidade da aplicação (quando a pessoa não está interagindo com o sistema e exigindo algum tipo de processamento).

4.   Usar imagens com sabedoria

Quando estamos trabalhando com imagens, precisamos tomar cuidado para que o tamanho da aplicação não cresça muito. Por isso, há várias boas práticas que devemos seguir, para não comprometer o tempo de carregamento da aplicação.

Redimensionar, cortar, comprimir

Quando utilizar imagens, verifique se não está sendo carregado mais Pixels do que o que é necessário. Se uma imagem utilizada é maior do que é exibido na tela, pode ser o caso de redimensionar ela. Em alguns casos utiliza-se CSS para cortar um pedaço da imagem que queremos exibir, e nesse caso o corte poderia ser feito no editor de imagens, para que o usuário só tenha que fazer o download da parte que realmente será visualizada, poupando alguns KiB de download. A compressão de imagens também é algo que deve ser considerado, pois as vezes enviamos imagens com uma qualidade muito boa, sendo que se a qualidade não estivesse tão boa não seria sequer percebido pelo olho humano.

Carregamento progressivo

A ideia do carregamento progressivo de imagens, é utilizar formatos que permitam um carregamento diferente do carregamento linear. No carregamento linear a imagem é exibida parte por parte, sendo que cada parte tem a qualidade total da imagem. No carregamento progressivo a imagem é exibida inteira com uma qualidade muito baixa, depois a imagem inteira com uma qualidade melhor, e assim sucessivamente até que a imagem é toda exibida em sua qualidade máxima. Isso gera uma melhor experiência do usuário, que pode ver rapidamente a imagem, mesmo que ainda embaçada.

aplicação Web

Figura 1: Carregamento sequencial vs. Carregamento Progressivo

Formatos modernos de imagem

Considere a utilização de formatos mais novos de imagens, que permitem otimizações no fluxo de rede. Nem todos os navegadores são compatíveis com os formatos mais recentes, mas se a sua aplicação faz um uso muito intenso de imagens, a utilização de novos formatos pode ser interessante. Nesse caso, você vai precisar utilizar um formato convencional e um formato mais novo, e de acordo com o navegador do seu usuário você vai entregar a imagem em um determinado formato.

5.   Usar cache

O uso de cache para os arquivos pode ajudar a reduzir muito o tempo de carregamento da aplicação para usuários que estão retornando. O cache diz ao navegador para aproveitar a versão anterior do arquivo, sem a necessidade de fazer o download novamente. Uma fotografia, por exemplo, não precisa ser carregada novamente se não for alterada.

A boa prática é colocar um tempo de cache elevado para recursos que não são alterados com frequência (ex.: imagens) e menos elevado para arquivos que podem ser alterados com frequência maior (ex.: javascript, css, textos).

6.   Fingir que a aplicação é rápida

Mesmo em situações que não é possível reduzir o tamanho e a quantidade de arquivos da aplicação, podemos fazer algumas coisas para dar uma sensação de maior velocidade.

Posicionar corretamente CSS e Javascript

Uma técnica simples é colocar o CSS no topo e o JS no final da página. Colocar o CSS no topo evita o efeito flash, que é quando a página é carregada sem estilo, e em um flash o estilo aparece. Carregando o estilo primeiro isso não acontecerá. Colocar o JS no final garante que a renderização não seja atrasada pela execução de scripts.

Pré-carregar dos componentes

Quando se sabe qual a próxima página o usuário irá acessar, pré-carregue componentes, assim a renderização da próxima página será mais eficiente.

 Conclusão

Há várias iniciativas que podem ser realizadas para melhorar o desempenho das aplicações web. Algumas podem ser feitas em pouco tempo, outras demandam mais esforço. Para quem trabalha com desenvolvimento web é importante conhecer as várias questões que envolvem o desempenho das aplicações e saber analisar o custo/benefício para decidir tratá-las ou não.

E no seus projetos, como é tratada a questão de desempenho? Comente!

Professor autor: Augusto Campos Farnese