Como Perder Peso (no browser)

Presented at Rio.JS Conf
March 9, 2013
Rio de Janeiro, Brazil

9. hoje vamos falar de performance
13. “Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders
14. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
16. • Economizar 1kb significa: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
17. • Economizar 1kb significa: • Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
18. • Economizar 1kb significa: • Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/
20. • + 15.000.000 de acessos por dia • De 3mb para 267kb • De 7.5s para 4.3s Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
21. • Diminuir 3.2s resultou em: • Redução de custo em servidores de R$ 16.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
22. • Diminuir 3.2s resultou em: • Aumento de receita de R$ 1.000.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
23. html CSS imagens servidor jquery JS
25. html
26. #27 evite códigos inline
27. inline #27 <style> .center { width: 960px; margin: 0 auto; } </style> - requisições +tamanho
28. externo #27 <link rel="stylesheet" href="main.css"> + organização - tamanho + cache
29. #26 estilos no topo, scripts no rodapé
30. #26 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Browser Diet</title> <!-- CSS --> <link rel="stylesheet" href="style.css"> </head>
31. #26 <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> </body> </html>
32. comprima seu html #25
33. normal #25 <p>Lorem ipsum dolor sit amet.</p> <!-- My List --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
34. #25 <p>Lorem ipsum dolor sit amet.</ p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></ li></ul> comprimido
35. https://code.google.com/p/htmlcompressor/
36. https://github.com/jney/grunt-htmlcompressor
37. #24 experimente async & defer
38. #24 script normal <script src="example.js"></script>
39. #24 script async <script async src="example.js"></script> +ie10
40. #24 script defer <script defer src="example.js"></script> +ie5
41. CSS
42. comprima seu css #23
43. normal #23 .center { width: 960px; margin: 0 auto; } /* --- Structure --- */ .intro { margin: 100px; }
44. #23 comprimido .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}
45. http://yui.github.com/yuicompressor/
46. http://www.cssminifier.com/
47. https://github.com/jzaefferer/grunt-css
48. combine vários arquivos em um só #22
49. #22 <link rel="stylesheet" href="structure.css"> <link rel="stylesheet" href="banner.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="component.css"> <link rel="stylesheet" href="all.css"> vs
50. http://yui.github.com/yuicompressor/
51. http://www.cssminifier.com/
52. https://github.com/jzaefferer/grunt-css
53. não use seletor universal #21
54. * { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0; } #21
55. http://meyerweb.com/eric/tools/css/reset/
56. http://necolas.github.com/normalize.css/
57. prefira <link> ao @import #20
58. <link rel="stylesheet" href="style.css"> #20 vs @import url('style.css');
59. pense e repense seu key selector #19
60. key selector >> a header nav ul li a {} #19
61. key selector header nav ul li * { /* Péssimo */ } header nav ul li a { /* Muito Ruim */ } nav a { /* Ruim */ } nav a.nav-link { /* Bom */ } nav .nav-link { /* Ótimo */ } .nav-link { /* Excelente */ } #19
62. JAVASCRIPT
63. códigos de terceiros? sempre assíncronos #18
64. async var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script, #18
65. guarde o tamanho do array #17
66. ruim... var arr = new Array(1000); for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000 } #17
67. bom! var arr = new Array(1000); for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado } #17
68. http://jsperf.com/browser-diet-cache-array-length
69. http://jsperf.com/browser-diet-cache-array-length
70. evite o document.write #16
71. html5 boilerplate <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/ script>')</script> #16
72. minimize repaints e reflows #15
73. ruim... var myList = document.getElementById("myList"); for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>"; } #15
74. var myList = ""; for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>"; } document.getElementById("myList").innerHTML = myList; bom! #15
75. http://jsperf.com/browser-diet-dom-manipulation
76. http://jsperf.com/browser-diet-dom-manipulation
77. comprima seu js #14
78. normal #14 BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } }; };
79. comprimido BrowserDiet.app=function() {return{bar:function(){}}}; #14
80. http://yui.github.com/yuicompressor/
81. https://developers.google.com/closure/compiler/?hl=pt
82. https://github.com/mishoo/UglifyJS
83. combine vários arquivos em um só #13
84. #13 <script src="navbar.js"></script> <script src="component.js"></script> <script src="page.js"></script> <script src="framework.js"></script> <script src="all.js"></script> vs
85. http://gruntjs.com/
86. jquery
87. use sempre a última versão #12
88. <script src="http://code.jquery.com/jquery-latest.js"></script> #12 vs <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
89. seletores #11
90. #11 find children .class #id context
91. #11 $("#foo"); id é mais rapido
92. http://jsperf.com/browser-diet-jquery-selectors
93. http://jsperf.com/browser-diet-jquery-selectors
94. abuse do encadeamento #10
95. não encadeando $("#object").addClass("foo"); $("#object").css("border-color","#f0f"); $("#object").width(200); $("#object").removeClass("bar"); #10
96. encadeando $("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar"); #10
97. http://jsperf.com/browser-diet-chaining
98. http://jsperf.com/browser-diet-chaining
99. use for ao invés de each #9
100. #9 while reverso for $.each for in
101. #9 for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; } for é mais rapido
102. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
103. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
104. não use jquery #8
105. jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8
106. js puro $('a').on('click', function() { console.log( this.id ); }); #8
107. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
108. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
109. imagens
110. css sprites #7
111. imagem #7
112. css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; } .icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }
113. http://wearekiss.com/spritepad
114. http://www.spritecow.com/
115. http://compass-style.org/help/tutorials/spriting/
116. não escale as imagens direto no código #6
117. html #6 <img width="100" height="100" src="logo.jpg" alt="Logo">
118. otimize as imagens #5
119. #5 lossless png 8 png 24 jpg gif
120. servidor
121. habilite o caches dos arquivos #4
122. .htaccess #4 ExpiresActive On ExpiresByType image/gif "access plus 6 months" ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months"
123. gzip #3
124. .htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
125. bonus ^
126. ferramentas de análise #2
127. http://yslow.org/
128. https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
129. http://www.webpagetest.org/
130. performance deve ser pensada no projeto como um todo
131. e não só deixar pra testar no finalzinho
132. lembre-se
133. o preguiçoso trabalha dobrado
134. quero aprender mais, aonde eu vou?
137. https://developers.google.com/speed/docs/best-practices/rules_intro
138. http://developer.yahoo.com/performance/rules.html
139. nada em português?
140. e se a gente juntasse...
141. renato mangini - google
142. sérgio lopes - caelum
143. mike taylor - opera
144. marcel duran - twitter
145. “Pica voando das galáxias criado em cativeiro” browserdiet.com/pt
146. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna
147. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna
148. 2º Encontro - 2011
149. fim. zenorocha.com browserdiet.com #1