Melhorando a performance de aplicações Angular
Cada vez mais determinante para o sucesso das aplicações web, a experiência do usuário pode ser melhorada por meio de alguns padrões de arquitetura. Neste artigo, falaremos sobre como aumentar a performance em Angular e melhorar a UX da aplicação.
Como resultado do amadurecimento de conteúdos da web, os usuários têm tido experiências melhores, porém, o trabalho do desenvolvedor tem se tornado cada vez mais complexo.
Dessa maneira, é importante estar atento a diversos fatores ao criar um site ou aplicação:
- Características da infraestrutura da Internet de cada região (discado, banda larga, móvel);
- Dispositivos eletrônicos de navegação Web (desktops, notebooks, tablets, smartphones, smartwatches);
- Conexões com recursos limitados ou limitados por planos de dados;
De acordo com uma pesquisa realizada pelo Google em 2017, mais de 60% dos usuários dizem que a experiência de navegação foi ruim devido à demora no carregamento do conteúdo. Além disso, 53% dos consumidores dizem abandonar sites mobile que demoram mais de 3 segundos para carregar.
Um bom exemplo de como a performance interfere diretamente no tráfego, é o Pinterest.
Embora sendo um site muito acessado, em uma publicação realizada no medium.com, eles relatam que após o trabalho de performance, o tempo de carregamento do site reduziu em 40%, o que gerou um aumento de 15% no tráfego de SEO, além de 15% a mais na taxa de conversão.
Enfim, diversos trabalhos de performance podem ser realizados no desenvolvimento de um site ou aplicação web, incluindo o uso do Angular.
Antes de tudo, devemos lembrar que o Angular é um dos frameworks mais utilizados no desenvolvimento de sites e aplicações web, conforme publicado pelo Starck Overflow.
Afinal, por meio do design pattern lazy loading nas rotas, é possível solucionar o problema de performance de carregamento, e desde o Angular 9, também temos a possibilidade de usá-lo em componentes.
Criando a Feature Module
Criar uma Feature Module e configurar a rota que será aplicada no design pattern são os primeiros passos para configurarmos o lazy loading em uma rota do Angular.
Para facilitar, pode-se utilizar o CLI que irá criar o módulo e a rota com apenas uma linha de comando, conforme o exemplo:
ng generate module pedido –route pedidos –module app.module No exemplo, a linha de comando irá criar o módulo pedido, o componente básico com o mesmo nome do módulo, o arquivo de rotas do módulo e adicionar a rota pedidos na aplicação.
A Figura 1 mostra a estrutura dos componentes, módulos e rotas criados pelo comando.
Neste caso, o CLI configurou o lazy loading para o módulo pedido alterando o arquivo app-routing.module.ts, conforme a Figura 2. Dessa maneira, a aplicação web está preparada para carregar os componentes do módulo apenas quando o visitante acessar a rota /pedidos.
Análise da performance
Agora que foi visto como é configurado o lazy loading no Angular, será analisado a performance conforme o crescimento da aplicação web, fazendo uma comparação entre uma aplicação utilizando o design pattern e outra não.
O cenário analisado foi construído em Angular 8, com material design e mantendo as configurações padrões do webpack.
Os dados foram coletados com a ferramenta de análise de performance Lighthouse, disponível no navegador Google Chrome, a cada aumento de funcionalidade tanto na aplicação com quanto na sem o desing pattern.
A cada funcionalidade criada considerou-se a adição de 4 sub-rotas e 2 novos componentes para cada sub-rota, conforme a Tabela 1.
| Sub-rota | Quantidade de componentes | |
|---|---|---|
| Listagem | /funcionalidade/listagem | 2 |
| Criar | /funcionalidade/criar | 2 |
| Editar | /funcionalidade/editar | 2 |
| Visualizar | /funcionalidade/visualizar | 2 |
A performance foi acompanhada através da análise do tamanho do bundle principal e o comportamento do tempo da 1ª renderização conforme o incremento das funcionalidades.
No caso da análise do tempo da 1ª renderização, a linha de tendência é a mais indicada para esse tipo de análise, pois o tempo par ao download do bundle irá variar conforme a oscilação e consumo da internet, além do hardware do aparelho do usuário no momento da navegação.
As figura abaixo ilustram os resultados após a coleta dos dados com o Lighthouse, usando a categoria Performance e o device Desktop.
Conforme os gráficos da Figura 3 e Figura 4, o primeiro build resultou em um bundle principal com o tamanho e tempo de carregamento de aproximadamente 180 KB e 4 segundos.
Na sequência, a aplicação foi analisada a cada incremento de 6 funcionalidades.
Conforme demonstram os gráficos, aplicar o lazy loading (linha laranja) faz com que, tanto o tamanho do bundle principal quanto o tempo da 1ª renderização sigam na mesma tendência, mantendo-se constante mesmo com o aumento das funcionalidades.
Esse perfil é esperado, uma vez que as novas funcionalidades são compartimentadas em módulos individuais, apenas referenciadas nas rotas do módulo principal, sem sobrecarregá-lo.
Enquanto na aplicação sem o design pattern (linha azul), todos os novos componentes são instanciados, referenciados e desenvolvidos diretamente no módulo principal, aumentando o tamanho do bundle inicial do site a cada incremento de funcionalidade. Como consequência há um aumento do tempo da 1ª renderização.
Portanto, como vimos nos cenários testados, o uso do lazy loading se torna estratégico e traz muitos benefícios para as aplicações web que possuem um número alto de funcionalidades.
Isto é, essa é melhor estratégia quando falamos em melhorias relacionadas a performance de sistemas feitos em Angular.
Assim, com essas configurações, com certeza seu site terá maior acessibilidade e fidelização dos usuários, gerando um aumento significativo nos acessos.
