Otimização carregamento

cache.md

Adicionar uma Etag no cabeçalho da requisição

Assim o próprio navegador do usuário salva os dados da requisição em cache, com um certo tempo de vida

max-age=86400,       // Tempo de vida do cache, em segundos. No máximo 1 dia
// ou
private, max-age=600 // Até 10 minutos
// ou
no-store             // A resposta não pode ser salva em cache

Uma vez que alterei um arquivo que estava em cache no navegador e subi, como fazer o navegador do usuário utilizá-lo?

• É impossível.
• Só posso se eu alterar o nome do arquivo e importá-lo no HTML

Mais info

start.md

Como otimizar?

1. No HTML, fazer o mínimo possível de requisições para coletar os dados

   1. Minificar e concatenar o css e javascript, deixando apenas 1 arquivo de cada
      • Gulp
      • Webpack (Compila todo o css e assets em 1 arquivo .js)

2. Deixar o mínimo possível no javascript

• O javascript é o que mais demora para carregar, pois é preciso fazer uma parse/compile (analisar e compilar) no código
• O tanto que der para diminuir o javascript, melhor
• Cerca de 50% dos sites demoram 14 segundos para se tornarem interativos num celular comum, 25% demora 22 segundos e 10% demoram 35 segundos estatísticas aqui

Existem padrões para como carregar a página

Bootstrap progressivo:

1. Carregar apenas o js necessários para fazer o site funcionar
2. Depois de carregar o necessário, o código recebe 'upgrades', liberando o restante dos recursos

PRPL

1. Carrega o js necessário para rota inicial e salva em cache
2. Quando o usuário vai para outra página, carrega o js dela e também salva em cache (e por aí vai)

Dicas básicas

1. Carregar apenas o código necessário
   • Exemplo
2. Comprimir os arquivos
   • Um uglify já faz o trabalho
3. Remover código não utilizado
   • babel-preset-env para utilizar recursos que já existem no browser
   • Utilizando plugins para importar apenas o necessário de alguma biblioteca. Para o Moment mesmo, posso utilizar o Moment locales para webpack
   • Mais plugins