A preocupação com front-end performance 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 no front-end? O que devemos levar em consideração? E por onde começar?
Vamos analisar 3 critérios essenciais para responder a essas perguntas (e ainda te mostrar 3 técnicas para melhorar sua performance web)!
1. Usabilidade
Por que se preocupar com performance no front-end?
Bom, ninguém gosta de esperar, muito menos quando o assunto é web. A falta de front-end performance (popularmente conhecida como 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.
2. Uso massivo de dispositivos móveis
Outro fator muito importante a ser considerado quando o assunto é performance no front-end!
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 o seguinte quando o assunto é front-end/back-end: 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. Ou seja, não ligar para a performance no front-end pode doer no bolso.
3. SEO
E para o famigerado SEO? A performance no front-ende 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é? Então, não deixe de fazer seu dever de casa de performance no front end se não quiser que o google te penalize.
Como melhorar a front-end perfomance?
Existem inúmeras técnicas de performance web interessantes que podemos utilizar. Inclusive, no site Browser Diet, existe uma lista bem completa de várias técnicas legais que mostram o verdadeiro impacto da tecnologia nas empresas.
Agora, vou destacar as x que mais uso no dia a dia na Take.
1. Concatenar + Minificar
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.
2. Definir larga e altura das imagens
Outra coisa legal é sempre definir largura e altura das imagens para melhorar a perfomance no front-end.
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=”https://site.com/my-script.js”>
Tenha em mente que carregar scripts de forma sequencial às vezes é necessário, outras vezes não. De qualquer forma, é uma ótima dica de front-end perfomance.
3. Service Workers em PWA
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 no front-ed.
(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.
Front-end perfomance resolvida?
Espero que com esses 3 critérios +3 técnicas de como melhorar sua performance no front-end, você possa entregar uma melhor experiência ao usuário.
Uma forma bem inteligente de coletar esses feedbacks nesse sentido é por meio de chatbots e nós podemos te ajudar com isso!
Veja um exemplo de como criar um na nossa plataforma:
A Take possui um chatbots que funcionam em diversas plataformas e aplicativos de redes sociais.
Nosso objetivo é te ajudar a oferecer a melhor experiência aos seus clientes enquanto otimiza seus processos. Para isso, criamos chatbots que automatizam diferentes ações diárias da sua empresa.
Junte-se ao Santander, Rock in Rio, Casas Bahia e +100 clientes satisfeitos com a Take.
—>Conheça nossos planos e descubra qual é a ideal para seu negócio agora! <—
Não perca a oportunidade de revolucionar a forma como a sua empresa se comunica com os seus clientes!
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!
