Skip to main content

Front-end Performance

· 8 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

Introdução​

Este é um tema muito importante porque impacta diretamente em como uma aplicação é apresentada para o usuário. Caso esse tema seja negligenciado, por mais que o seu site ou aplicação tenha um bom objetivo, ele pode acabar sofrendo com lentidão e utilização de recursos desnecessários, impactando o usuário final, que pode desistir de continuar na aplicação. Imagine um e-commerce onde as páginas de visualização de produtos carregam lentamente; com certeza você desistiria de continuar na aplicação.

A otimização de aplicações web é algo fundamental que, muitas das vezes, é negligenciado. A melhora de performance visa velocidade, capacidade de resposta, fluidez, economia de recursos e muito mais. São várias estratégias para minimizar o tempo de carregamento de páginas e reduzir a resposta de servidores, tornando o sistema muito mais atraente para o usuário final.

Existem várias formas de trabalhar com este tema. Trago aqui neste artigo algumas chaves que são muito relevantes para tornar a sua aplicação mais eficiente, com utilização mais inteligente de recursos e trazendo todos os benefícios de velocidade e confiabilidade para o usuário final.

Por que a Performance é Importante?​

A otimização de performance impacta diretamente três aspectos cruciais de um sistema online:

  1. Conversões: Uma pesquisa realizada pela empresa Unbounce indica que 70% dos clientes consideram a velocidade da página um fator decisivo em suas decisões de compra. Cada vez mais, as pessoas estão impacientes e querem um conteúdo mais rápido.

  2. Visibilidade: Uma pesquisa realizada pela Backlinko demonstra que o algoritmo de PageRank do Google prioriza o desempenho do site em sua listagem. Para aparecer na primeira página, o site deve ter um tempo médio de carregamento de 1,65 segundos. Isso considera todo o carregamento da página inicial contendo assets, HTML, CSS e JavaScript. Conteúdo e ferramentas para isso são muito importantes.

  3. Experiência do Usuário (UX): Um site mais rápido e responsivo melhora significativamente a satisfação e a confiança do cliente.

Métricas Essenciais de Performance​

Para uma otimização efetiva, é crucial monitorar as seguintes métricas:

  • Tempo de Carregamento da Página: Duração total para carregar todos os elementos da aplicação;
  • Time to First Byte (TTFB): Tempo até o primeiro byte de dados ser recebido;
  • Time to Interactive (TTI): Momento em que a página se torna totalmente interativa;
  • First Contentful Paint (FCP): Tempo para renderizar o primeiro conteúdo;
  • Largest Contentful Paint (LCP): Tempo para renderizar o maior elemento visível;
  • Total Blocking Time (TBT): Tempo total em que a thread principal fica bloqueada;
  • Número de Requisições HTTP: Quantidade total de solicitações ao servidor.

Técnicas Fundamentais de Otimização​

Aqui listo algumas técnicas para tornar a aplicação mais eficiente, considerando a solução das métricas acima.

1. Gerenciamento eficiente de recursos​

Lazy Loading​

O Lazy Loading é uma técnica que permite o carregamento de partes que foram solicitadas de acordo com a interação do usuário, sem a necessidade de carregar todos os arquivos antes que estes sejam solicitados. Aplicações como React possuem recursos para atuar neste formato, melhorando consideravelmente o desempenho e a fluidez da aplicação.

  • Detecção de viewport com Intersection Observer API;
  • Priorização baseada em métricas de usuário;
  • Placeholders otimizados durante o carregamento;
  • Fallback gracioso para navegadores não suportados;
  • Carregamento de arquivos baseado em rotas.

Code Splitting​

Code splitting é a quebra do código em arquivos menores, melhorando o carregamento e evitando o bloqueio do download. Isso permite que a página seja carregada aos poucos, realizando o download de vários arquivos simultaneamente. A divisão de código deve seguir padrões específicos:

  • Route-based splitting para carregamento por rota;
  • Component-based splitting para elementos complexos;
  • Vendor splitting para otimização de cache de dependências;
  • Dynamic imports com prefetch para rotas prováveis.

2. Otimização de Assets​

Imagens​

A otimização de imagens possibilita o carregamento mais rápido e o uso de recursos da internet e da aplicação de forma mais eficiente. Grandes imagens são um problema para aplicações Web/Mobile e com simples alterações podemos ter grandes benefícios. Sempre considere o tratamento de imagens, seja para exibição na aplicação quanto para upload e armazenamento. É necessário também muito cuidado para a imagem não ficar distorcida ou ilegível. Qualidade e velocidade precisam caminhar juntas. Pontos relevantes para otimização de imagens:

  • Formato adaptativo: WebP com fallback para formatos tradicionais;
  • Art direction com picture element;
  • Densidade de pixels apropriada com srcset e sizes;
  • Compressão inteligente baseada em conteúdo visual;
  • CDN com otimização automática e cache.

