Your SlideShare is downloading. ×
Aumente a performance de seu site
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Aumente a performance de seu site

440

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
440
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Aumente a performance de seu site de maneira disciplinada
  • 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. Contatos
    • [email_address]
    •  
    • http://www.facebook.com/hgflima
    •  
    • @henrique_lim4
    •  
  • 4. Porque aumentar a performance do meu site?
    • "People do not like to wait. 
    • Do not make them."
    1 Marissa Mayer, Vice-presidente do Google
  • 5. Porque aumentar a performance do meu site?
    • Aumentar a conversão
    2
  • 6. Pesquisas e Números
  • 7. Pesquisas e números
    • "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 Os consumidores estão mais exigentes
  • 8. Pesquisas e números
    • "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 Os consumidores querem velocidade
  • 9. Pesquisas e números
    • E-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. Pesquisas e números
    • Amazon
    "Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance" fonte: Amazon
  • 11. Pesquisas e números
    • Google
    "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. Oportunidade
  • 13. Salvador da Pátria
  • 14. O Pica das Galáxias
  • 15. Dinheiro!!!!!!!!!!
  • 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. Apache HTTP Server
    • O que Você TEM que saber sobre o apache
    •  
      • Memória é:
      • O recurso mais importante
    •  
      • Quem determina a capacidade de atender mais ou menos requisições simultaneamente
      • CPU, disco e placa de rede
  • 18. Apache HTTP Server
      • A configuração correta pode fazer diferença na(o):
    •  
        • Performance
    •  
        • Escalabilidade
    •  
        • Consumo de memória
    •  
        • Consumo de CPU
  • 19. Problema
      • Como faço para mensurar quantos processos eu consigo manipular simultaneamente?
  • 20. Configuração - Prefork
    • No arquivo httpd.conf
    •  
    • <IfModule prefork.c>     StartServers                  10     MinSpareServers          10
    •     MaxSpareServers         25     ServerLimit                   350      MaxClients                   350
    •     MaxRequestsPerChild  5
    • </IfModule>
  • 21. 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
  • 22. Caso não seja suficiente
      • Aumente a memória e calcule novamente
      • Adicione uma outra máquina e faça load balance (mais complexo)
  • 23. Aspectos básicos de um browser
  • 24. Cada arquivo é uma requisição
    • <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;>
    •     </body> </html>
  • 25. 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*
  • 26. Download concorrente de arquivos
    • Quantos arquivos um browser efetua download simultaneamente 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
  • 27. isso significa que ...
      • Podem existir &quot;poucas&quot; threads para carregar os arquivos
    •  
      • Arquivos muito grandes, ocupam threads que poderiam estar carregando outros arquivos
    •  
  • 28. Tamanho é documento
      • Boa parte dos arquivos são texto
    •  
      • Espaço em branco também é byte
    •  
      • Imagens podem diminuir de tamanho 
  • 29. Solução
      • Reduzir o número de requests
      • Diminuir o tamanho dos arquivos
    •  
      •   Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo baixados ao mesmo tempo)
    •  
  • 30. Reduza o número de requests
  • 31. Header Fields Protocolo HTTP 1.1
  • 32. Requisição Browser x Servidor GET /logo.png HTTP/1.1 Header Fields Accept-Encoding: gzip Accept-Language: de,en …
  • 33. Resposta Servidor x Browser Header Fields Content-Length: 4882 Content-Encoding: gzip … Status: HTTP/1.1 200 OK
  • 34. Habilite o Header Field &quot;Expires&quot;
      • Expires: Wed, 26 Oct 2011 22:13:20 GMT
      • 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
  • 35. Habilite o Header Field &quot;Expires&quot;
    • No Arquivo httpd.conf
    •  
    • Certifique-se de ter carregado o mod_expires
    •  
    • LoadModule expires_module modules/mod_expires.so
    • Habilite o Expires
    • ExpiresActive On ExpiresByType image/gif A2592000
    A - A partir do primeiro acesso 2592000 - Cachear este arquivo por um mês (em segundos)
  • 36. Habilite o Header Field &quot;Expires&quot;
      • 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
  • 37. Utilize CSS Sprites
      • Um mapeador de imagem via CSS
    •  
      • Todas as imagens em um arquivo só (ou quase)
    •  
      • Exemplo com SpriteMe
  • 38. Diminua o tamanho dos arquivos
  • 39. Habilite GZip
      • Para que serve
    •  
    • Trafegar dados compactados usando como filtro o content-type
  • 40. Habilite GZip
    • No arquivo httpd.conf
    •  
    • Certifique-se de ter carregado o mod_deflate
    •  
    • LoadModule deflate_module modules/mod_deflate.so
    •  
    • Habilite o GZip
    •  
    • AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript  application/javascript application/x-javascript (demais content-type's)
    •  
  • 41. 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
  • 42. Habilite o Header Field &quot;ETag&quot;
      • Para que serve
    •  
    • Diminui o tamanho do request
    •  
    • O 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 field If-None-Match: aa-41a2d4c0
    •  
    • Se o ETag não foi modificado o browser retorna &quot;HTTP 304 Not Modified Status&quot; (request curto)
    •  
    •  
  • 43. Habilite o Header Field &quot;ETag&quot;
    • No arquivo httpd.conf
    • Habilite o ETag
    • FileTag MTime Size
  • 44. Habilite o Header Field &quot;ETag&quot;
      • 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)
    •  
  • 45. Habilite o Header Field &quot;ETag&quot;
      • 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
  • 46. 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
  • 47. Aumente downloads simultâneos
    • <html>     ... 
    •      <body>         <img src=&quot;http://img1.moip.com.br/imagem.jpg&quot;>
    •         <img src=&quot;http://img2.moip.com.br/imagem.jpg&quot;>
    •          <img src=&quot;http://img3.moip.com.br/imagem.jpg&quot;>
    •     </body> </html>
  • 48. 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
  • 49. mod_pagespeed
      • Google way of life
    •  
      • Módulo do apache
    •  
      • Baseado em filtros
    •  
      • Otimiza HTML, Javascript, CSS, Imagens
    •  
      • Melhora o cache
  • 50. 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 
  • 51. 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 CSS's externos para o <head />
    •  
  • 52. 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
  • 53. Links
    • MoIP Labs
    • http://labs.moip.com.br
    • YSlow
    • http://developer.yahoo.com/yslow/
    • Page Speed
    • http://code.google.com/intl/pt-BR/speed/page-speed/
    • Web Performance Today http://www.webperformancetoday.com/
    • Web Performance Optimization
    • http://www.websiteoptimization.com/
  • 54. Perguntas?
  • 55. Obrigado

×