Aumente a performance de seu site

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 "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

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="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)

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 "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 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 "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

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 "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 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="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 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/

Aumente a performance de seu site

Mais conteúdo relacionado

Mais procurados

Semelhante a Aumente a performance de seu site

Aumente a performance de seu site