Como Perder Peso (no browser)

1. hoje vamos falar de performance

2. “Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders

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

4. • Economizar 1kb signiﬁca: • Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/

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

6. • Economizar 1kb signiﬁca: • Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/

7. • + 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/

8. • 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/

9. • 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/

10. html jquery imagens JS CSS servidor

11. html

12. #27 evite códigos inline

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

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

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

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

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

18. comprima seu html #25

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

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

21. https://code.google.com/p/htmlcompressor/

22. https://github.com/jney/grunt-htmlcompressor

23. #24 experimente async & defer

24. #24 script normal <script src="example.js"></script>

25. #24 script async <script async src="example.js"></script> +ie10

26. #24 script defer <script defer src="example.js"></script> +ie5

27. CSS

28. comprima seu css #23

29. normal #23 .center { width: 960px; margin: 0 auto; } /* --- Structure --- */ .intro { margin: 100px; }

30. comprimido #23 .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}

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

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

33. https://github.com/jzaeﬀerer/grunt-css

34. combine vários arquivos em um só #22

35. #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">

36. http://gruntjs.com/

37. #21 não use seletor universal

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

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

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

41. #20 prefira <link> ao @import

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

43. pense e repense seu key selector #19

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

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

46. JAVASCRIPT

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

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

49. guarde o tamanho do array #17

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

51. 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 }

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

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

54. #16 evite o document.write

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

56. minimize repaints e reflows #15

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

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

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

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

61. comprima seu js #14

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

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

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

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

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

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

68. #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>

69. http://gruntjs.com/

70. jquery

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

72. #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>

73. seletores #11

74. find #id children .class context #11

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

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

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

78. abuse do encadeamento #10

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

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

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

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

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

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

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

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

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

88. #8 não use jquery

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

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

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

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

93. imagens

94. css sprites #7

95. imagem #7

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

97. http://wearekiss.com/spritepad

98. http://www.spritecow.com/

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

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

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

102. otimize as imagens #5

103. lossless jpg png 8 png 24 gif #5

104. servidor

105. habilite o caches dos arquivos #4

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

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

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

109. ^ bonus

110. ferramentas de análise #2

111. http://yslow.org/

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

113. http://www.webpagetest.org/

114. performance deve ser pensada no projeto como um todo

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

116. lembre-se

117. o preguiçoso trabalha dobrado

118. quero aprender mais, aonde eu vou?

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

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

121. nada em português?

122. e se a gente juntasse...

123. renato mangini - google

124. sérgio lopes - caelum

125. mike taylor - opera

126. marcel duran - twitter

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

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

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

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

131. 2º Encontro - 2011

132. fim. zenorocha.com #1 browserdiet.com

Como Perder Peso (no browser)

Esté a ler uma amostra.

Confira estes a seguir

Como Perder Peso (no browser)

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Semelhante a Como Perder Peso (no browser) (20)

Mais de Zeno Rocha (6)

Mais recentes (20)