Otimizações Web
e seus truques

Sabia que apenas 100ms de melhora aumentam o FATURAMENTO da Amazon em 1%?

Transforme seu site em uma máquina de conversões e usuários felizes: OTIMIZE!

Formação Online

Na exclusiva plataforma online da Caelum

• Caelum a qualquer hora

  Tenha uma unidade da Caelum pra você: faça o curso a qualquer hora e em qualquer lugar.

• Metodologia reconhecida

  A mesma qualidade que faz da Caelum e seus instrutores referências em ensino há anos.

• Experiência única

  Aproveitamos nossa participação ativa em fóruns, blogs, listas e redes sociais para criar uma experiência online única. Confira!

• Aprenda sempre

  Você pode ver mais de uma explicação do mesmo assunto, com instrutores diferentes.

• Dúvidas são passageiras

  Suas dúvidas serão logo respondidas. Instrutores e alunos conversam e discutem a todo momento.

• Muita prática

  Diversos exercícios em um ambiente que estimula você a praticar e aprender de verdade.

• Ensino colaborativo

  Não só as aulas ensinam, mas todos que participam e trocam experiências.

• Você, destaque no mercado

  Aprenda as tecnologias que fazem diferença no mercado de trabalho e conquiste seu espaço.

• Certificado virtual

  Inclui certificado oficial Caelum online ao final do curso

Conteúdo do curso Inicial

1. Porque você deveria otimizar seu Site?

   1. Introdução
   2. O Mito da Banda Larga
   3. Casos famosos: Shopzilla, Bing, Mozilla
   4. O estudo da Caelum
   5. Estudos do Google, Yahoo
   6. Impactos em SEO, Adwords

2. Descubra seus gargalos de performance

   1. YSlow
   2. PageSpeed
   3. WebPageTest
   4. Google Analytics

3. Diminua o tamanho dos requests

   1. GZIP
   2. Minificação de JavaScript e CSS
   3. Compressão de HTML

4. Economize bytes com imagens

   1. Use tamanhos adequados
   2. Otimização de imagens sem perdas (lossless)
   3. Smush.it, pngout, pngcrush, jpegtran e outros

5. Diminua a quantidade de requests

   1. Junte arquivos JavaScript e CSS
   2. Configure headers de cache: Expires e Cache-Control
   3. Invalidação de cache com URL fingerprint
   4. Externalizar ou internalizar componente?

6. Image Sprites e seus truques

   1. Como criar sprites
   2. Automatizando o processo
   3. Cuidados com uso de memória
   4. Dicas e truques

7. Percepção de performance

   1. Como o usuário percebe a performance - casos de estudo
   2. Start Render Time
   3. Especifique o tamanho das imagens
   4. Porque CSS deve estar no head e JavaScript no fim
   5. Above the Fold Time (AFT)

Conteúdo do curso Avançado

1. Psicologia da performance

   1. Estudos famosos
   2. Design performático
   3. Minimalismo
   4. Truques sujos

2. Formatos das imagens

   1. JPEG: casos de uso e particularidades
   2. GIF só para animações
   3. Os tipos de PNG e quando usá-los
   4. O poder do PNG8
   5. Outros formatos: SVG, icon fonts, WEBP
   6. Otimizações lossy

3. Headers e otimizações

   1. Diminua headers e cookies
   2. Last-Modified e If-Modified-Since
   3. Etag e If-None-Match
   4. Data URIs

4. Lazy e carregamento assíncrono

   1. Adie o carregamento do que puder
   2. JavaScript assíncrono: HTML5, LABjs, HeadJS
   3. Otimização do onload
   4. Integração com widgets externos: Facebook, Twitter,...

5. Otimizando componentes externos

   1. Scripts do Facebook, Twitter e outros
   2. Single Point of Failure (SPOF)
   3. Simulação do SPOF
   4. Soluções e otimizações

6. Novidades do HTML5

   1. async
   2. AppCache e localStorage
   3. WebWorkers
   4. Truques de CSS3
   5. Ajax + History API

7. Outras ideias e dicas finais

   1. Nunca use: document.write, CSS expressions, @import
   2. Cuidado com 404s e redirects
   3. Minimize a latência da rede: DNS, SSL, CDNs
   4. Preload de componentes
   5. Código CSS eficiente
   6. Código JavaScript eficiente
   7. Mobile sites: outros truques