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


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)


• 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 Preencha o campo url com o endereço de um javascript em seu servidor


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)


No arquivo httpd.conf

Habilite o ETag

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 testar


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


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

Aumente a performance de seu site de maneira disciplinada

Technology