Minificação​

Estratégias para redução de tamanho de arquivos:

  • Tree shaking para remover código que não é utilizado;
  • Compressão diferencial com Brotli ou outras ferramentas para este fim, como gzip;
  • Análise de dependências e arquivos duplicados;
  • Source maps otimizados para ambiente de produção;
  • Estratégia para tornar o arquivo menor e mais eficiente para o browser.

3. Otimização de renderização de conteúdo​

Critical Path Optimization​

Otimização do caminho crítico de renderização:

  • Identificação e priorização de CSS;
  • Estratégias de carregamento assíncrono para recursos não-críticos/essenciais;
  • Preconnect para domínios externos importantes;
  • Resource hints (preload, prefetch, preconnect).

Prevenção de bloqueio de renderização​

Existem vários formatos para evitar o bloqueio de renderização devido ao tamanho de arquivos, fetch em APIs e outros fatores:

  • JavaScript assíncrono com priorização;
  • Web fonts com font-display: swap;
  • Carregamento progressivo de componentes;
  • Fallback para manter o usuário aguardando;
  • Requisições em paralelo.

4. Performance em tempo de execução​

Otimização do DOM​

Algumas estratégias para otimizar o DOM podem obter ganhos significativos na aplicação:

  • Virtualização para listas longas (imaginar renderizar 300 itens em um li, o sistema pode simplesmente travar);
  • Event delegation para melhor gestão de eventos;
  • Debouncing e throttling de eventos frequentes;
  • Reciclagem de elementos para animações suaves.

Gerenciamento de estado e memória​

Práticas para aplicações escaláveis:

  • Normalização de estado para evitar duplicação;
  • Memoização inteligente de componentes e cálculos;
  • Garbage collection otimizado;
  • Monitoramento de memory leaks.

5. Infraestrutura e entrega​

HTTP/2 e HTTP/3​

Aproveitamento máximo dos protocolos modernos:

  • Server push estratégico;
  • Multiplexing otimizado;
  • Priorização de streams;
  • QUIC para conexões mais rápidas.

CDN e Edge Computing​

Esse aqui é um ponto muito importante e pouco explorado. Muitas aplicações simplesmente mal fazem o uso desse recurso com eficiência:

  • Multi-CDN para redundância e performance;
  • Edge caching com invalidação seletiva;
  • Edge functions para processamento próximo ao usuário;
  • Otimização geográfica de rotas.

Monitoramento e análise​

Métricas essenciais​

Acompanhamento contínuo de:

  • Core Web Vitals (LCP, FID, CLS);
  • Time to Interactive (TTI);
  • First Contentful Paint (FCP);
  • Time to First Byte (TTFB).

Ferramentas de análise​

Conjunto de ferramentas recomendadas:

  • Lighthouse: Integrado ao Chrome, permite registrar e analisar o desempenho de carregamento e tempo de execução da página, fornecendo insights detalhados sobre o comportamento do site.
  • WebPageTest: Ferramenta de código aberto para medir e analisar o desempenho de páginas da web em dispositivos reais. Permite escolher diferentes locais e navegadores para testes abrangentes.
  • Real User Monitoring (RUM): Abordagem para capturar métricas de desempenho a partir das interações reais dos usuários com seu site, fornecendo dados precisos sobre a experiência do usuário.

Considerações Finais​

Este é um tema muito importante e também difícil de ser aplicado. Criar aplicações web não é uma tarefa complexa; várias pessoas iniciantes conseguem e estão criando seus próprios sistemas. Agora, criar um sistema bem feito e que de fato escale é o grande desafio aqui.

A otimização de performance é um processo contínuo que requer atenção constante e adaptação às novas tecnologias e padrões web. Para cada biblioteca/framework, podem existir outros formatos que ajudam neste tema, como é o caso de Hooks e exploração de SSR e Lazy Loading com React.

O sucesso na implementação dessas técnicas depende de vários fatores, como citado aqui. Existem muitos outros, mas vale a pena um resumo dos principais:

  • Monitoramento consistente
  • Testes frequentes em diferentes dispositivos e condições de rede
  • Análise de métricas reais de usuários
  • Atualização constante com as melhores práticas do mercado

Espero que este material ajude a ter uma ideia inicial do quão rico e importante é este tema. Existem várias outras técnicas e possibilidades para melhorar o desempenho de uma aplicação, sempre pensando nas necessidades do usuário, do projeto e no fim para o qual ele foi criado.

tip

Caso tenha interesse em um tema de performance e otimização específico para React, eu preparei um capítulo exclusivo sobre este tema no meu livro

https://www.tautorn.com.br/react-beyond

Referências:​