Desmistificando Aplicações WEB: Reduzindo em 74% o tempo de carregamento do Site do PAN .
As 5 principais técnicas de melhoria de performance WEB que usamos para reduzir em 74% o tempo de carregamento do nosso Site.
O Site do Banco PAN é a porta de entrada para novos clientes. É a primeira fonte de informações que esses possíveis novos clientes vão acessar para saber mais sobre um produto. Hoje é possível iniciar através do Site um fluxo de auto contratação de empréstimo consignado, uma simulação de financiamento de veículos, estimular um desejo de abertura de conta digital, entre outros.
Sabemos que os investimentos em mídias são altos e que uma das principais métricas do time de negócio é o CAC (Custo de Aquisição por Cliente). Ou seja, quanto menor o custo, melhor. E como podemos estrategicamente apoiar na redução do CAC? Aumentando o número de acessos orgânicos.
Quais os desafios do Site do PAN?
Para aumentar os acessos orgânicos, um site precisa ser, tecnicamente falando, performático. É importante dizer que o Google usa também como critério de ranking a velocidade de carregamento de um site. Sendo assim, quanto mais rápido, mais chances terá de estar melhor posicionado e de ter mais acessos orgânicos.
Acessos orgânicos são acessos que são “naturais”, pois não precisam ser estimulados por nenhum tipo de mídia paga. Quando pesquisamos por algum termo relevante ao assunto que estamos buscando, como “empréstimo consignado”, as primeiras posições no ranking geralmente vão ter o maior número de acessos orgânicos.
Por que performance é importante para o PAN?
Da ótica do negócio, cada acesso é um possível novo lead, uma possível nova conversão. Cada nova conversão pode gerar um novo negócio fechado. Então, como performance pode ajudar a fechar um negócio?
- 25% dos usuários esperam que um site carregue em menos de 4 segundos;
- 46% dos usuários não revisitam sites que não são performáticos;
- 16% dos usuários têm sua satisfação na experiência reduzida se o site tiver 1 segundo de delay;
Performance converte!
referência
https://www.websitebuilderexpert.com/building-websites/website-load-time-statistics/
Cenário do Site do PAN antes da evolução de performance
O cenário do Site do PAN não era favorável para os objetivos de apoiar no crescimento do PAN e na relevância da marca que tínhamos que atingir ao final de 2021:
- 7 segundos era a velocidade de carregamento média;
- 0.15 era o APDEX (métrica de satisfação com a experiência);
Para alcançar esses objetivos, algumas abordagens técnicas foram usadas, sabendo que performance era um fator chave para mudar esse jogo.
Abaixo, vamos listar 5 técnicas que escolhemos investir para melhorar a performance do nosso Site.
A escolha da abordagem técnica
Existem no mercado diversas ferramentas, pagas e gratuitas, que apoiam no direcionamento do que deve ser priorizado para melhorar a performance de um site. Essas ferramentas são principalmente Google Lighthouse, GTmetrix, WebPage Test e Speed Curve.
No nosso cenário, escolhemos usar o Google Lighthouse por ser uma ferramenta gratuita e nativa do Chrome. 66% dos usuários de sites do mundo usam o Google Chrome e 76% dos usuários do Site do PAN estão nesse universo. Ao gerar um relatório do Lighthouse, escolhemos os 5 principais apontamentos como possíveis melhorias:
- Uso do protocolo HTTP2
O protocolo HTTP2 é usado para servir os recursos do seu site com mais rapidez e com um menor uso de recursos de rede. Um dos grandes objetivos do protocolo é diminuir a latência, habilitando o uso da multiplexação de requests e responses. Além disso, possui compressão dos headers e priorização de requests.
referência
https://web.dev/performance-http2/
2. Minificar e comprimir arquivos estáticos
Comprimir arquivos estáticos com o uso da compressão gzip e minificar esses arquivos minimiza o uso de recursos de rede. A minificação é o processo de remover os espaços em branco e qualquer código que não seja necessário, criando assim um recurso menor e que vai consumir menos recurso de rede.
referência
https://web.dev/minify-css/
https://web.dev/unminified-javascript/
https://web.dev/reduce-network-payloads-using-text-compression/
3. Servir imagens em formatos mais modernos
WebP é um formato de arquivo que tem características superiores de compressão e qualidade. Ou seja, servir imagens nesse formato quer dizer que elas carregarão de forma mais rápida e consumirão menos recursos de rede, principalmente se seu público for majoritariamente usuário de dispositivos móveis.
referência
https://web.dev/serve-images-webp/
4. Conectar antecipadamente com origens de terceiros
O uso de pré-conexões, principalmente com aqueles scripts de terceiros que normalmente são grandes infratores na performance de um site, faz com que o browser entenda que aquela conexão é importante e deve acontecer o quanto antes. Isso torna o carregamento do site muito mais rápido para o usuário.
referência
https://web.dev/preconnect-and-dns-prefetch/
5. Requisições por demanda
O uso de requisições por demanda faz com que recursos só sejam carregados caso o usuário interaja com aquele recurso ou o recurso se torne visível na tela. É uma excelente estratégia para páginas que são extensas e que possuem diversos recursos no percorrer dessa página, como imagens, vídeos e scripts condicionais.
Já se perguntou por que você precisa carregar uma imagem que está no rodapé da sua página se o seu cliente nem se “rolou a página” até lá?
referência
https://web.dev/offscreen-images
O que observamos de resultados?
Lembram do cenário que apresentamos no começo sobre como estávamos em velocidade de carregamento e satisfação com a experiência?
Atualmente o cenário mudou para melhor, e após implementar todas essas melhorias citadas e algumas outras podemos observar:
- 1.5 segundos de velocidade de carregamento média;
- 0.95 de APDEX (métrica de satisfação com a experiência);
- 34% de aumento no número de visitantes únicos;
- 217% de aumento no número de leads gerados;
Qual conclusão obtivemos?
Investir em performance do nosso Site foi uma escolha importante para a estratégia da empresa, que trouxe diversos benefícios não só de tecnologia mas também de negócio. Foi possível observar redução no tempo de carregamento, melhoria na experiência do usuário, aumento do número de acessos orgânicos, aumento na captação de leads, aumento na taxa de conversão e redução do CAC.
Então lembrem-se, PERFORMANCE CONVERTE!
