Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Curso Performance Web I: otimizando o front-end

Nota

9.5

Nível

Intermediário

Última atualização

27/10/2017

Carga horária

20h

Iniciar Curso
Concluir

Pré-requisitos:

Carreiras com esse curso:

Instrutor

  • instructor Sérgio Lopes

    Reconhecido profissional front-end e mobile. Tem transtorno obsessivo por velocidade de carregamento de páginas.

Veja as últimas novidades do curso Veja as perguntas frequentes Fórum do curso

Conteúdo detalhado:

  1. Introdução

    1. Performance Front-end vs Back-end
    2. O projeto do Alura
  2. Economizando bytes

    1. Minificação
    2. Frameworks minificados
    3. Impacto no DevTools
    4. Uglifyjs e gulp
  3. GZIP

    1. Como a compressão funciona
    2. Habilitando no nginx
  4. Otimizações de Imagens

    1. O peso das imagens
    2. Compressão lossless
    3. Compressão lossy
    4. Ferramentas online
    5. Linha de comando: jpegtran, pngcrush, svgo
    6. Gulp imagemin
  5. O custo dos requests

    1. Análise de waterfall no DevTools
    2. Deploy no Google App Engine
    3. Uso do WebPageTest
    4. Análise de requests e connections
  6. Concatenações & Trade-offs

    1. Porque concatenar CSS e JS
    2. Trade-offs de cache e atualização
    3. Como automatizar com useref
  1. Sprites

    1. O que são sprites CSS
    2. Criação de sprite PNG com imagemagick
    3. Plugins como sprity
    4. Sprites SVG com symbol
    5. svg-sprite
  2. Inline de recursos

    1. Embutir CSS e JS
    2. Embutir imagens SVG
    3. Trade-offs do inline
    4. Janela inicial TCP
    5. Inline com gulp
  3. Paralelizando requests

    1. Limite de requests por hostname
    2. Uso de hostnames paralelos
  4. Cache HTTP

    1. Request bom é request não feito
    2. Expires e Cache-Control
    3. Análise dos requests cacheados
    4. Configuração no nginx e App Engine
    5. Fingerprint de URLs
    6. gulp-rev
  5. Conclusão

    1. Análise final das melhorias
    2. Performance é UX
    3. Estudos de impactos de performance na conversão
    4. Casos de performance e usabilidade