Aumente a performance de seu site de maneira disciplinada

436 visualizações

Publicada em

Palestra sobre performance e web, efetuada no coalti em Maceió. Dia 28/10/2011

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
436
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aumente a performance de seu site de maneira disciplinada

  1. 1. Aumente a performance de seu site de maneira disciplinada
  2. 2. Henrique Lima <ul><ul><li>10 anos de experiência com desenvolvimento </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Cetelem (financeira francesa) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>TIM (Telecom) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>SaveMe (Agregador de compras coletivas) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>MoIP (Facilitador de Pagamentos) </li></ul></ul>
  3. 3. Contatos <ul><li>[email_address] </li></ul><ul><li>  </li></ul><ul><li>http://www.facebook.com/hgflima </li></ul><ul><li>  </li></ul><ul><li>@henrique_lim4 </li></ul><ul><li>  </li></ul>
  4. 4. Porque aumentar a performance do meu site? <ul><li>&quot;People do not like to wait.  </li></ul><ul><li>Do not make them.&quot; </li></ul>1 Marissa Mayer, Vice-presidente do Google
  5. 5. Porque aumentar a performance do meu site? <ul><li>Aumentar a conversão </li></ul>2
  6. 6. Pesquisas e Números
  7. 7. Pesquisas e números <ul><li>&quot;Em 2006, compradores on-line esperavam que uma página web carregasse em até 4 segundos. Hoje, esse mesmo cliente espera que esta página carregue em 2 segundos ou menos.&quot; </li></ul>fonte: Forrester Consulting Os consumidores estão mais exigentes
  8. 8. Pesquisas e números <ul><li>&quot;Carregamento rápido de uma página web é a segunda coisa mais importante para o cliente, perdendo apenas para a segurança&quot; </li></ul>fonte: Web Performance Today Os consumidores querem velocidade
  9. 9. Pesquisas e números <ul><li>E-commerce no Brasil </li></ul>&quot;... cada segundo gasto na abertura de uma página pode representar 5% a menos de conversão&quot; Igor Senra, CEO do MoIP
  10. 10. Pesquisas e números <ul><li>Amazon </li></ul>&quot;Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance&quot; fonte: Amazon
  11. 11. Pesquisas e números <ul><li>Google </li></ul>&quot;O Google aumentou o número de resultados de suas pesquisas de 10 (a 0.4s) para 30 (a 0.9s), o trafégo caiu 20%&quot; Marissa Mayer, VP do Google
  12. 12. Oportunidade
  13. 13. Salvador da Pátria
  14. 14. O Pica das Galáxias
  15. 15. Dinheiro!!!!!!!!!!
  16. 16. Apache HTTP Server <ul><ul><li>Web server mais utilizado no mundo </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Usado por 60% dos sites no mundo </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Suporte a todos os Sistemas Operacionais </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Estável </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Centenas de módulos disponíveis </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Open Source </li></ul></ul>
  17. 17. Apache HTTP Server <ul><li>O que Você TEM que saber sobre o apache </li></ul><ul><li>  </li></ul><ul><ul><li>Memória é: </li></ul></ul><ul><ul><li>O recurso mais importante </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Quem determina a capacidade de atender mais ou menos requisições simultaneamente </li></ul></ul><ul><ul><li>CPU, disco e placa de rede </li></ul></ul>
  18. 18. Apache HTTP Server <ul><ul><li>A configuração correta pode fazer diferença na(o): </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Performance </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Escalabilidade </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Consumo de memória </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Consumo de CPU </li></ul></ul></ul>
  19. 19. Problema <ul><ul><li>Como faço para mensurar quantos processos eu consigo manipular simultaneamente? </li></ul></ul>
  20. 20. Configuração - Prefork <ul><li>No arquivo httpd.conf </li></ul><ul><li>  </li></ul><ul><li><IfModule prefork.c>     StartServers                  10     MinSpareServers          10 </li></ul><ul><li>    MaxSpareServers         25     ServerLimit                   350      MaxClients                   350 </li></ul><ul><li>    MaxRequestsPerChild  5 </li></ul><ul><li></IfModule> </li></ul>
  21. 21. Configuração - Prefork (Dica) <ul><li>MaxClients (esse é o segredo!) </li></ul><ul><ul><li>Identifique o tamanho médio dos seus processos apache, Por exemplo: 7800 kb </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Identifique o tanto de memória RAM disponível sem o apache rodando(deixe uns 20% sobrando), Por exemplo: 2GB (2097152 kb) </li></ul></ul>2097152 / 7800 = 268 processos
  22. 22. Caso não seja suficiente <ul><ul><li>Aumente a memória e calcule novamente </li></ul></ul><ul><ul><li>Adicione uma outra máquina e faça load balance (mais complexo) </li></ul></ul>
  23. 23. Aspectos básicos de um browser
  24. 24. Cada arquivo é uma requisição <ul><li><html>     <head>         <script type=&quot;text/javascript&quot; src=&quot;meu.js&quot;>         <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;meu.css&quot;>     </head>     <body>         <img src=&quot;img.jpg&quot;> </li></ul><ul><li>    </body> </html> </li></ul>
  25. 25. Isso significa que ... <ul><ul><li>80 a 90% do tempo de carregamento de uma página é destinado ao download de arquivos (2007, Steve Sonders) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Um servidor que suporta 350 conexões </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Servindo uma página com 50 arquivos  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Suporta no máximo 7 acessos simultâneos* </li></ul></ul>
  26. 26. Download concorrente de arquivos <ul><li>Quantos arquivos um browser efetua download simultaneamente em um mesmo host? </li></ul><ul><li>  </li></ul><ul><ul><li>IE6 - 2 a 6 arquivos  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Opera - de 6 a 8 arquivos </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Firefox 6 - de 6 a 14 arquivos </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Chrome 14 - de 6 a 14 arquivos </li></ul></ul>fonte: browserscope
  27. 27. isso significa que ... <ul><ul><li>Podem existir &quot;poucas&quot; threads para carregar os arquivos </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Arquivos muito grandes, ocupam threads que poderiam estar carregando outros arquivos </li></ul></ul><ul><li>  </li></ul>
  28. 28. Tamanho é documento <ul><ul><li>Boa parte dos arquivos são texto </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Espaço em branco também é byte </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Imagens podem diminuir de tamanho  </li></ul></ul>
  29. 29. Solução <ul><ul><li>Reduzir o número de requests </li></ul></ul><ul><ul><li>Diminuir o tamanho dos arquivos </li></ul></ul><ul><li>  </li></ul><ul><ul><li>  Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo baixados ao mesmo tempo) </li></ul></ul><ul><li>  </li></ul>
  30. 30. Reduza o número de requests
  31. 31. Header Fields Protocolo HTTP 1.1
  32. 32. Requisição Browser x Servidor GET /logo.png HTTP/1.1 Header Fields Accept-Encoding: gzip Accept-Language: de,en …
  33. 33. Resposta Servidor x Browser Header Fields Content-Length: 4882 Content-Encoding: gzip … Status: HTTP/1.1 200 OK
  34. 34. Habilite o Header Field &quot;Expires&quot; <ul><ul><li>Expires: Wed, 26 Oct 2011 22:13:20 GMT </li></ul></ul><ul><ul><li>Indica a data de expiração desse arquivo no browser </li></ul></ul><ul><ul><li>Quanto tempo o browser irá ficar sem perguntar por este arquivo ao servidor </li></ul></ul><ul><ul><li>Somente em arquivos estáticos </li></ul></ul><ul><ul><li>Mínimo 1 mês </li></ul></ul><ul><ul><li>Máximo 1 ano </li></ul></ul>
  35. 35. Habilite o Header Field &quot;Expires&quot; <ul><li>No Arquivo httpd.conf </li></ul><ul><li>  </li></ul><ul><li>Certifique-se de ter carregado o mod_expires </li></ul><ul><li>  </li></ul><ul><li>LoadModule expires_module modules/mod_expires.so </li></ul><ul><li>Habilite o Expires </li></ul><ul><li>ExpiresActive On ExpiresByType image/gif A2592000 </li></ul>A - A partir do primeiro acesso 2592000 - Cachear este arquivo por um mês (em segundos)
  36. 36. Habilite o Header Field &quot;Expires&quot; <ul><ul><li>Para testar </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Entre no site www.web-sniffer.net </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Preencha o campo url com o endereço de uma imagem em seu servidor   </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>No resultado, HTTP Response Header deve aparecer algo parecido com: </li></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>Expires: Wed, 26 Oct 2011 22:13:20 GMT
  37. 37. Utilize CSS Sprites <ul><ul><li>Um mapeador de imagem via CSS </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Todas as imagens em um arquivo só (ou quase) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Exemplo com SpriteMe </li></ul></ul>
  38. 38. Diminua o tamanho dos arquivos
  39. 39. Habilite GZip <ul><ul><li>Para que serve </li></ul></ul><ul><li>  </li></ul><ul><li>Trafegar dados compactados usando como filtro o content-type </li></ul>
  40. 40. Habilite GZip <ul><li>No arquivo httpd.conf </li></ul><ul><li>  </li></ul><ul><li>Certifique-se de ter carregado o mod_deflate </li></ul><ul><li>  </li></ul><ul><li>LoadModule deflate_module modules/mod_deflate.so </li></ul><ul><li>  </li></ul><ul><li>Habilite o GZip </li></ul><ul><li>  </li></ul><ul><li>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript  application/javascript application/x-javascript (demais content-type's) </li></ul><ul><li>  </li></ul>
  41. 41. Habilite GZip <ul><ul><li>Para testar </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Entre no site www.web-sniffer.net </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Preencha o campo url com o endereço de um javascript em seu servidor   </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>No resultado, HTTP Response Header deve aparecer algo parecido com: </li></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>Content-Encoding: gzip
  42. 42. Habilite o Header Field &quot;ETag&quot; <ul><ul><li>Para que serve </li></ul></ul><ul><li>  </li></ul><ul><li>Diminui o tamanho do request </li></ul><ul><li>  </li></ul><ul><li>O Browser faz o cache do recurso estático e guarda seu ETag (aa-41a2d4c0, por exemplo) </li></ul><ul><li>Quando for efetuar o request novamente envia no header field If-None-Match: aa-41a2d4c0 </li></ul><ul><li>  </li></ul><ul><li>Se o ETag não foi modificado o browser retorna &quot;HTTP 304 Not Modified Status&quot; (request curto) </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  43. 43. Habilite o Header Field &quot;ETag&quot; <ul><li>No arquivo httpd.conf </li></ul><ul><li>Habilite o ETag </li></ul><ul><li>FileTag MTime Size </li></ul>
  44. 44. Habilite o Header Field &quot;ETag&quot; <ul><ul><li>Formato padrão é: FileTag Inode MTime Size </li></ul></ul><ul><li>  </li></ul><ul><ul><li>O formato padrão não é aconselhado para sistemas com recursos estáticos distribuidos (Inode se refere a máquina) </li></ul></ul><ul><li>  </li></ul>
  45. 45. Habilite o Header Field &quot;ETag&quot; <ul><ul><li>Para testar </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Entre no site www.web-sniffer.net </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Preencha o campo url com o endereço de uma imagem em seu servidor   </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>No resultado, HTTP Response Header deve aparecer algo parecido com: </li></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>ETag: aa-41a2d4c0
  46. 46. Aumente downloads simultâneos <ul><ul><li>Sabemos que downloads acontecem simultaneamente </li></ul></ul><ul><li>  </li></ul><ul><ul><li>A limitação dos downloads é baseado no hostname </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Distribuir arquivos entre hostnames diferentes implica em aumentar o número de downloads simultâneos (dobra a cada novo domínio adicionado) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Você pode criar um sub-domínio na mesma máquina do domínio principal </li></ul></ul>
  47. 47. Aumente downloads simultâneos <ul><li><html>     ...  </li></ul><ul><li>     <body>         <img src=&quot;http://img1.moip.com.br/imagem.jpg&quot;> </li></ul><ul><li>        <img src=&quot;http://img2.moip.com.br/imagem.jpg&quot;> </li></ul><ul><li>         <img src=&quot;http://img3.moip.com.br/imagem.jpg&quot;> </li></ul><ul><li>    </body> </html> </li></ul>
  48. 48. Limitações <ul><ul><li>Aumenta o consumo de CPU no cliente </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Dependendo do número de domínios pode diminuir a performance </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Geralmente um domínio adicional já pode ser o suficiente </li></ul></ul>
  49. 49. mod_pagespeed <ul><ul><li>Google way of life </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Módulo do apache </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Baseado em filtros </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Otimiza HTML, Javascript, CSS, Imagens </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Melhora o cache </li></ul></ul>
  50. 50. mod_pagespeed <ul><ul><li>Principais filtros </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>CSS combine - Junta todos os CSS em um só </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Inline CSS - Adiciona arquivos CSS pequenos ao próprio HTML </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Inline JS - A mesma coisa que o Inline CSS </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Minify JS - Reduz o tamanho do Javascript </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Remove Comments - Retira os comentários  </li></ul></ul></ul>
  51. 51. mod_pagespeed <ul><ul><li>Principais filtros </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Rewrite CSS - Retira os espaços e diminui o valor das cores </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Optimize Images - Diminui o tamanho das imagens (resize, re-compress, strip metadata) </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Move CSS to Head - Move todos os CSS's externos para o <head /> </li></ul></ul></ul><ul><li>  </li></ul>
  52. 52. Considerações finais <ul><ul><li>Organize suas mudanças </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Priorize mudanças com maior ganho e menor esforço </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Meça sua página antes, efetue a mudança e meça novamente (para poder calcular o ganho) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Otimize continuamente sua aplicação </li></ul></ul>
  53. 53. Links <ul><li>MoIP Labs </li></ul><ul><li>http://labs.moip.com.br </li></ul><ul><li>YSlow </li></ul><ul><li>http://developer.yahoo.com/yslow/ </li></ul><ul><li>Page Speed </li></ul><ul><li>http://code.google.com/intl/pt-BR/speed/page-speed/ </li></ul><ul><li>Web Performance Today http://www.webperformancetoday.com/ </li></ul><ul><li>Web Performance Optimization </li></ul><ul><li>http://www.websiteoptimization.com/ </li></ul>
  54. 54. Perguntas?
  55. 55. Obrigado

×