Aumente a performance de seu site de maneira disciplinada

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

[email protected] 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


"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


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


Amazon

"Amazon descobriu que aumentou sua receita em 1% a cada 100 milisegundos ganho em performance"

fonte: Amazon


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

● 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

2

3


● 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


● Os MPM's 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)


● 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


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


● 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 - Prefork

No arquivo httpd.conf <IfModule prefork.c> StartServers 10 MinSpareServers 10 MaxSpareServers 25 ServerLimit 350 MaxClients 350 MaxRequestsPerChild 5</IfModule>


StartServers - O número de processos que serão criados quando o apache for iniciado MinSpareServers - Número mínimo de processos que ficarão esperando por requisiçõesMaxSpareServers - Número máximo de processos que ficarão esperando por requisições MaxClients - Número máximo de requisições atendidas simultaneamente


ServerLimit - Número mais alto que o MaxClients pode chegar (default 256) MaxRequestsPerChild - Quantas vezes um mesmo processo será reutilizado

Dicas - Prefork

StartServers, 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 - Prefork

ServerLimit

● 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âneas Caso 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 Worker

No 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 MPM's mais utilizados

● Como configurar eficientemente os MPM's

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

● 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.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)


● 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


● 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.conf

Habilite o ETags

FileTag MTime Size


● 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)


● 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 If-None-Match: aa-41a2d4c0 Se o ETag não foi modificado o browser retorna "HTTP 304 Not Modified Status" (request curto)


● Para testar


○ Preencha o campo url com o endereço de uma imagem em seu servidor


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 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 que serve Trafegar dados compactados usando como filtro o content-type

Habilite GZip

● Para testar


○ Preencha o campo url com o endereço de um javascript em seu servidor


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

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

Technology

Aumente a performance de seu site de maneira disciplinada