Performance Web I: otimizando o front-end

Conteúdo Detalhado

1. Introdução

   • Performance Front-end vs Back-end
   • O projeto do Alura

2. Economizando bytes

   • Minificação
   • Frameworks minificados
   • Impacto no DevTools
   • Uglifyjs e gulp

3. GZIP

   • Como a compressão funciona
   • Habilitando no nginx

4. Otimizações de Imagens

   • O peso das imagens
   • Compressão lossless
   • Compressão lossy
   • Ferramentas online
   • Linha de comando: jpegtran, pngcrush, svgo
   • Gulp imagemin

5. O custo dos requests

   • Análise de waterfall no DevTools
   • Deploy no Google App Engine
   • Uso do WebPageTest
   • Análise de requests e connections

6. Concatenações & Trade-offs

   • Porque concatenar CSS e JS
   • Trade-offs de cache e atualização
   • Como automatizar com useref

7. Sprites

   • O que são sprites CSS
   • Criação de sprite PNG com imagemagick
   • Plugins como sprity
   • Sprites SVG com symbol
   • svg-sprite

8. Inline de recursos

   • Embutir CSS e JS
   • Embutir imagens SVG
   • Trade-offs do inline
   • Janela inicial TCP
   • Inline com gulp

9. Paralelizando requests

   • Limite de requests por hostname
   • Uso de hostnames paralelos

10. Cache HTTP

    • Request bom é request não feito
    • Expires e Cache-Control
    • Análise dos requests cacheados
    • Configuração no nginx e App Engine
    • Fingerprint de URLs
    • gulp-rev

11. Conclusão

    • Análise final das melhorias
    • Performance é UX
    • Estudos de impactos de performance na conversão
    • Casos de performance e usabilidade