O documento fornece 5 dicas para melhorar o desempenho de aplicações web, começando com separar componentes em subdomínios distintos para carregamento paralelo, carregamento tardio de scripts JavaScript para evitar bloqueios, manter conexões HTTP abertas com keep-alive, abusar de cabeçalhos de expiração para cache e uso de CDNs para distribuição de conteúdo.

1. @spwebperf
5 Dicas simples (ou nem tanto)
de performance para
aplicações Web

2. Cleber Dantas
• 8+ anos de experiência na área de TI
• Especialista em desenvolvimento Web
• Responsável pela área técnica do grupo Minha
Vida
• Ministro treinamentos sobre desenvolvimento
Web
• Dou algumas palestras em eventos de tecnologia
• @cleberdantas
• http://www.cleberdantas.com

3. Front-End
• Steve Sounders – “80% dos problemas de
performance de aplicações Web estão no Front-
end”

4. 1ª dica: Separe componentes em subdomínios distintos
• Motivos
– Carregamento de componentes em paralelo
– Fácil gerenciamento de canal de entrega do conteúdo
– Cookie-free domains
(http://www.cleberdantas.com/2011/11/cuidado-
com-os-cookies-cookie-free-domains/)

5. 2ª dica: Carregamento tardio/assíncrono de js
• Motivos
– Renderização bloqueada pelo browser
– Se não vai usar imediatamente o script para que
baixa-lo? ora pois...
• Ferramentas
– Labjs (http://labjs.com/)
– ControlJS (http://stevesouders.com/controljs/)

6. 3ª dica: Keep-alive sempre ligado
• Motivos
– Para cada requisição HTTP uma conexão TCP precisa
ser estabelecida
– Three-way handshake a todo momento é
desnecessário

7. 3ª dica: Keep-alive sempre ligado
Visão das requisições HTTP
Visão das conexões TCP

8. 4ª dica: Abuse dos cabeçalhos de expiração de conteúdo
• Motivos
– Cacher é bom  truste me
– Visualizações futuras bem mais rápidas (afinal não é
preciso buscar componentes ainda “frescos”)
– Na dúvida cachear tudo (e ter um bom esquema pra
forçar a atualização caso necessário)
• Expires ou Cache-Control?
– Os dois  (só pra garantir), mas entenda a diferença.

9. 5ª dica: Use uma CDN (Ou construa a sua... E me avise)
• Content Delivery Network
– Rede de distribuição de conteúdo
– Infraestrutura para ENTREGA do conteúdo
• Própria
• Terceirizada (Akamai, Ananke, UOL, etc)
• Pública (Microsoft, Google, etc)
– Distribuição de bibliotecas públicas (exemplo jQuery)
» http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js
• http://www.cleberdantas.com/2011/11/content-
delivery-network-cdn-voce-ainda-vai-usar-uma/

10. 5ª dica: Use uma CDN (Ou construa a sua... E me avise)
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js

11. Links
• http://www.meetup.com/Sao-Paulo-Web-
Performance-Group
• @spwebperf
• http://tecnologia.minhavida.com.br
• http://br.linkedin.com/company/minha-vida
• http://www.cleberdantas.com

12. Obrigado. Perguntas?