@spwebperf5 Dicas simples (ou nem tanto)

de performance para aplicações Web

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

Front-End

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

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/)

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/)

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

3ª dica: Keep-alive sempre ligado

Visão das requisições HTTP

Visão das conexões TCP

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.

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/

5ª dica: Use uma CDN (Ou construa a sua... E me avise)

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js

Seu site

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

Obrigado. Perguntas?