aumente a performance de seu site
Post on 06-Jun-2015
457 Views
Preview:
TRANSCRIPT
Aumente a performancede 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
henrique.lima@moip.com.br 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ão2
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
"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):
o Performance
o Escalabilidade
o Consumo de memória
o 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="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*
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 "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
• 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 FieldsAccept-Encoding: gzipAccept-Language: de,en…
Resposta Servidor x Browser
Header FieldsContent-Length: 4882Content-Encoding: gzip…
Status: HTTP/1.1 200 OK
Habilite o Header Field "Expires"
• 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 "Expires"
No Arquivo httpd.conf Certifique-se de ter carregado o mod_expires LoadModule expires_module modules/mod_expires.so
Habilite o Expires
ExpiresActive OnExpiresByType image/gif A2592000
A - A partir do primeiro acesso 2592000 - Cachear este arquivo por um mês (em segundos)
Habilite o Header Field "Expires"
• Para testar
o Entre no site www.web-sniffer.net
o Preencha o campo url com o endereço de uma imagem em seu servidor
o 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
o Entre no site www.web-sniffer.net
o Preencha o campo url com o endereço de um javascript em seu servidor
o No resultado, HTTP Response Header deve aparecer
algo parecido com:
Content-Encoding: gzip
Habilite o Header Field "ETag"
• 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 "HTTP 304 Not Modified Status" (request curto)
Habilite o Header Field "ETag"
No arquivo httpd.conf
Habilite o ETag
FileTag MTime Size
Habilite o Header Field "ETag"
• 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 "ETag"
• Para testar
o Entre no site www.web-sniffer.net
o Preencha o campo url com o endereço de uma imagem em seu servidor
o 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="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>
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
o CSS combine - Junta todos os CSS em um só
o Inline CSS - Adiciona arquivos CSS pequenos ao próprio HTML
o Inline JS - A mesma coisa que o Inline CSS
o Minify JS - Reduz o tamanho do Javascript
o Remove Comments - Retira os comentários
mod_pagespeed
• Principais filtros
o Rewrite CSS - Retira os espaços e diminui o valor das cores
o Optimize Images - Diminui o tamanho das imagens
(resize, re-compress, strip metadata)
o 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
LinksMoIP Labshttp://labs.moip.com.br
YSlowhttp://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
top related