• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Aumente a performance de seu site
 

Aumente a performance de seu site

on

  • 649 views

 

Statistics

Views

Total Views
649
Views on SlideShare
648
Embed Views
1

Actions

Likes
1
Downloads
14
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aumente a performance de seu site Aumente a performance de seu site Presentation Transcript

    • Aumente a performance de seu site de maneira disciplinada
    • Henrique Lima
        • 10 anos de experiência com desenvolvimento
      •  
        • Cetelem (financeira francesa)
      •  
        • TIM (Telecom)
      •  
        • SaveMe (Agregador de compras coletivas)
      •  
        • MoIP (Facilitador de Pagamentos)
    • Contatos
      • [email_address]
      •  
      • http://www.facebook.com/hgflima
      •  
      • @henrique_lim4
      •  
    • Porque aumentar a performance do meu site?
      • "People do not like to wait. 
      • Do not make them."
      1 Marissa Mayer, Vice-presidente do Google
    • Porque aumentar a performance do meu site?
      • Aumentar a conversão
      2
    • Pesquisas e Números
    • 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
    • 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
    • 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
    • Pesquisas e números
      • Amazon
      "Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance" fonte: Amazon
    • 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
    • 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 Operacionais
      •  
        • Estável
      •  
        • Centenas de módulos disponíveis
      •  
        • Open Source
    • 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
    • Apache HTTP Server
        • A configuração correta pode fazer diferença na(o):
      •  
          • Performance
      •  
          • Escalabilidade
      •  
          • Consumo de memória
      •  
          • Consumo de CPU
    • Problema
        • Como faço para mensurar quantos processos eu consigo manipular simultaneamente?
    • Configuração - Prefork
      • No arquivo httpd.conf
      •  
      • <IfModule prefork.c>     StartServers                  10     MinSpareServers          10
      •     MaxSpareServers         25     ServerLimit                   350      MaxClients                   350
      •     MaxRequestsPerChild  5
      • </IfModule>
    • 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
    • Caso não seja suficiente
        • Aumente a memória e calcule novamente
        • Adicione uma outra máquina e faça load balance (mais complexo)
    • Aspectos básicos de um browser
    • 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>
    • 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*
    • 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
    • isso significa que ...
        • Podem existir &quot;poucas&quot; threads para carregar os arquivos
      •  
        • Arquivos muito grandes, ocupam threads que poderiam estar carregando outros arquivos
      •  
    • 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
        • Diminuir o tamanho dos arquivos
      •  
        •   Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo baixados ao mesmo tempo)
      •  
    • Reduza o número de requests
    • Header Fields Protocolo HTTP 1.1
    • Requisição Browser x Servidor GET /logo.png HTTP/1.1 Header Fields Accept-Encoding: gzip Accept-Language: de,en …
    • Resposta Servidor x Browser Header Fields Content-Length: 4882 Content-Encoding: gzip … Status: HTTP/1.1 200 OK
    • 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
    • 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)
    • 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
    • Utilize CSS Sprites
        • Um mapeador de imagem via CSS
      •  
        • Todas as imagens em um arquivo só (ou quase)
      •  
        • Exemplo com SpriteMe
    • Diminua o tamanho dos arquivos
    • Habilite GZip
        • Para que serve
      •  
      • Trafegar dados compactados usando como filtro o content-type
    • 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)
      •  
    • 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
    • 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)
      •  
      •  
    • Habilite o Header Field &quot;ETag&quot;
      • No arquivo httpd.conf
      • Habilite o ETag
      • FileTag MTime Size
    • 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)
      •  
    • 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
    • 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
    • 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>
    • 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
    • mod_pagespeed
        • Google way of life
      •  
        • Módulo do apache
      •  
        • Baseado em filtros
      •  
        • Otimiza HTML, Javascript, CSS, Imagens
      •  
        • Melhora o cache
    • 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 
    • 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 />
      •  
    • 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
    • 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/
    • Perguntas?
    • Obrigado