Vários estudos mostram que a performance final para o usuário, que ele percebe ao abrir o navegador desktop ou no 3G do mobile depende mais do frontend do que do backend.
Um site rápido leva no máximo 1s para carregar, um site mediano leva entre 1 e 2.5s para carregar e um site lento leva mais de 2.5s para carregar.
Em coverage conseguimos ver todo o css e javascript que não estão sendo utilizados em vermelho.
A performance é calculada a partir de 6 métricas. Cada métrica captura algum aspecto relacionado a velocidade de carregamento. O ideal é foquemos em uma metrica especifica por vez.
Menssura quanto tempo o browser leva para carregar a primeira peça do DOM. O tempo idela para essa métrica é de 1.2s. Para melhorar essa métrica, temos que trabalhar para carregar menos css, javascript e arquivos estáticos como imagens, icones e videos, permitir que o backend retorne apenas os dados necessários.
Dispositivos mobile possuem um limite de CPU e memória. 60% da conexão desses dispositivos ao redor do mundo é 2G.
Uma das métricas de performance é o time to interactive, que representa quando os usuários podem de fato interagir com a página e obter uma resposta. Uma long task pode contribuir para um tempo maior a partir do momento que ela "congela" a UI, impedindo com que os usuários possam interagir com ela. Esse processo não deve levar mais que 50ms pois consomem muita CPU. O que podemos fazer é trabalhar para carregar os recursos nos momentos necessários.
-
Diminua a quantidade de cookies e requests da página.
-
Faça o cache de arquivos estáticos.
-
Adie o carregamento do não for necessário para o primeiro carregamento da página e faça de forma assincrona.
-
Diminua o trafego de dados diminuindo o payload do servidor.
-
Habilite o GZIP no servidor para comprimir arquivos html, css e js.
