Como Perder Peso (no browser)

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 signiﬁca: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/

17. • Economizar 1kb signiﬁca: • Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/

18. • Economizar 1kb signiﬁca: • 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 jquery imagens JS CSS servidor

25. html

26. #27 evite códigos inline

27. inline <style> .center { width: 960px; margin: 0 auto; } </style> - requisições +tamanho #27

28. externo <link rel="stylesheet" href="main.css"> + organização - tamanho + cache #27

29. estilos no topo, scripts no rodapé #26

30. #26 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Browser Diet</title>  <link rel="stylesheet" href="style.css"> </head>

31. #26 <body> <p>Lorem ipsum dolor sit amet.</p>  <script src="script.js"></script> </body> </html>

32. comprima seu html #25

33. normal #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>

34. comprimido #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>

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. comprimido #23 .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}

45. http://yui.github.com/yuicompressor/

46. http://www.cssminiﬁer.com/

47. https://github.com/jzaeﬀerer/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"> vs <link rel="stylesheet" href="component.css"> <link rel="stylesheet" href="all.css">

50. http://gruntjs.com/

51. #21 não use seletor universal

52. #21 * { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0; }

53. http://meyerweb.com/eric/tools/css/reset/

54. http://necolas.github.com/normalize.css/

55. #20 prefira <link> ao @import

56. #20 <link rel="stylesheet" href="style.css"> vs @import url('style.css');

57. pense e repense seu key selector #19

58. key selector >> a header nav ul li a {} #19

59. 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

60. JAVASCRIPT

61. códigos de #18 terceiros? sempre assíncronos

62. async #18 var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script,

63. guarde o tamanho do array #17

64. ruim... #17 var arr = new Array(1000); for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000 }

65. bom! #17 var arr = new Array(1000); for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado }

66. http://jsperf.com/browser-diet-cache-array-length

67. http://jsperf.com/browser-diet-cache-array-length

68. #16 evite o document.write

69. html5 boilerplate #16 <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>

70. minimize repaints e reflows #15

71. ruim... var myList = document.getElementById("myList"); for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>"; } #15

72. bom! var myList = ""; for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>"; } document.getElementById("myList").innerHTML = myList; #15

73. http://jsperf.com/browser-diet-dom-manipulation

74. http://jsperf.com/browser-diet-dom-manipulation

75. comprima seu js #14

76. normal #14 BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } }; };

77. comprimido #14 BrowserDiet.app=function() {return{bar:function(){}}};

78. http://yui.github.com/yuicompressor/

79. https://developers.google.com/closure/compiler/?hl=pt

80. https://github.com/mishoo/UglifyJS

81. combine vários arquivos em um só #13

82. #13 <script src="navbar.js"></script> <script src="component.js"></script> <script src="page.js"></script> vs <script src="framework.js"></script> <script src="all.js"></script>

83. http://gruntjs.com/

84. jquery

85. #12 use sempre a última versão

86. #12 <script src="http://code.jquery.com/jquery-latest.js"></script> vs <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

87. seletores #11

88. find #id children .class context #11

89. id é mais rapido $("#foo"); #11

90. http://jsperf.com/browser-diet-jquery-selectors

91. http://jsperf.com/browser-diet-jquery-selectors

92. abuse do encadeamento #10

93. não encadeando $("#object").addClass("foo"); $("#object").css("border-color","#f0f"); $("#object").width(200); $("#object").removeClass("bar"); #10

94. encadeando $("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar"); #10

95. http://jsperf.com/browser-diet-chaining

96. http://jsperf.com/browser-diet-chaining

97. #9 use for ao invés de each

98. while reverso for $.each for in #9

99. for é mais rapido for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; } #9

100. http://jsperf.com/browser-diet-jquery-each-vs-for-loop

101. http://jsperf.com/browser-diet-jquery-each-vs-for-loop

102. #8 não use jquery

103. jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8

104. js puro $('a').on('click', function() { console.log( this.id ); }); #8

105. http://jsperf.com/browser-diet-this-attr-id-vs-this-id

106. http://jsperf.com/browser-diet-this-attr-id-vs-this-id

107. imagens

108. css sprites #7

109. imagem #7

110. css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; } .icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }

111. http://wearekiss.com/spritepad

112. http://www.spritecow.com/

113. http://compass-style.org/help/tutorials/spriting/

114. não escale as imagens direto no código #6

115. html <img width="100" height="100" src="logo.jpg" alt="Logo"> #6

116. otimize as imagens #5

117. lossless jpg png 8 png 24 gif #5

118. servidor

119. habilite o caches dos arquivos #4

120. .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"

121. gzip #3 #4 - Habilite o cache dos arquivos

122. .htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript

123. ^ bonus

124. ferramentas de análise #2

125. http://yslow.org/

126. https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR

127. http://www.webpagetest.org/

128. performance deve ser pensada no projeto como um todo

129. e não só deixar pra testar no finalzinho

130. lembre-se

131. o preguiçoso trabalha dobrado

132. quero aprender mais, aonde eu vou?

135. https://developers.google.com/speed/docs/best-practices/rules_intro

136. http://developer.yahoo.com/performance/rules.html

137. nada em português?

138. e se a gente juntasse...

139. renato mangini - google

140. sérgio lopes - caelum

141. mike taylor - opera

142. marcel duran - twitter

143. “Pica voando das galáxias criado em cativeiro” browserdiet.com

144. http://github.com/zenorocha/browser-diet

145. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna

146. “Pica voando das galáxias criado em cativeiro” - Bernard de Luna

147. 2º Encontro - 2011

148. fim. zenorocha.com #1 browserdiet.com

Como Perder Peso (no browser)

Como Perder Peso (no browser)

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Como Perder Peso (no browser)

Similar to Como Perder Peso (no browser)(20)

More from Zeno Rocha

More from Zeno Rocha(6)

Recently uploaded

Recently uploaded(20)

Como Perder Peso (no browser)