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.

Figura 1 – Estrutura criada pela linha de 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.

Figura 2 – Lazy loading aplicado na 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-rotaQuantidade de
componentes
Listagem/funcionalidade/listagem2
Criar/funcionalidade/criar2
Editar/funcionalidade/editar2
Visualizar/funcionalidade/visualizar2
Tabela 1 – Rotas e componentes da funcionalidade

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.

Figura 3 – Gráfico de tendência do tamanho do bundle principal da aplicação web conforme o incremento de funcionalidade.
Figura 4 – Gráfico de tendência do tempo da 1ª renderização da aplicação web conforme o incremento de funcionalidade.

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.