O documento discute a importância de otimizar sites para melhorar o desempenho e aumentar as métricas de negócio. Ele apresenta 7 técnicas para otimizar sites, como colocar JavaScripts no final da página, minificar arquivos, usar sprites de imagem e ferramentas de diagnóstico. Estudos mostram que melhorar a velocidade em 400ms aumenta conversões em 0,6% e que sites lentos reduzem o faturamento em até 4,3%.

2. Como
fabricar
dinheiro:
Otimizações de Sites
e por que isso vai deixá-lo rico

3. Sérgio Lopes
@sergio_caelum
facebook.com/sergio.caelum
sergio.lopes@caelum.com.br

4. Por que você deve
otimizar seu Site?

5. esperar
é
muito
muito
irritante!

6. esperar
é
muito
muito
irritante!

7. http://googleresearch.blogspot.com/2009/06/speed-matters.html

8. http://googleresearch.blogspot.com/2009/06/speed-matters.html

9. http://velocityconference.blip.tv/file/2279751/

10. http://velocityconference.blip.tv/file/2279751/

11. http://velocityconference.blip.tv/file/2279751/

12. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

13. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

14. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

18. Tempo médio: 2 seg Tempo médio: 6 seg

19. Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb

20. Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb
# Requests: 12 # Requests: 42

21. Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb
# Requests: 12 # Requests: 42
Nota YSlow: 100 Nota YSlow: 67

22. Time on Site: 3min 17s Time on Site: 2min 33s

23. Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75

24. Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Conversion Rate:1.84%

25. Pessoas ficam 21%
menos tempo no site
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Conversion Rate:1.84%

26. Pessoas ficam 21%
menos tempo no site
Time on Site: 3min 17s Pessoas veem 28%
Time on Site: 2min 33s
menos páginas
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Conversion Rate:1.84%

27. Pessoas ficam 21%
menos tempo no site
Time on Site: 3min 17s Pessoas veem 28%
Time on Site: 2min 33s
menos páginas
Average Pageview: 3.32 Average Pageview: 2.75
18% menos
Conversion Rate: 2.17% Conversion Rate:1.84%
contatos
enviados

28. $ $

29. Como não perder
dinheiro?

30. #1
Coloque os JavaScripts no fim da página

35. Progressive render

36. #2
Coloque os CSS no topo da página

37. Problema do “Flash Screen”

40. #3
Diminua o número de requests

41. Junte vários JS em um único arquivo
(dinamicamente! sem POG!)

42. Junte vários JS em um único arquivo
(dinamicamente! sem POG!)

43. Junte vários CSS em um único arquivo
(dinamicamente! sem POG!)

44. Junte vários CSS em um único arquivo
(dinamicamente! sem POG!)

45. Use CSS Sprites

46. Use CSS Sprites

49. Spriteme.org

50. #4
Configure os headers corretamente

51. GET /css/estilo.css HTTP/1.1
Host: www.caelum.com.br
HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 100
#conteudo {
font-family: 'Arial';
}

52. GET /css/estilo.css HTTP/1.1
Host: www.caelum.com.br
HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 100
Expires: Sat, 10 Jul 2011 14:23:47 GMT
#conteudo {
font-family: 'Arial';
}

53. HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 100
Expires: Sat, 10 Jul 2011 14:23:47 GMT
Date-Modified: Sat, 2 Jul 2011 11:23:47 GMT
#conteudo {
font-family: 'Arial';
}

54. GET /css/estilo.css HTTP/1.1
Host: www.caelum.com.br
If-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMT
HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 100
Expires: Sat, 10 Jul 2011 14:23:47 GMT
Date-Modified: Sat, 2 Jul 2011 11:23:47 GMT
#conteudo {
font-family: 'Arial';
}

55. GET /css/estilo.css HTTP/1.1
Host: www.caelum.com.br
If-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMT
HTTP/1.1 304 OK

56. #5
Minifique o JS, CSS e HTML e habilite GZIP

66. 27.4 kb YUI Compressor pra JS e CSS 20.1 kb
22.9 kb Google Closure Compiler pra JS 9.54 kb
54.4 kb HTML Compressor pra HTML 36.1 kb

67. 27.4 kb YUI Compressor pra JS e CSS 20.1 kb
Cacheie!
22.9 kb Ou faça em
Google Closure Compiler pra JS 9.54 kb
build time!
54.4 kb HTML Compressor pra HTML 36.1 kb

68. Habilite GZIP
Tamanho sem GZIP:
219.5 kb
Tamanho com GZIP:
102.3 kb

69. #6
Otimize suas imagens

70. httparchive.org

71. Lossless compression

73. 13kb
7.9kb

76. Lossy compression

78. 64kb
qualidade 0.5
38kb

80. Tipos de arquivo

81. PNG
JPG
GIF

82. PNG Alpha
JPG
GIF

83. PNG Alpha
JPG Lossy
GIF

84. PNG Alpha
JPG Lossy
GIF Animações

85. PNG8
PNG Alpha
PNG32
JPG Lossy
GIF Animações

86. #7
Use ferramentas e automatize

87. diagnóstico • Yahoo! YSlow
• Google PageSpeed
• webpagetest.com

88. diagnóstico • Yahoo! YSlow
• Google PageSpeed
• webpagetest.com
ferramentas
modconcat, modpagespeed, Minify, PHP
Speedy, Site SpeedUp,YUI Compressor,
Google Closure, UglifyJS, Smush.it,
HTML Compressor, SpriteMe, ImageMagick

89. diagnóstico • Yahoo! YSlow
• Google PageSpeed
• webpagetest.com
ferramentas
modconcat, modpagespeed, Minify, PHP
Speedy, Site SpeedUp,YUI Compressor,
Google Closure, UglifyJS, Smush.it,
HTML Compressor, SpriteMe, ImageMagick
referências ‣ YSlow: developer.yahoo.com/performance
‣ Google Speed: code.google.com/speed
‣ O’Reilly Velocity Conference
‣ bookofspeed.com

90. 400 ms a mais diminuíram
as buscas em 0.6%
2 seg a mais diminuíram
faturamento em 4.3%
67 no YSlow diminuiu em 18%
o número de contatos enviados

91. 400 ms a mais diminuíram
as buscas em 0.6%
2 seg a mais diminuíram
faturamento em 4.3%
67 no YSlow diminuiu em 18%
o número de contatos enviados
Otimizar o response-time é obrigatório

92. Obrigado!
@sergio_caelum
facebook.com/sergio.caelum
sergio.lopes@caelum.com.br