Como Perder Peso (no browser)

Como Perder Peso (no browser)

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

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

March 09, 2013
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. hoje vamos falar de performance

  10. None
  11. None
  12. None
  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

  15. None
  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/
  19. None
  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

  24. None
  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?

  135. None
  136. None
  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