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

Aumente a performance de seu site de maneira disciplinada

on

  • 1,404 views

 

Statistics

Views

Total Views
1,404
Views on SlideShare
1,404
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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 de maneira disciplinada Aumente a performance de seu site de maneira disciplinada Presentation Transcript

    • Aumente a performance de seu sitede 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)
    • 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-presidente do Google
    • 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 carregasse em até 4 segundos. Hoje, esse mesmo cliente espera que esta página carregue em 2 segundos ou menos." fonte: Forrester Consulting
    • 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
    • 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
    • Pesquisas e númerosAmazon "Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance" fonte: Amazon
    • 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
    • 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 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)
    • 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 diferença na(o): ○ Performance ○ Escalabilidade ○ Consumo de memória ○ Consumo de CPU
    • Multi-processing Modules (MPM)● Os MPMs mais comuns são: ○ Worker (1 Thread / Conexão) ○ Prefork (1 Processo / Conexão) ○ Winnt, BeOS e outros
    • 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
    • Prefork (Baseado em Processos)
    • Worker (Baseado em Thread)
    • 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
    • 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"
    • 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
    • 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
    • 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
    • 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 MaxSpareServers 25 ServerLimit 350 MaxClients 350 MaxRequestsPerChild 5</IfModule>
    • 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
    • Configuração - PreforkServerLimit - Número mais alto que o MaxClients pode chegar(default 256)MaxRequestsPerChild - Quantas vezes um mesmo processoserá reutilizado
    • 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
    • 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
    • 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 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
    • 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
    • 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!
    • O que vimos até aqui● Quais os aspectos mais importantes do Apache● Como funcionam os MPMs mais utilizados● Como configurar eficientemente os MPMs
    • Aspectos básicos de um browser
    • 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>
    • 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*
    • 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
    • isso significa que ... ● Existem "poucas" 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● Aumentar a capacidade de downloads simultâneos dos browsers (mais arquivos sendo baixados ao mesmo tempo)● Diminuir o tamanho dos arquivos
    • Reduza o número de requests
    • 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)
    • 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
    • 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
    • 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 com recursos estáticos distribuidos (Inode se refere a máquina)
    • 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)
    • 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
    • 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://img2.moip.com.br/imagem.jpg"> <img src="http://img3.moip.com.br/imagem.jpg"> </body></html>
    • 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
    • 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
    • Diminua o tamanho dos arquivos
    • 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)
    • 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 em seu servidor ○ No resultado, HTTP Response Header deve aparecer algo parecido com: Content-Encoding: gzip
    • 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 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 CSSs 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
    • 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/
    • Perguntas?
    • Obrigado