A maior parte do tempo gasto para abrir uma página normalmente não é no servidor, mas no cliente, no navegador.
Este é uma revisão sobre o porquê disto, e como podemos agir de forma ativa para melhorar drasticamente a performance de aplicações web.
27. #1 Diminuir o número de requisições
#2 Utilizar um CDN
#3 Evitar src ou href vazios
#4 Adicionar header Expires
#5 Habilitar Gzip
#6 Colocar CSS no topo
#7 Colocar JS no final
#8 Evitar expressões CSS
#9 Deixar JS e CSS em arquivos externos
#10 Reduzir Lookups DNS
#11 Minificar JS e CSS
#12 Evitar redirects
#13 Remover scripts duplicados
#14 Configurar ETags
#15 Permitir cache para Ajax
#16 Usar GET para requisições Ajax
#17 Reduzir o número de elementos DOM
#18 Evitar 404
#19 Reduzir o tamanho dos cookies
#20 Usar domínios sem cookie para componentes
#21 Evitar filtros
#22 Não escalar imagens no HTML
#23 Ter um favicon.ico pequeno e cacheável
Monday, October 3, 11
30. #1 Diminuir o número de requisições
Combine arquivos
JS CSS
Monday, October 3, 11
31. #1 Diminuir o número de requisições
Sirva 1 arquivo js e 1
arquivo css em produção.
Arquivos separados
ajudam a organizar em
Jammit, Asset Packager, Rails 3.1 asset pipeline, etc. desenvolvimento. Mas o
usuário não precisa disso.
Monday, October 3, 11
32. #1 Diminuir o número de requisições
Monday, October 3, 11
33. #1 Diminuir o número de requisições
Use CSS Sprites
Combine imagens pequenas
em uma única imagem maior.
Monday, October 3, 11
34. #2 Utilizar um CDN
Distribua seus assets em
diferentes lugares, mais
próximos do usuário.
Akamai Technologies, EdgeCast, level3
Monday, October 3, 11
35. #2 Utilizar um CDN
Para aplicações realmente
grandes! $$
Monday, October 3, 11
36. #3 Evitar src ou href vazios
<img src="">
Browsers constumam fazer
uma nova requisição para a
página atual.
Isso está definido em RFC, então em teoria
os browsers estão fazendo o correto.
Browsers novos ignoram isso.
HTML 5 adicionou na RFC instrução para
ignorar src/href vazios.
Monday, October 3, 11
37. #3 Evitar src ou href vazios
E não precisamos de
requisições que não valem nada.
Monday, October 3, 11
38. #4 Adicionar header Expires
Diga para seu navegador
fazer cache de assets por
algum tempo.
Monday, October 3, 11
39. #4 Adicionar header Expires
Mas não eternamente!
1 mês ~ 1 ano
Monday, October 3, 11
40. #4 Adicionar header Expires
Apache => mod_expires
<IfModule mod_expires.c>
<FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
Monday, October 3, 11
47. #6 Colocar CSS no topo
CSS é carregado e
interpretado mais rápido.
<!DOCTYPE html>
Mais feedback visual
<html> para o usuário!
<head>
<meta charset="UTF-8">
<title>Example App</title>
<link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />
Monday, October 3, 11
48. #7 Colocar JS no final
Scripts bloqueiam
downloads paralelos e
renderização da página.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Monday, October 3, 11
49. #8 Evitar expressões CSS
Expressões são executadas a
cada render, resize, scroll, ou
movimento do mouse!
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Monday, October 3, 11
50. #9 Deixar JS e CSS em arquivos externos
Arquivos externos podem
ser cacheados.
Js/css inline, não.
Remover do html
também diminui o
tamanho final da página.
Monday, October 3, 11
51. #10 Reduzir Lookups DNS
Muitos hosts diferentes que
não estão cacheados,
significam mais tempo para
lookup de DNS.
Navegadores possuem
cache de DNS, e cada
navegador expira isso em
um tempo diferente.
100~120 ms por lookup
de DNS
Monday, October 3, 11
52. #10 Reduzir Lookups DNS
3 Lookups de DNS
foo.com/image1.png
bar.com/image2.png
baz.com/image3.png
Monday, October 3, 11
53. #11 Minificar JS e CSS
Elimine tudo que não é
necessário dos arquivos:
espaços, comentários, etc.
Diferença entre
minificar e obfuscar?
Monday, October 3, 11
54. #11 Minificar JS e CSS
20 ~ 25% de ganho no
tamanho dos arquivos.
Monday, October 3, 11
55. #11 Minificar JS e CSS
Mas não faça isso manualmente!
Existem diversas ferramentas
para ajudar nesse processo.
Closure Compiler,YUI Compressor, UglifyJS, Packer, JSMin, CSSMin, etc...
Monday, October 3, 11
56. #12 Evitar redirects
HTTP status 301 e 302 são
extremamente custosos, e
fazem o usuário esperar mais.
Monday, October 3, 11
57. #13 Remover scripts duplicados
Duplo trabalho? Quem gosta.
É mais comum do que
imaginamos.
Um estudo do Yahoo
mostrou que 2 dos 10
sites mais acessados dos
EUA possuía scripts
duplicados.
Monday, October 3, 11
58. #14 Configurar ETags
Cache, cache, cache!
Configuração de servidor
Apache / Nginx
ETag: "10c24bc-4ab-457e1c1f"
Monday, October 3, 11
59. #14 Configurar ETags
Requisição 1 Requisição 1
200 OK 200 OK + ETag
Requisição 2 +
Requisição 2 ETag em cache
200 OK 304 Not modifed
Padrão Otimizado
Ser vidor envia header ETag junto com o componente requisitado.
Navegador requisita o componente novamente, enviando ETag em cache.
Ser vidor retorna 304 se a ETag do componente não mudou.
If-None-Match
Monday, October 3, 11
60. #15 Permitir cache para Ajax
Assíncrono != Instântaneo
Tenha os mesmos cuidados com
cache em requisições Ajax.
Monday, October 3, 11
61. #16 Usar GET para requisições Ajax
POST usa 2 etapas: 1 para enviar os
cabeçalhos, outro para enviar o body.
Não quer dizer que não é
para usar POST. Quer
dizer: não use POST por
usar.
Monday, October 3, 11
62. #17 Reduzir o número de elementos DOM
Muitos elementos significam uma
página complexa de renderizar, e mais
lenta para acessar usando javascript.
document.getElementsByTagName('*').length
Monday, October 3, 11
63. #17 Reduzir o número de elementos DOM
Cuidado com
<div></div>
para montar seu layout!
Monday, October 3, 11
64. #18 Evitar 404
Fazer uma requisição para receber
404 é jogar tempo fora.
Isso é muito comum com assets!
Monday, October 3, 11
65. #19 Reduzir o tamanho dos cookies
Cookies são enviados em TODOS os
requests, inclusive para assets.
Quanto menor o tamanho dos
cookies, melhor!
Monday, October 3, 11
66. #20 Usar domínios sem cookie para componentes
Assets não precisam de cookies. Eles
são tráfego de rede desnecessário.
Monday, October 3, 11
67. #20 Usar domínios sem cookie para componentes
Site => www.example.org
(www seta cookies)
Assets => static.example.org
(cookie-free)
Monday, October 3, 11
68. #20 Usar domínios sem cookie para componentes
Site => example.org
(seta cookies)
Assets => static.example.org
(seta cookies - já era)
Use outro host diferente
static-example.org
Monday, October 3, 11
69. #21 Evitar filtros
AlphaImageLoader para corrigir
transparência do IE < 7.
Esqueça!
Monday, October 3, 11
70. #22 Não escalar imagens no HTML
Imagem maior == download maior.
Escalar no navegador == mais
processamento para renderizar.
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
Monday, October 3, 11
71. #23 Ter um favicon.ico pequeno e cacheável
É um mal necessário, então é melhor
não responder com 404.
Monday, October 3, 11
72. #23 Ter um favicon.ico pequeno e cacheável
Mantenha pequeno, abaixo de 1kb.
Define um header Expires para alguns
meses no futuro.
Não coloque muito tempo
de Expires, pois o seu
nome não pode ser
mudado para expirar o
cache.
Monday, October 3, 11
73. E agora, quem poderá nos
ajudar?
Monday, October 3, 11
74. YSlow
http://developer.yahoo.com/yslow/
Monday, October 3, 11
75. Page Speed
http://code.google.com/speed/page-speed/
Monday, October 3, 11
76. Smush.it
http://www.smushit.com/ysmush.it/
Monday, October 3, 11
77. Sprite.me
http://spriteme.org/
Monday, October 3, 11
78. Sucesso!
Hora de voltar para aquelas
merecidas férias...
Monday, October 3, 11