Este documento fornece dicas para aumentar a performance de sites. Ele resume a experiência do autor com desenvolvimento web, destaca a importância da velocidade para conversão e satisfação do usuário, e apresenta técnicas como configurar corretamente o Apache HTTP Server, reduzir o número de requisições, aumentar downloads simultâneos, diminuir tamanhos de arquivos e utilizar ferramentas como mod_pagespeed.

1. Aumente a performance
de seu site
de maneira disciplinada

2. Henrique Lima
● 10 anos de experiência com desenvolvimento
● Cetelem (financeira francesa)
● TIM (Telecom)
● SaveMe (Agregador de compras coletivas)
● MoIP (Facilitador de Pagamentos)

3. Contatos
henrique.lima@moip.com.br
http://www.facebook.com/hgflima
@henrique_lim4

4. Porque aumentar a performance do
meu site?
1 "People do not like to wait.
Do not make them."
Marissa Mayer, Vice-presidente do Google

5. Porque aumentar a performance do
meu site?
2 Aumentar a conversão

6. Pesquisas e Números

7. Pesquisas e números
Os 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

8. Pesquisas e números
Os 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

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

10. Pesquisas e números
Amazon
"Amazon descobriu que aumentou sua receita em 1% a
cada 100 milisegundos ganho em performance"
fonte: Amazon

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

12. Oportunidade

13. Salvador da Pátria

14. O Pica das Galáxias

15. Dinheiro!!!!!!!!!!

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

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

18. Problema
● Como faço para mensurar quantos processos eu consigo
manipular simultaneamente?

19. Multi-processing Modules (MPM)
1
3
2

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

21. Multi-processing Modules (MPM)
● Os MPM's mais comuns são:
○ Worker (1 Thread / Conexão)
○ Prefork (1 Processo / Conexão)
○ Winnt, BeOS e outros

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

23. Prefork (Baseado em Processos)

24. Worker (Baseado em Thread)

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

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

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

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

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

30. Qual é o melhor MPM então?

31. Qual é o melhor MPM então?
● Prefork é mais estável
● Worker requer menos hardware

32. Configuração - Prefork
No arquivo httpd.conf
<IfModule prefork.c>
StartServers 10
MinSpareServers 10
MaxSpareServers 25
ServerLimit 350
MaxClients 350
MaxRequestsPerChild 5
</IfModule>

33. Configuração - Prefork
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ções
MaxSpareServers - Número máximo de processos que ficarão
esperando por requisições
MaxClients - Número máximo de requisições atendidas
simultaneamente

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

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

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

37. Voltando ao problema inicial
● Como faço para mensurar quantos processos eu consigo
manipular simultaneamente?

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

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

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

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

42. Aspectos básicos de um browser

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

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

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

46. isso significa que ...
● Existem "poucas" threads para carregar os arquivos
● Arquivos muito grandes, ocupam threads que poderiam
estar carregando outros arquivos

47. Tamanho é documento
● Boa parte dos arquivos são texto
● Espaço em branco também é byte
● Imagens podem diminuir de tamanho

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

49. Reduza o número de requests

50. 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 On
ExpiresByType image/gif A2592000
A - A partir do primeiro acesso
2592000 - Cachear este arquivo por um mês (em segundos)

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

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

53. Habilite o Header "ETags"
No arquivo httpd.conf
Habilite o ETags
FileTag MTime Size

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

55. Habilite o Header "ETags"
● 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)

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

57. Utilize CSS Sprites
● Um mapeador de imagem via CSS
● Todas as imagens em um arquivo só (ou quase)
● Exemplo com SpriteMe

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

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

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

61. Diminua o tamanho dos arquivos

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

63. Habilite GZip
● Para que serve
Trafegar dados compactados usando como filtro o content-type

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

65. Tudo ao mesmo tempo agora

66. mod_pagespeed
● Google way of life
● Módulo do apache
● Baseado em filtros
● Otimiza HTML, Javascript, CSS, Imagens
● Melhora o cache

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

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

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

70. Links
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/

71. Perguntas?

72. Obrigado