Perfomance: do browser ao server.
Por que performance não é uma feature?
46% dos consumidores declaram que o que eles menos gostam ao navegar na Internet móvel é esperar que as páginas carreguem.¹
53% das visitas a sites no mobile são abandonadas quando uma página leva mais de três segundos para carregar.²
Esses segundos salvos podem se transformar em receita para empresa em que você trabalha, gerando mais conversões e vendas.
A Zitmaxx Wonen reduziu seu tempo de load para 3s e fez com que sua conversão aumentasse em 50% e sua receita inclusive aumentou para 98%.³
Resumindo, a performance potencializa o negócio da sua empresa, quanto mais seu site for rápido e quanto menos fricção ele causar (é necessário uma boa ux também), maior será a conversão e receita.
Como melhorar a performance no browser?
1. Armazene dados estáticos no cache da sua aplicação
Para armazenar cache dos seus assets no browser você deve utilizar Service Workers e a Cache API.
Service Workers é um script que vai funcionar em paralelo com sua aplicação e ela possibilita que você intercepte as requisições da sua aplicação.
Cache API faz parte da spec do Service Workers e possibilita que você possa adicionar assets, páginas e respostas do seu backend.
2. Carregue apenas o necessário para aquela página
Code Splitting possibilita você dividir seu código em vários bundles em que você pode decidir se isso será carregado paralelamente ou apenas quando deseja.
Com Code Splitting, você pode fazer Lazy Load das rotas da sua aplicação.
3. Minifique os arquivos da sua aplicação
O Webpack/Parcel/Rollup possui plugins responsáveis por minificar os arquivos JS da sua aplicação.
4. Otimize as imagens da sua aplicação
Faça Lazy Loading das imagens que não precisar na seção principal da página.
Como melhorar a performance no server?
1. Ative a compactação de recursos estáticos
Ativando o GZIP no seu servidor, você envia arquivos compactados reduzindo o tempo de download e preservando os tamanho de dados gasto pelo usuário.
Se possível utilizem os algoritmos de compactação Brotli e Zopfli para uma maior poder de compressão.
2. Adicione cache em recursos estáticos
Adicione expiração em seus arquivos JS, CSS e IMGs de 1 ano e o valor immutable no header cache-control.
NO CACHE HTML!
3. Se possível, habilite HTTP/2 em seu server.
O HTTP/2 permite a multiplexação, isso significa que as requisições possam ser servidas em paralelos diferente do 1.1 em que é necessário esperar a anterior finalizar.
Como testar a performance do website?
Webhint
Lighthouse
As duas ferramentas acima oferecem insights e métricas sobre a performance do seu site, além de mostrar erros e boas práticas.
Perguntas?
OBRIGADO!
@lucasktrindade
Referências
Referências
Perfomance: do browser ao server
By Lucas Trindade
Perfomance: do browser ao server
Palestra sobre otimizações pra serem feitas no browser e no server para aplicações web
