Performance em serviccedilos Web

Vinicius Mellohttpvmmelloetibr

Tchelinux ndash Caxias do Sul ndash 2010

Exemplo para explicar a palestra

Performance em serviccedilos Web

Blog foacuterum site de notiacutecias etc

Limite de qualidade de atendimento por exemplo

Foacuterum ~ 10 a 20 usuaacuterios simultacircneos

Blog ~ 80 a 100 usuaacuterios simultacircneos

Site de notiacutecias ~ 100 a 120 usuaacuterios simultacircneos

Um servidor atende todos os usuaacuterios

Palestra Dicas teacutecnicas para aumentar a capacidade de atendimento

PerformanceAtender o maior nuacutemero de usuaacuterios com o menor nuacutemero de servidores possiacutevel (definiccedilatildeo simplista mas faacutecil pra explicar o conceito)

Custos hospedagem e manutenccedilatildeo

Qualidade

Paacutegina eacute desenhada rapidamente para o usuaacuterio

O usuaacuterio fica o menor tempo possiacutevel conectado ao servidor

Sem erros de conexatildeo recusada

O acesso a uma paacutegina

O acesso a uma paacutegina (cont)

Primeiro acesso tempo de DNS + tempo de roteamento

Demais acessos tempo de roteamento

As requisiccedilotildees levam um tempo para chegar ao destino e voltar

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Exemplo para explicar a palestra

Performance em serviccedilos Web

Blog foacuterum site de notiacutecias etc

Limite de qualidade de atendimento por exemplo

Foacuterum ~ 10 a 20 usuaacuterios simultacircneos

Blog ~ 80 a 100 usuaacuterios simultacircneos

Site de notiacutecias ~ 100 a 120 usuaacuterios simultacircneos

Um servidor atende todos os usuaacuterios

Palestra Dicas teacutecnicas para aumentar a capacidade de atendimento

PerformanceAtender o maior nuacutemero de usuaacuterios com o menor nuacutemero de servidores possiacutevel (definiccedilatildeo simplista mas faacutecil pra explicar o conceito)

Custos hospedagem e manutenccedilatildeo

Qualidade

Paacutegina eacute desenhada rapidamente para o usuaacuterio

O usuaacuterio fica o menor tempo possiacutevel conectado ao servidor

Sem erros de conexatildeo recusada

O acesso a uma paacutegina

O acesso a uma paacutegina (cont)

Primeiro acesso tempo de DNS + tempo de roteamento

Demais acessos tempo de roteamento

As requisiccedilotildees levam um tempo para chegar ao destino e voltar

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

PerformanceAtender o maior nuacutemero de usuaacuterios com o menor nuacutemero de servidores possiacutevel (definiccedilatildeo simplista mas faacutecil pra explicar o conceito)

Custos hospedagem e manutenccedilatildeo

Qualidade

Paacutegina eacute desenhada rapidamente para o usuaacuterio

O usuaacuterio fica o menor tempo possiacutevel conectado ao servidor

Sem erros de conexatildeo recusada

O acesso a uma paacutegina

O acesso a uma paacutegina (cont)

Primeiro acesso tempo de DNS + tempo de roteamento

Demais acessos tempo de roteamento

As requisiccedilotildees levam um tempo para chegar ao destino e voltar

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

O acesso a uma paacutegina

O acesso a uma paacutegina (cont)

Primeiro acesso tempo de DNS + tempo de roteamento

Demais acessos tempo de roteamento

As requisiccedilotildees levam um tempo para chegar ao destino e voltar

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

O acesso a uma paacutegina (cont)

Primeiro acesso tempo de DNS + tempo de roteamento

Demais acessos tempo de roteamento

As requisiccedilotildees levam um tempo para chegar ao destino e voltar

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Exemplos de medidas de tempo

N SiteTempo de DNS

(1)Tempo de Conexatildeo

(2)

Tempo de Resposta HTTP

(ms) (3)Tamanho HTML

1 Site 1 9 ms 20 ms 343 ms 1290 KB

2 Site 2 13 ms 28 ms 172 (52) ms 1537 KB (3 KB)

3 Site 3 34 ms 70 ms 264 ms 29 KB

