Performance em aplicações WebAlexandre TarifaCleber DantasDieta e Saúde e Minha Vida

Cleber Dantas• Atua há 8 anos no mercado de TI• Especialista em desenvolvimento Web• MCAD e MCTS• Entusiasta Agile• @cleberdantas• http://www.cleberdantas.com

Alexandre Tarifa

• @alexandretarifa• http://www.alexandretarifa.com.br

Minha Vida

Dieta e Saúde

Consulte.me

100 funcionários

25 da área de tecnologia

11 milhões de usuários/mês

65 milhões pageviews/mês

15 TB distribuídos/mês(js, css, html, images, vídeos)

Front-End• Steve Sounders – “80% dos problemas de

performance de aplicações Web estão no Front-end”

• YSlow – Extensão do Firefox para análise de performance nas páginas – baseado nas 14 regras do livro High Performance Web Sites (existem outros templates)

Dicas

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: Carregamentotardio/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– Anatomia de uma requisição HTTP

(http://www.cleberdantas.com/2011/12/anatomia-de-uma-requisicao-http/)

3ª dica: Keep-alive sempre ligadoVisã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)

• 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

6ª dica: Delivery - NGINX• Proxy Reverso• Utilizamos para entrega de imagens (muito

performático)• http://nginx.org/

7ª dica: Cache• A melhor solução de performance é fazer

com que o seu código não seja executado o tempo todo!

• Tipos de Cache• Cliente – Headers de expiração (Expires e Cache-Control)• Servidor – OutputCache (ASP.NET) e Cache de Objetos (ASP.NET ou

memCached)

Dúvidas?!

@alexandretarifa@cleberdantas

OBRIGADO!

@alexandretarifa@cleberdantas