Aumente a performance     de seu sitede maneira disciplinada
Henrique Lima● 10 anos de experiência com desenvolvimento● Cetelem (financeira francesa)● TIM (Telecom)● SaveMe (Agregador...
Contatoshenrique.lima@moip.com.brhttp://www.facebook.com/hgflima@henrique_lim4
Porque aumentar a performance domeu site?1   "People do not like to wait.    Do not make them."Marissa Mayer, Vice-preside...
Porque aumentar a performance domeu site? 2   Aumentar a conversão
Pesquisas e Números
Pesquisas e númerosOs consumidores estão mais exigentes "Em 2006, compradores on-line esperavam que uma página web carrega...
Pesquisas e númerosOs consumidores querem velocidade "Carregamento rápido de uma página web é a segunda coisa mais importa...
Pesquisas e númerosE-commerce no Brasil "... cada segundo gasto na abertura de uma página pode representar 5% a menos de c...
Pesquisas e númerosAmazon "Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance"  ...
Pesquisas e númerosGoogle "O Google aumentou o número de resultados de suas pesquisas de 10 (a 0.4s) para 30 (a 0.9s), o t...
Oportunidade
Salvador da Pátria
O Pica das Galáxias
Dinheiro!!!!!!!!!!
Apache HTTP Server● Web server mais utilizado no mundo● Usado por 60% dos sites no mundo● Suporte a todos os Sistemas Oper...
Apache HTTP ServerO que Você TEM que saber sobre o apache ● Memória é o recurso mais importante ● Mensurar mal a memória s...
Problema● Como faço para mensurar quantos processos eu consigo  manipular simultaneamente?
Multi-processing Modules (MPM)                 1                       3             2
Multi-processing Modules (MPM)● Responsável por manipular as requisições  concorrentemente● A escolha certa pode fazer dif...
Multi-processing Modules (MPM)● Os MPMs mais comuns são:  ○ Worker (1 Thread / Conexão)  ○ Prefork (1 Processo / Conexão) ...
Processos e Threads● Processo   ○ É um módulo executável único, que é executado     concorrentemente com outros módulos ex...
Prefork (Baseado em Processos)
Worker (Baseado em Thread)
Prefork (Baseado em Processos)● Vantagens  ○ Cada request é tratato por um processo separado  ○ Tolerante a falhas  ○ Prob...
Prefork (Baseado em Processos)● Vantagens  ○ Processo filho tem vida curta  ○ Ideal para módulos monolíticos (PHP)  ○ Efet...
Prefork (Baseado em Processos)● Desvantagens  ○ Criar um processo é custoso (e demorado)  ○ Utiliza mais memória  ○ Pode s...
Worker (Baseado em Threads)● Vantagens  ○ Cada request é tratato por uma thread  ○ Ideal para tráfego muito alto (mais de ...
Worker (Baseado em Threads)● Desvantagens  ○ Menos estável que o prefork  ○ Problemas na thread podem influenciar no proce...
Qual é o melhor MPM então?
Qual é o melhor MPM então?● Prefork é mais estável● Worker requer menos hardware
Configuração - PreforkNo arquivo httpd.conf<IfModule prefork.c>   StartServers        10   MinSpareServers     10   MaxSpa...
Configuração - PreforkStartServers - O número de processos que serão criadosquando o apache for iniciadoMinSpareServers - ...
Configuração - PreforkServerLimit - Número mais alto que o MaxClients pode chegar(default 256)MaxRequestsPerChild - Quanta...
Dicas - PreforkStartServers, MaxSpareServers e MinSpareServers ● Números muito grandes consomem memória   desnecessária (d...
Dicas - PreforkServerLimit ● Caso seu MaxClients seja maior do que 256 é obrigatório   você configura-lo maior ou igual a ...
Voltando ao problema inicial● Como faço para mensurar quantos processos eu consigo  manipular simultaneamente?
Configuração - Prefork (Dica)MaxClients (esse é o segredo!) ● Identifique o tamanho médio dos seus processos apache,   Por...
Configuração Prefork (Dica)Resumindo ● Tamanho médio dos processos apache: 7800 kb ● RAM disponível: 2097152 kb ● Manipula...
Configuração WorkerNo arquivo httpd.conf<IfModule worker.c>   StartServers     2   MaxClients     150   MinSpareThreads 25...
O que vimos até aqui● Quais os aspectos mais importantes do Apache● Como funcionam os MPMs mais utilizados● Como configura...
Aspectos básicos de um browser
Cada arquivo é uma requisição<html>  <head>     <script type="text/javascript" src="meu.js">     <link rel="stylesheet" ty...
Isso significa que ... ● 80 a 90% do tempo de carregamento de uma página é   destinado ao download de arquivos (2007, Stev...
Nem tão multi-thread assim ...Quantos arquivos um browser efetua downloadsimultaneamente em um mesmo host? ● IE6 - 2 a 6 a...
isso significa que ... ● Existem "poucas" threads para carregar os arquivos ● Arquivos muito grandes, ocupam threads que p...
Tamanho é documento● Boa parte dos arquivos são texto● Espaço em branco também é byte● Imagens podem diminuir de tamanho
Solução● Reduzir o número de requests● Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo ba...
Reduza o número de requests
Habilite o Header "Expires"No Arquivo httpd.confCertifique-se de ter carregado o mod_expiresLoadModule expires_module modu...
Habilite o Header "Expires"● Indica a data de expiração desse arquivo no browser● Quanto tempo o browser irá ficar sem per...
Habilite o Header "Expires"● Para testar   ○ Entre no site www.web-sniffer.net   ○ Preencha o campo url com o endereço de ...
Habilite o Header "ETags"No arquivo httpd.confHabilite o ETagsFileTag MTime Size
Habilite o Header "ETags"● Formato padrão é: FileTag Inode MTime Size● O formato padrão não é aconselhado para sistemas co...
Habilite o Header "ETags" ● Para que serveDiminui o tamanho do requestO Browser faz o cache do recurso estático e guarda s...
Habilite o Header "ETags"● Para testar   ○ Entre no site www.web-sniffer.net   ○ Preencha o campo url com o endereço de um...
Utilize CSS Sprites● Um mapeador de imagem via CSS● Todas as imagens em um arquivo só (ou quase)● Exemplo com SpriteMe
Aumente downloads simultâneos<html>  ...  <body>      <img src="http://img1.moip.com.br/imagem.jpg">      <img src="http:/...
Aumente downloads simultâneos● Sabemos que downloads acontecem simultaneamente● A limitação dos downloads é baseado no hos...
Limitações● Aumenta o consumo de CPU no cliente● Dependendo do número de domínios pode diminuir a  performance● Geralmente...
Diminua o tamanho dos arquivos
Habilite GZipNo arquivo httpd.confCertifique-se de ter carregado o mod_deflateLoadModule deflate_module modules/mod_deflat...
Habilite GZip ● Para que serveTrafegar dados compactados usando como filtro o content-type
Habilite GZip● Para testar   ○ Entre no site www.web-sniffer.net   ○ Preencha o campo url com o endereço de um javascript ...
Tudo ao mesmo tempo agora
mod_pagespeed● Google way of life● Módulo do apache● Baseado em filtros● Otimiza HTML, Javascript, CSS, Imagens● Melhora o...
mod_pagespeed● Principais filtros   ○ CSS combine - Junta todos os CSS em um só   ○ Inline CSS - Adiciona arquivos CSS peq...
mod_pagespeed● Principais filtros   ○ Rewrite CSS - Retira os espaços e diminui o valor das     cores   ○ Optimize Images ...
Considerações finais● Organize suas mudanças● Priorize mudanças com maior ganho e menor esforço● Meça sua página antes, ef...
LinksYSlowhttp://developer.yahoo.com/yslow/Page Speedhttp://code.google.com/intl/pt-BR/speed/page-speed/Web Performance To...
Perguntas?
Obrigado
Próximos SlideShares
Carregando em…5
×

Aumente a performance de seu site de maneira disciplinada

2.015 visualizações

Publicada em

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

Sem downloads
Visualizações
Visualizações totais
2.015
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
27
Comentários
0
Gostaram
1
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 sitede maneira disciplinada
  2. 2. Henrique Lima● 10 anos de experiência com desenvolvimento● Cetelem (financeira francesa)● TIM (Telecom)● SaveMe (Agregador de compras coletivas)● MoIP (Facilitador de Pagamentos)
  3. 3. Contatoshenrique.lima@moip.com.brhttp://www.facebook.com/hgflima@henrique_lim4
  4. 4. Porque aumentar a performance domeu site?1 "People do not like to wait. Do not make them."Marissa Mayer, Vice-presidente do Google
  5. 5. Porque aumentar a performance domeu site? 2 Aumentar a conversão
  6. 6. Pesquisas e Números
  7. 7. Pesquisas e númerosOs consumidores estão mais exigentes "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." fonte: Forrester Consulting
  8. 8. Pesquisas e númerosOs consumidores querem velocidade "Carregamento rápido de uma página web é a segunda coisa mais importante para o cliente, perdendo apenas para a segurança" fonte: Web Performance Today
  9. 9. Pesquisas e númerosE-commerce no Brasil "... cada segundo gasto na abertura de uma página pode representar 5% a menos de conversão" Igor Senra, CEO do MoIP
  10. 10. Pesquisas e númerosAmazon "Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance" fonte: Amazon
  11. 11. Pesquisas e númerosGoogle "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%" 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● Web server mais utilizado no mundo● Usado por 60% dos sites no mundo● Suporte a todos os Sistemas Operacionais● Estável● Centenas de módulos disponíveis● Open Source
  17. 17. Apache HTTP ServerO que Você TEM que saber sobre o apache ● Memória é o recurso mais importante ● Mensurar mal a memória significa: ○ Usar memória Swap (muito processo / pouca memória) ○ Lentidão no sistema (pouco processo / memória sobrando)
  18. 18. Problema● Como faço para mensurar quantos processos eu consigo manipular simultaneamente?
  19. 19. Multi-processing Modules (MPM) 1 3 2
  20. 20. Multi-processing Modules (MPM)● Responsável por manipular as requisições concorrentemente● A escolha certa pode fazer diferença na(o): ○ Performance ○ Escalabilidade ○ Consumo de memória ○ Consumo de CPU
  21. 21. Multi-processing Modules (MPM)● Os MPMs mais comuns são: ○ Worker (1 Thread / Conexão) ○ Prefork (1 Processo / Conexão) ○ Winnt, BeOS e outros
  22. 22. Processos e Threads● Processo ○ É um módulo executável único, que é executado concorrentemente com outros módulos executáveis (Wikipedia) ○ Espaço de memória não-compartilhado● Thread ○ Não é executável (só pode ser criado por um processo) ○ Espaço de memória compartilhado
  23. 23. Prefork (Baseado em Processos)
  24. 24. Worker (Baseado em Thread)
  25. 25. Prefork (Baseado em Processos)● Vantagens ○ Cada request é tratato por um processo separado ○ Tolerante a falhas ○ Problema no processo filho não implica no pai ○ Estável ○ Pode ser utilizado com módulos não thread-safe
  26. 26. Prefork (Baseado em Processos)● Vantagens ○ Processo filho tem vida curta ○ Ideal para módulos monolíticos (PHP) ○ Efetua pooling de processos (por isso prefork) ○ Mais fácil de "debuggar"
  27. 27. Prefork (Baseado em Processos)● Desvantagens ○ Criar um processo é custoso (e demorado) ○ Utiliza mais memória ○ Pode ser um pouco mais lento do que o Worker
  28. 28. Worker (Baseado em Threads)● Vantagens ○ Cada request é tratato por uma thread ○ Ideal para tráfego muito alto (mais de 3 mil requests simultâneos) ○ Usa menos memória que o prefork ○ Pode ser mais veloz que o prefork
  29. 29. Worker (Baseado em Threads)● Desvantagens ○ Menos estável que o prefork ○ Problemas na thread podem influenciar no processo pai ○ Problemas com módulos não thread-safe ○ Mais difícil de debuggar
  30. 30. Qual é o melhor MPM então?
  31. 31. Qual é o melhor MPM então?● Prefork é mais estável● Worker requer menos hardware
  32. 32. Configuração - PreforkNo arquivo httpd.conf<IfModule prefork.c> StartServers 10 MinSpareServers 10 MaxSpareServers 25 ServerLimit 350 MaxClients 350 MaxRequestsPerChild 5</IfModule>
  33. 33. Configuração - PreforkStartServers - O número de processos que serão criadosquando o apache for iniciadoMinSpareServers - Número mínimo de processos que ficarãoesperando por requisiçõesMaxSpareServers - Número máximo de processos que ficarãoesperando por requisiçõesMaxClients - Número máximo de requisições atendidassimultaneamente
  34. 34. Configuração - PreforkServerLimit - Número mais alto que o MaxClients pode chegar(default 256)MaxRequestsPerChild - Quantas vezes um mesmo processoserá reutilizado
  35. 35. Dicas - PreforkStartServers, MaxSpareServers e MinSpareServers ● Números muito grandes consomem memória desnecessária (dependendo do tamanho médio do seu processo) ● Sugestão ○ MinSpareServers - 10 a 20 ○ MaxSpareServers - 20 a 30 ○ StartServers - Igual a MinSpareServers
  36. 36. Dicas - PreforkServerLimit ● Caso seu MaxClients seja maior do que 256 é obrigatório você configura-lo maior ou igual a MaxClients ● Sugestão: Igual a MaxClients
  37. 37. Voltando ao problema inicial● Como faço para mensurar quantos processos eu consigo manipular simultaneamente?
  38. 38. Configuração - Prefork (Dica)MaxClients (esse é o segredo!) ● Identifique o tamanho médio dos seus processos apache, Por exemplo: 7800 kb ● Identifique o tanto de memória RAM disponível sem o apache rodando(deixe uns 20% sobrando), Por exemplo: 2GB (2097152 kb) 2097152 / 7800 = 268 processos
  39. 39. Configuração Prefork (Dica)Resumindo ● Tamanho médio dos processos apache: 7800 kb ● RAM disponível: 2097152 kb ● Manipulam 268 conexões simultâneasCaso não seja suficiente para o sistema ● Aumente a memória e calcule novamente ● Adicione uma outra máquina e faça load balance
  40. 40. Configuração WorkerNo arquivo httpd.conf<IfModule worker.c> StartServers 2 MaxClients 150 MinSpareThreads 25 MaxSpareThreads 75 ThreadsPerChild 25 MaxRequestsPerChild 0</IfModule> Mesma abordagem que o Prefork!
  41. 41. O que vimos até aqui● Quais os aspectos mais importantes do Apache● Como funcionam os MPMs mais utilizados● Como configurar eficientemente os MPMs
  42. 42. Aspectos básicos de um browser
  43. 43. Cada arquivo é uma requisição<html> <head> <script type="text/javascript" src="meu.js"> <link rel="stylesheet" type="text/css" href="meu.css"> </head> <body> <img src="img.jpg"> </body></html>
  44. 44. Isso significa que ... ● 80 a 90% do tempo de carregamento de uma página é destinado ao download de arquivos (2007, Steve Sonders) ● Um servidor que suporta 350 conexões ● Servindo uma página com 50 arquivos ● Suporta no máximo 7 acessos simultâneos*
  45. 45. Nem tão multi-thread assim ...Quantos arquivos um browser efetua downloadsimultaneamente em um mesmo host? ● IE6 - 2 a 6 arquivos ● Opera - de 6 a 8 arquivos ● Firefox 6 - de 6 a 14 arquivos ● Chrome 14 - de 6 a 14 arquivos fonte: browserscope
  46. 46. isso significa que ... ● Existem "poucas" threads para carregar os arquivos ● Arquivos muito grandes, ocupam threads que poderiam estar carregando outros arquivos
  47. 47. Tamanho é documento● Boa parte dos arquivos são texto● Espaço em branco também é byte● Imagens podem diminuir de tamanho
  48. 48. Solução● Reduzir o número de requests● Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo baixados ao mesmo tempo)● Diminuir o tamanho dos arquivos
  49. 49. Reduza o número de requests
  50. 50. Habilite o Header "Expires"No Arquivo httpd.confCertifique-se de ter carregado o mod_expiresLoadModule expires_module modules/mod_expires.soHabilite o ExpiresExpiresActive OnExpiresByType image/gif A2592000A - A partir do primeiro acesso2592000 - Cachear este arquivo por um mês (em segundos)
  51. 51. Habilite o Header "Expires"● Indica a data de expiração desse arquivo no browser● Quanto tempo o browser irá ficar sem perguntar por este arquivo ao servidor● Somente em arquivos estáticos● Mínimo 1 mês● Máximo 1 ano
  52. 52. Habilite o Header "Expires"● Para testar ○ Entre no site www.web-sniffer.net ○ Preencha o campo url com o endereço de uma imagem em seu servidor ○ No resultado, HTTP Response Header deve aparecer algo parecido com: Expires: Wed, 26 Oct 2011 22:13:20 GMT
  53. 53. Habilite o Header "ETags"No arquivo httpd.confHabilite o ETagsFileTag MTime Size
  54. 54. Habilite o Header "ETags"● Formato padrão é: FileTag Inode MTime Size● O formato padrão não é aconselhado para sistemas com recursos estáticos distribuidos (Inode se refere a máquina)
  55. 55. Habilite o Header "ETags" ● Para que serveDiminui o tamanho do requestO Browser faz o cache do recurso estático e guarda seu ETag(aa-41a2d4c0, por exemplo)Quando for efetuar o request novamente envia no header If-None-Match: aa-41a2d4c0Se o ETag não foi modificado o browser retorna "HTTP 304Not Modified Status" (request curto)
  56. 56. Habilite o Header "ETags"● Para testar ○ Entre no site www.web-sniffer.net ○ Preencha o campo url com o endereço de uma imagem em seu servidor ○ No resultado, HTTP Response Header deve aparecer algo parecido com: ETag: aa-41a2d4c0
  57. 57. Utilize CSS Sprites● Um mapeador de imagem via CSS● Todas as imagens em um arquivo só (ou quase)● Exemplo com SpriteMe
  58. 58. Aumente downloads simultâneos<html> ... <body> <img src="http://img1.moip.com.br/imagem.jpg"> <img src="http://img2.moip.com.br/imagem.jpg"> <img src="http://img3.moip.com.br/imagem.jpg"> </body></html>
  59. 59. Aumente downloads simultâneos● Sabemos que downloads acontecem simultaneamente● A limitação dos downloads é baseado no hostname● Distribuir arquivos entre hostnames diferentes implica em aumentar o número de downloads simultâneos (dobra a cada novo domínio adicionado)● Você pode criar um sub-domínio na mesma máquina do domínio principal
  60. 60. Limitações● Aumenta o consumo de CPU no cliente● Dependendo do número de domínios pode diminuir a performance● Geralmente um domínio adicional já pode ser o suficiente
  61. 61. Diminua o tamanho dos arquivos
  62. 62. Habilite GZipNo arquivo httpd.confCertifique-se de ter carregado o mod_deflateLoadModule deflate_module modules/mod_deflate.soHabilite o GZipAddOutputFilterByType DEFLATE text/html text/plain text/xmltext/css text/javascript application/javascript application/x-javascript (demais content-types)
  63. 63. Habilite GZip ● Para que serveTrafegar dados compactados usando como filtro o content-type
  64. 64. Habilite GZip● Para testar ○ Entre no site www.web-sniffer.net ○ Preencha o campo url com o endereço de um javascript em seu servidor ○ No resultado, HTTP Response Header deve aparecer algo parecido com: Content-Encoding: gzip
  65. 65. Tudo ao mesmo tempo agora
  66. 66. mod_pagespeed● Google way of life● Módulo do apache● Baseado em filtros● Otimiza HTML, Javascript, CSS, Imagens● Melhora o cache
  67. 67. mod_pagespeed● Principais filtros ○ CSS combine - Junta todos os CSS em um só ○ Inline CSS - Adiciona arquivos CSS pequenos ao próprio HTML ○ Inline JS - A mesma coisa que o Inline CSS ○ Minify JS - Reduz o tamanho do Javascript ○ Remove Comments - Retira os comentários
  68. 68. mod_pagespeed● Principais filtros ○ Rewrite CSS - Retira os espaços e diminui o valor das cores ○ Optimize Images - Diminui o tamanho das imagens (resize, re-compress, strip metadata) ○ Move CSS to Head - Move todos os CSSs externos para o <head />
  69. 69. Considerações finais● Organize suas mudanças● Priorize mudanças com maior ganho e menor esforço● Meça sua página antes, efetue a mudança e meça novamente (para poder calcular o ganho)● Otimize continuamente sua aplicação
  70. 70. LinksYSlowhttp://developer.yahoo.com/yslow/Page Speedhttp://code.google.com/intl/pt-BR/speed/page-speed/Web Performance Todayhttp://www.webperformancetoday.com/Web Performance Optimizationhttp://www.websiteoptimization.com/
  71. 71. Perguntas?
  72. 72. Obrigado

×