(1) requisiccedilatildeo direta ao servidor DNS do domiacutenio(2) tempo de retorno da funccedilatildeo connect() da glibc(3) tempo para enviar a requisiccedilatildeo e receber cabeccedilalhos + arquivo html

site utilizava um servidor cache (squid) e comprimia o conteuacutedo com gzip

Conexotildees a sites de Caxias do Sul a partir de Porto Alegre

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Demonstraccedilatildeo de como medir essas variaacuteveis de tempo

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Comprimir o conteuacutedo de texto (1)

Reduz o tempo de recebimento dos documentos

Reduz o tempo que o servidor atende ao usuaacuterio

Reduz drasticamente o uso de largura de banda (hospedagem c 1 milhatildeo de domiacutenios reduccedilatildeo de 1 Gbits de traacutefego contiacutenuo)

(sysadmin)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Comprimir o conteuacutedo de texto (2)

Recomendado comprimir Html CSS Javascript Arquivos em texto puro

Perda de tempo tentar comprimir arquivos de miacutedia mp3 mpeg jpg png gif flash Satildeo binaacuterios otimizados em tamanho Nenhuma diferenccedila de tamanho

Habilitar os moacutedulos nos servidores HTTP

Apache mod_deflate ou mod_gzip

Nginx mod_gzip

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Antes do ano de 2004

Exemplo site linuxorg (2002) ndash 1 html + 44 imagens

Sites eram apenas um documento de texto (html) + imagens

Responsabilidade pela performance administrador de sistemas

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Poacutes 2004

Exemplo site linuxorg (2010) ndash 1 html + 15 javascript + 4 iframes + 2 flashs + 46 imagens

Sites multi-documentos (popularizou CSS + Javascript + objetos)

Responsabilidade pela performance desenvolvedores (equipe multidisciplinar)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Como funcionam as requisiccedilotildees HTTP

GET httpwwwgooglecombrsearchhl=pt-BRampclient=firefoxHost wwwgooglecombrUser-Agent Mozilla50 (X11 U Linux x86_64 en-US rv1923)Accept texthtmlapplicationxhtml+xmlapplicationxmlq=09q=08Accept-Language pt-bren-usq=07enq=03Accept-Charset ISO-8859-1utf-8q=07q=07Keep-Alive 115Proxy-Connection keep-aliveReferer httpwwwgooglecombrsearchq=Cookie PREF=ID=aab9eb9e1b47a77bU=6214272b6f8d75c3

HTTP11 200 OKCache-Control private max-age=0Date Sat 19 Jun 2010 073220 GMTExpires -1Content-Type texthtml charset=UTF-8Server gws

ltdoctype htmlgtltheadgtlttitlegttchelinux - Pesquisa Googlelttitlegtltscriptgtwindowgoogle=kEIh

(hellip corpo da requisiccedilatildeo hellip )

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Demonstraccedilatildeo de requisiccedilotildees a um site completo

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Regras HTTP11 + Comportamento dos navegadores

HTTP 11 ndash eacute permitido fazer apenas 2 requisiccedilotildees simultacircneas a um mesmo servidor

Navegadores ndash fazem apenas 1 requisiccedilatildeo ao encontrar uma tag ltscriptgt

Navegadores ndash fazem requisiccedilotildees HTTP toda vez que encontram um objeto em uma paacutegina (mesmo que tenham baixado esse objeto haacute 30 segundos atraacutes)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Soluccedilotildees

Reduzir o nuacutemero de requisiccedilotildees HTTPComo fazer isso sem remover as imagens CSS javascript etc

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Distribuir as requisiccedilotildees entre vaacuterios servidores Possibilitar ao navegador realizar mais de 2 conexotildees simultacircneas

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (1)

Instruir o navegador para fazer cache das imagens CSS e Javascript

Adicionar cabeccedilalhos de expiraccedilatildeo e cache a esses elementos para evitar as requisiccedilotildees repetidas

Expires=Sat 19 Jul 2010 015635 GMT

Cache-Control=max-age=2592000

Reduz significativamente o nuacutemero de requisiccedilotildees subsequumlentes

Menos requisiccedilotildees no servidorPaacutegina carrega mais raacutepido para o usuaacuterio

(sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

Exemplo Apache HTTPD(contexto Server VirtualHost Directory htaccess)

ltIfModule mod_expirescgt

ExpiresActive On

ltFilesMatch (gif|jpg|png|js|css)$gt ExpiresDefault access plus 1 monthltFilesMatchgt

ltFilesMatch html$gt ExpiresDefault access plus 10 minutes

ltFilesMatchgt

ltIfModulegt

Reduzir o nuacutemero de requisiccedilotildees HTTP (2)

(Sysadmins + desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (3)

Combinar CSS e Javascript em um uacutenico arquivo por grupo

Todos os arquivos de CSS em um uacutenico arquivo

Todos os arquivos de Javascript em um uacutenico arquivo

Isso faz com que haja apenas uma requisiccedilatildeo para cada tipo de arquivo

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (4)

Combinar imagens de fundo adjacentes em um uacutenico arquivo (CSS Sprite)

(pode ser combinada horizontalmente ou verticalmente)

Controlar a parte visiacutevel com as propriedades width height e background-position do CSS por exemplo

classe-wrapper width M px opcional height N px

classe-background background-position x px y px

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Reduzir o nuacutemero de requisiccedilotildees HTTP (5)

Utilizar imagens ldquoin-linerdquo dentro de arquivos CSS e HTML atraveacutes do esquema de URL data

ltimg src=dataimagegifbase64iVBORw0KGgoAAA title=Titulo alt=rdquoText altrdquo gt

Sintaxe datatipo-de-miacutediaencodingconteuacutedo

Pra converter as imagens

$ cat imagem1jpg | openssl base64 -e

(desenvolvedores)

Adiar as requisiccedilotildees que natildeo satildeo extremamente necessaacuterias

Colocar as tags ltscriptgt que natildeo tem elementos visiacuteveis na paacutegina no final

Por exemplo

lthtmlgtltbodygt

conteuacutedoltbodygtltscript type=rdquotextjavascriptrdquo src=rdquogoogle-analyticscomgajsrdquogt

hellipltscriptgtlthtmlgt

Principais candidatos scripts que fazem apenas requisiccedilotildees Ajax apoacutes a paacutegina carregada

(desenvolvedores)

Distribuir as requisiccedilotildees entre vaacuterios servidores

Imagens - httpimgs-1meudominiocom - httpimgs-2meudominiocom

CSSJavascript - httptxt-1meudominiocom - httptxt-2meudominiocom

Melhora o paralelismo dos downloads (paacutegina abre mais raacutepido para o usuaacuterio)

Desvantagem cria uma pequena latecircncia de DNS (que geralmente ainda eacute menor do que a HTTP)

(sysadmins + desenvolvedores)

Distribuir as requisiccedilotildees entre vaacuterios servidores

Imagens - httpimgs-1meudominiocom - httpimgs-2meudominiocom

CSSJavascript - httptxt-1meudominiocom - httptxt-2meudominiocom

Melhora o paralelismo dos downloads (paacutegina abre mais raacutepido para o usuaacuterio)

Desvantagem cria uma pequena latecircncia de DNS (que geralmente ainda eacute menor do que a HTTP)

(sysadmins + desenvolvedores)

Notas Raacutepidas sobre Backend

No backend haacute um mundo a parte de soluccedilotildees e configuraccedilotildees para reduzir a carga nas aplicaccedilotildees

Nesta sessatildeo coloco apenas alguns lembretes importantes

(reduzida por questatildeo de tempo e porque acredito que natildeo seja de interesse da maior parte da audiecircncia)

Front-End Cache

Cache de objetos em memoacuteria RAM (baixa latecircncia)

Reduz a carga nos back-ends (enviar os cabeccedilalhos

apropriadamente)(sysadmins + desenvolvedores)

Apache KeepAlive

Em muitas distruibuiccedilotildees Linux o Keep-Alive do Apache vem desabilitado por padratildeo

O que forccedila o usuaacuterio abrir uma nova conexatildeo TCP a cada requisiccedilatildeo

Perda de tempo para o servidor e o usuaacuterio (na maioria dos casos)

Habilitar o KeepAlive no httpdconf KeepAlive On

Natildeo manter por muito tempo uma conexatildeo sem atividade

KeepAliveTimeout 3

KeepAlive desabilitado eacute bom para conexotildees uacutenicas de curta duraccedilatildeo Ajax rotineiros mas com intervalos gt 30s

Apache MPM ReceiveBufferSize

Buffer de rede (struct sk_buff) usado pelo kernel para receber o conteuacutedo dos pacotes de rede (no caso o conteuacutedo da requisiccedilatildeo HTTP)

Na maioria absoluta dos casos o tamanho da requisiccedilatildeo eacute ltlt 4 kb (por padratildeo o kernel abre buffers de 87 kb ndash configuraacutevel via sysctl)

Alocaccedilatildeo excessiva de memoacuteria que natildeo seraacute usada

No httpdconf na configuraccedilatildeo do MPM

ReceiveBufferSize 4096

4 kb eacute um valor razoaacutevel para a maioria dos casos

Conteuacutedo em arquivos eacute mais raacutepido do que em servidor SQL

Conteuacutedo que natildeo eacute atualizado frequumlentemente eacute disponibilizado mais raacutepido se armazenado em arquivos estaacuteticos (conexotildees SQL geralmente tem latecircncia alta)

Ex notiacutecias posts de blogs etc

Elementos dinacircmicos (banners imagens comentaacuterios etc) podem ser carregados atraveacutes de Ajax apoacutes terminado o carregamento do conteuacutedo principal

Exemplo WP-Cache (plugin Wordpress)

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Front-End Cache

Cache de objetos em memoacuteria RAM (baixa latecircncia)

Reduz a carga nos back-ends (enviar os cabeccedilalhos

apropriadamente)(sysadmins + desenvolvedores)

Apache KeepAlive

Em muitas distruibuiccedilotildees Linux o Keep-Alive do Apache vem desabilitado por padratildeo

O que forccedila o usuaacuterio abrir uma nova conexatildeo TCP a cada requisiccedilatildeo

Perda de tempo para o servidor e o usuaacuterio (na maioria dos casos)

Habilitar o KeepAlive no httpdconf KeepAlive On

Natildeo manter por muito tempo uma conexatildeo sem atividade

KeepAliveTimeout 3

KeepAlive desabilitado eacute bom para conexotildees uacutenicas de curta duraccedilatildeo Ajax rotineiros mas com intervalos gt 30s

Apache MPM ReceiveBufferSize

Buffer de rede (struct sk_buff) usado pelo kernel para receber o conteuacutedo dos pacotes de rede (no caso o conteuacutedo da requisiccedilatildeo HTTP)

Na maioria absoluta dos casos o tamanho da requisiccedilatildeo eacute ltlt 4 kb (por padratildeo o kernel abre buffers de 87 kb ndash configuraacutevel via sysctl)

Alocaccedilatildeo excessiva de memoacuteria que natildeo seraacute usada

No httpdconf na configuraccedilatildeo do MPM

ReceiveBufferSize 4096

4 kb eacute um valor razoaacutevel para a maioria dos casos

Conteuacutedo em arquivos eacute mais raacutepido do que em servidor SQL

Conteuacutedo que natildeo eacute atualizado frequumlentemente eacute disponibilizado mais raacutepido se armazenado em arquivos estaacuteticos (conexotildees SQL geralmente tem latecircncia alta)

Ex notiacutecias posts de blogs etc

Elementos dinacircmicos (banners imagens comentaacuterios etc) podem ser carregados atraveacutes de Ajax apoacutes terminado o carregamento do conteuacutedo principal

Exemplo WP-Cache (plugin Wordpress)

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Apache KeepAlive

Em muitas distruibuiccedilotildees Linux o Keep-Alive do Apache vem desabilitado por padratildeo

O que forccedila o usuaacuterio abrir uma nova conexatildeo TCP a cada requisiccedilatildeo

Perda de tempo para o servidor e o usuaacuterio (na maioria dos casos)

Habilitar o KeepAlive no httpdconf KeepAlive On

Natildeo manter por muito tempo uma conexatildeo sem atividade

KeepAliveTimeout 3

KeepAlive desabilitado eacute bom para conexotildees uacutenicas de curta duraccedilatildeo Ajax rotineiros mas com intervalos gt 30s

Apache MPM ReceiveBufferSize

Buffer de rede (struct sk_buff) usado pelo kernel para receber o conteuacutedo dos pacotes de rede (no caso o conteuacutedo da requisiccedilatildeo HTTP)

Na maioria absoluta dos casos o tamanho da requisiccedilatildeo eacute ltlt 4 kb (por padratildeo o kernel abre buffers de 87 kb ndash configuraacutevel via sysctl)

Alocaccedilatildeo excessiva de memoacuteria que natildeo seraacute usada

No httpdconf na configuraccedilatildeo do MPM

ReceiveBufferSize 4096

4 kb eacute um valor razoaacutevel para a maioria dos casos

Conteuacutedo em arquivos eacute mais raacutepido do que em servidor SQL

Conteuacutedo que natildeo eacute atualizado frequumlentemente eacute disponibilizado mais raacutepido se armazenado em arquivos estaacuteticos (conexotildees SQL geralmente tem latecircncia alta)

Ex notiacutecias posts de blogs etc

Elementos dinacircmicos (banners imagens comentaacuterios etc) podem ser carregados atraveacutes de Ajax apoacutes terminado o carregamento do conteuacutedo principal

Exemplo WP-Cache (plugin Wordpress)

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Apache MPM ReceiveBufferSize

Buffer de rede (struct sk_buff) usado pelo kernel para receber o conteuacutedo dos pacotes de rede (no caso o conteuacutedo da requisiccedilatildeo HTTP)

Na maioria absoluta dos casos o tamanho da requisiccedilatildeo eacute ltlt 4 kb (por padratildeo o kernel abre buffers de 87 kb ndash configuraacutevel via sysctl)

Alocaccedilatildeo excessiva de memoacuteria que natildeo seraacute usada

No httpdconf na configuraccedilatildeo do MPM

ReceiveBufferSize 4096

4 kb eacute um valor razoaacutevel para a maioria dos casos

Conteuacutedo em arquivos eacute mais raacutepido do que em servidor SQL

Conteuacutedo que natildeo eacute atualizado frequumlentemente eacute disponibilizado mais raacutepido se armazenado em arquivos estaacuteticos (conexotildees SQL geralmente tem latecircncia alta)

Ex notiacutecias posts de blogs etc

Elementos dinacircmicos (banners imagens comentaacuterios etc) podem ser carregados atraveacutes de Ajax apoacutes terminado o carregamento do conteuacutedo principal

Exemplo WP-Cache (plugin Wordpress)

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Conteuacutedo em arquivos eacute mais raacutepido do que em servidor SQL

Conteuacutedo que natildeo eacute atualizado frequumlentemente eacute disponibilizado mais raacutepido se armazenado em arquivos estaacuteticos (conexotildees SQL geralmente tem latecircncia alta)

Ex notiacutecias posts de blogs etc

Elementos dinacircmicos (banners imagens comentaacuterios etc) podem ser carregados atraveacutes de Ajax apoacutes terminado o carregamento do conteuacutedo principal

Exemplo WP-Cache (plugin Wordpress)

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Cache em Memoacuteria (paacuteginas dinacircmicas)

Paacuteginas que necessitam ser dinacircmicas e tem um elevado nuacutemero de acessos podem ter parte do conteuacutedo armazenado temporariamente em bancos de dados na memoacuteria

Exemplos memcached redis

Satildeo softwares de banco de dados key-value que tem latecircncia de acesso muito baixa

Podem ser usados para armazenar informaccedilotildees acessadas frequumlentemente

Dados da sessatildeo do usuaacuterio

Top 20 notiacutecias mais acessadas etc

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Resumo

Reduzir o nuacutemero de requisiccedilotildees HTTP

Reduzir o tempo que o usuaacuterio fica conectado ao servidor

Fazer primeiro as requisiccedilotildees necessaacuterias para desenhar a paacutegina

Distribuir as requisiccedilotildees entre vaacuterios servidores

Existe uma infinidade de teacutecnicas pra atingir cada objetivo em front-end e back-end

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

Ferramentas para mensurar

hping (conectividade)

wbox (tempo de conectividade + alguns cabecalhos)

httperf (faz muitas requisicoes e testa a capacidade do site de responder)

YSlow (verifica o conteuacutedo do site quanto as boas praacuteticas de cache reducatildeo de componentes externos etc)

Tamper data (extensatildeo do Firefox)

munin ndash detecta gargalhos das interrupcotildees de hardware (placa de rede IO disco etc)

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31

FIM

Perguntas

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5
• Slide 6
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31