performance no front-end

Performance no front-end: como fazer a sua aplicação web voar

A preocupação com performance no front-end em aplicações web nem sempre está no topo da lista de prioridades de um projeto. Com tantas demandas e novas features a serem implementadas, acabamos entregando nosso software sem a devida preocupação com o seu desempenho.

Mas por que devemos nos preocupar com performance? O que devemos levar em consideração? E por onde começar? Essas são uma das perguntas que vou tentar responder neste post.

Por que se preocupar com performance no front-end?

Neste tópico, vamos tratar dos principais “porquês” de se preocupar com o desempenho da sua aplicação, e o primeiro deles é: usabilidade.

Ninguém gosta de esperar, muito menos quando o assunto é web. Lentidão na sua aplicação pode afastar os usuários do seu produto, dificultar a retenção de novos clientes, entre outros problemas. Um exemplo interessante é o caso da Mozilla: ao diminuir 2,2 segundos do tempo de carregamento da sua landing page, eles observaram um aumento de 15,4% nas conversões de acessos em downloads, o que resultou em mais de 60 milhões de downloads por ano.

Outro fator importante a ser considerado é o uso massivo de dispositivos móveis. Segundo o IBGE, já em 2013, 57,3% das residências acessaram a internet por meio de celulares e tablets, como mostrou a Valor. Mas mesmo com o crescente acesso ao 4G, a internet móvel no Brasil ainda é muito cara. Isso significa que economizar o pacote de dados do seu usuário torna-se um ponto importante a ser considerado ao desenvolver sua aplicação web.

Falando agora um pouco sobre o outro lado da sua aplicação, o back-end também deve entrar na nossa lista de preocupações. Costumo dizer que o front-end é a ponte entre o usuário e o servidor. Assim, filtrar bem as requisições feitas no seu back-end é um ponto de suma importância, visto que, hoje, muitos serviços de nuvem como Amazon, Azure, Google Cloud e afins cobram por requisição. Isso significa que requisições desnecessárias geram custos desnecessários e tráfegos de dados desnecessários.

E para o famigerado SEO? Influencia em alguma coisa? A resposta é sim. Vocês já ouviram falar em um site chamado PageSpeed Insights? Pois então, o Google, já há algum tempo atrás, mencionou que a boa performance de uma página é um dos fatores a serem considerados no ranqueamento de um site. Sendo assim, através dessa ferramenta, podemos receber uma nota juntamente com um feedback mostrando o que fazer para corrigir os pontos fracos da nossa página. Legal, né?

Já sei que é importante. Mas como melhorar o desempenho da minha aplicação?

Existem inúmeras técnicas de performance interessantes que podemos utilizar. Inclusive, no site Browser Diet, existe uma lista bem completa de várias técnicas legais. Aqui, vou destacar as que mais uso no dia a dia na Take.

Nos projetos da Take, optamos por concatenar e minificar todos os assets CSS e JavaScript em um único arquivo, economizando assim requisições “blocantes” (aquelas que bloqueiam a página enquanto o download não é concluído) feitas no servidor. Para isso, utilizamos uma ferramenta super legal chamada Webpack. Pra quem não conhece, essa ferramenta é excelente para gerar bundles, processar arquivos (transformando imagens físicas em formato base64, por exemplo) e executar uma série de tarefas como transpilar TypeScript para JavaScript, gerar arquivos programaticamente, entre outras. Também existem alternativas interessantes como o GruntJs e Gulpjs.

Outra coisa legal é sempre definir largura e altura das imagens. Considerando uma página web que possui várias imagens a serem renderizadas, informar o browser com antecedência sobre as dimensões das imagens é interessante, pois caso você não faça isso por si só, o navegador irá fazer, e isso gasta um certo processamento (pouco, mas gasta).

Recursos externos devem, preferencialmente, ser carregados utilizando as tags async ou defer. Isso significa que, scripts que antes eram carregados de forma sequencial, agora serão carregados de forma assíncrona. Exemplo:

<script async src=”http://site.com/my-script.js”>

Tenha em mente que carregar scripts de forma sequencial às vezes é necessário, outras vezes não.

Por fim, outra técnica interessante e bastante incentivada pelo Google são as chamadas aplicações web progressivas (PWA), utilizando os service workers. Essa é uma técnica bastante avançada, mas que traz resultados consideráveis em termos de performance.

Não vou entrar em detalhes de implementação, pois isso exigiria outro post. Mas, fazendo um resumo, o que basicamente acontece é: utilizando os service workers do browser, conseguimos armazenar programaticamente em cache os arquivos necessários para o carregamento da página (index.html, arquivos javascript, css e etc) e, sempre ao abrir a página, ao invés de consultar o servidor, o service worker consulta diretamente o cache. Isso também acontece em casos em que o usuário está offline. Dessa forma, uma vez armazenado os arquivos em cache, mesmo offline você consegue mostrar um conteúdo ao seu usuário em vez da página default de “falha de conexão”. Nesse tutorial em português do Google, eles ensinam um passo a passo de como criar o seu primeiro Progressive Web App.

E vocês? Quais técnicas mais usam para a melhorar a performance de sua aplicação web no front-end? Deixem nos comentários!


samuel post front-end
  • Facebook
  • Twitter
  • Google+
  • LinkedIn

Samuel Martins

Analista de Sistemas

LinkedIn

 

 

 

 

 

 

 

 

Leia mais:

Plataforma de chatbots: saiba mais sobre esse mercado

Campus Party MG 2ª edição: valeu a pena participar?

Chatbots ou aplicativos: confira este comparativo

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Share This
Navegação