Como melhorar a performance em sites legados
Confira algumas dicas e estratégias que ajudarão no carregamento mais rápido
Em sites desenvolvidos mais recentemente já é possível ver a tecnologia de webpack o que nos facilita demais a vida, inclusive com várias ferramentas que nos ajudam na hora de colocarmos em produção.
Uma delas é o Webpack Bundle Analyzer que nos ajuda a identificar o quanto tal biblioteca que estamos usando está ocupando do nosso pacote. O que cabe nosso questionamento: será que precisamos importar ela inteira, existem outras alternativas, conseguimos importar somente parte dela?
De qualquer forma, nosso foco no artigo são em tecnologias um pouco mais antigas, onde ainda se usavam Grunt, Gulp, Bower, que necessitavam de um maior gerenciamento por parte do dev.
Para isso, o Bundlephobia nos ajuda tentando trazer informações parecidas com a do Webpack Bundle Analyzer, onde é possível informar o package.json facilitando listar toda sua biblioteca.
Estratégias que adotaremos
- Redução do peso do site (kb)
- Compactação de imagens
- Trabalhe melhor com as fonts
- Priorização de algumas bibliotecas JS no carregamento da página
- Despriorização de bibliotecas JS no carregamento da página
- Reduzir tempo de pesquisa de DNS
1) Redução do peso do site (kb)
Reduzir o tamanho de seu pacote de JS é muito importante. Isso afetará diretamente no tempo em que o browser levará para fazer download do arquivo JS.
O peso do JavaScript se diferencia de uma imagem por ter alguns passos depois do download que custam tempo no carregamento: análise, compilação e execução.
Ao fazer o Uglify no Gulp, método que compacta muito cada arquivo a ponto de não ficar legível a humanos, mas que já vi resultados de redução chegar perto de 70%!
Por isso existe essas verificações constantes de como se reduzir o tamanho do pacote, ou se realmente é necessário usar tal biblioteca.
2) Compactação de imagens
Imagens geradas por editores ou mesmo fotos de máquinas possui muitas informações dentro dela que consomem kb desnecessários (pensando em web).
Para compressões de imagens individuais, algumas ferramentas como Tinyjpg ou Squoosh ajudam para a remoção deste conteúdo sem ao menos perder qualidade. Ou, no caso de imagens ou ícones SVG, recomendo a ferramenta SvgOMG que faz uma compressão customizada fenomenal.
A versão Gulp disso sempre ajuda, no caso o ImageMin pode ser usado desta maneira:
3) Trabalhe melhor com as fonts
Existem dois tipos de fonts normalmente usadas em sites: uma para customização de textos e títulos e a outra usada como recurso para ícones.
Para títulos e textos:
Ao usar esta tag no <head> de seu template, em seu carregamento de página, o navegador fará 3 micro atividades trarão um bom ganho de performance deste recurso.
Falarei com mais detalhes cada forma de priorizar melhor o carregamento no próximo item.
Para ícones:
Neste caso, usar o preconnect como citado acima vai acabar ajudando um pouco, mas recomendo muito a substituição deste recurso por ícones em SVG, conforme explico neste artigo:
https://medium.com/@gilcrespo/usando-sprite-de-ícones-em-svg-802d857c9ab5
4) Priorização de algumas bibliotecas JS no carregamento da página
preload
- usado para quando precisa usar o recurso o mais rápido possível
- os tipos de recursos a ser usado para
style,script,fontefetch
prefetch
- ao contrário do preload, é usado para carregamento do recurso mais tardio, usado para prever navegação do usuário para próxima página e antecipar este carregamento de recurso.
- os tipos de recursos a ser usado para
style,script,fontefetch
5) Despriorização de bibliotecas JS no carregamento da página
O elemento script com async e defer fazem mais diferença quando eles não estão localizados no final do documento HTML.
Isso ocorre pelo fato de já estar no final da renderização e não ter muito o que bloquear no carregamento, durante sua execução.
Vale a pena prestar atenção pois tem muitas bibliotecas externas que não estão preparadas para ser executadas async e dependem de interação com o DOM. Neste caso, coloque seu carregamento antes do </body> caso tenha problemas.
6) Reduzir tempo de pesquisa de DNS
dns-prefetch
- resolve o DNS antes do usuário realmente precisar
preconnect
Além de fazer o que o dns-prefetch faz, é feito mais duas micro atividades:
- resolve o DNS antes do usuário realmente precisar
- antecipa estabelecimento de conexão com servidor
- adianta a negociação de privacidade entre as partes caso preciso
