Como Perder Peso (no browser)

4,188
-1

Published on

Rio.JS Conf - 09/03/13 - Rio de Janeiro, Brasil

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,188
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Como Perder Peso (no browser)

  1. 1. hoje vamos falar deperformance
  2. 2. “Otimize a performance dofront-end primeiro, é onde80/90% do tempo de respostaao usuário é gasto.” - Steve Souders
  3. 3. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
  4. 4. • Economizar 1kb significa:• Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
  5. 5. • Economizar 1kb significa:• Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
  6. 6. • Economizar 1kb significa:• Em 1 dia = 4.2TB Fonte: http://jaydson.org/talks/x-web-performance/
  7. 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. 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. 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. 10. html jquery imagens JSCSS servidor
  11. 11. html
  12. 12. #27evitecódigosinline
  13. 13. inline<style>.center { width: 960px; margin: 0 auto;}</style>- requisições+tamanho #27
  14. 14. externo<link rel="stylesheet" href="main.css">+ organização- tamanho+ cache #27
  15. 15. estilos no topo,scripts no rodapé #26
  16. 16. #26<!doctype html><html><head> <meta charset="UTF-8"> <title>Browser Diet</title> <!-- CSS --> <link rel="stylesheet" href="style.css"></head>
  17. 17. #26<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script></body></html>
  18. 18. comprimaseu html#25
  19. 19. 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>
  20. 20. comprimido #25<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><ahref="#"></a></li><li><a href="#"></a></li></ul>
  21. 21. https://code.google.com/p/htmlcompressor/
  22. 22. https://github.com/jney/grunt-htmlcompressor
  23. 23. #24 experimenteasync & defer
  24. 24. #24 script normal<script src="example.js"></script>
  25. 25. #24 script async<script async src="example.js"></script>+ie10
  26. 26. #24 script defer<script defer src="example.js"></script>+ie5
  27. 27. CSS
  28. 28. comprimaseu css#23
  29. 29. normal #23.center { width: 960px; margin: 0 auto;}/* --- Structure --- */.intro { margin: 100px; }
  30. 30. comprimido #23.center{width:960px;margin:0auto;}.intro{margin:100px;position:relative;}
  31. 31. http://yui.github.com/yuicompressor/
  32. 32. http://www.cssminifier.com/
  33. 33. https://github.com/jzaefferer/grunt-css
  34. 34. combine váriosarquivosem um só#22
  35. 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. 36. http://gruntjs.com/
  37. 37. #21 não use seletoruniversal
  38. 38. #21* { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0;}
  39. 39. http://meyerweb.com/eric/tools/css/reset/
  40. 40. http://necolas.github.com/normalize.css/
  41. 41. #20prefira<link> ao@import
  42. 42. #20<link rel="stylesheet" href="style.css"> vs @import url(style.css);
  43. 43. pense erepense seukey selector #19
  44. 44. key selector >> aheader nav ul li a {} #19
  45. 45. key selectorheader 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. 46. JAVASCRIPT
  47. 47. códigos de #18terceiros?sempreassíncronos
  48. 48. async #18var script = document.createElement(script), scripts =document.getElementsByTagName(script)[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script,
  49. 49. guarde otamanhodo array #17
  50. 50. ruim... #17var arr = new Array(1000);for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000}
  51. 51. bom! #17var arr = new Array(1000);for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado}
  52. 52. http://jsperf.com/browser-diet-cache-array-length
  53. 53. http://jsperf.com/browser-diet-cache-array-length
  54. 54. #16 evite o document.write
  55. 55. html5 boilerplate #16<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script>window.jQuery || document.write(<scriptsrc="js/vendor/jquery-1.9.0.min.js"></script>)</script>
  56. 56. minimizerepaintse reflows#15
  57. 57. ruim...var myList = document.getElementById("myList");for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>";}#15
  58. 58. bom!var myList = "";for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>";}document.getElementById("myList").innerHTML =myList;#15
  59. 59. http://jsperf.com/browser-diet-dom-manipulation
  60. 60. http://jsperf.com/browser-diet-dom-manipulation
  61. 61. comprimaseu js#14
  62. 62. normal #14BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } };};
  63. 63. comprimido #14BrowserDiet.app=function(){return{bar:function(){}}};
  64. 64. http://yui.github.com/yuicompressor/
  65. 65. https://developers.google.com/closure/compiler/?hl=pt
  66. 66. https://github.com/mishoo/UglifyJS
  67. 67. combine váriosarquivosem um só#13
  68. 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. 69. http://gruntjs.com/
  70. 70. jquery
  71. 71. #12use semprea últimaversão
  72. 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. 73. seletores #11
  74. 74. find #id children.class context #11
  75. 75. id é mais rapido$("#foo"); #11
  76. 76. http://jsperf.com/browser-diet-jquery-selectors
  77. 77. http://jsperf.com/browser-diet-jquery-selectors
  78. 78. abuse doencadeamento#10
  79. 79. não encadeando$("#object").addClass("foo");$("#object").css("border-color","#f0f");$("#object").width(200);$("#object").removeClass("bar");#10
  80. 80. encadeando$("#object").addClass("foo").css("border-color","#ccc").width(200).addClass("bar");#10
  81. 81. http://jsperf.com/browser-diet-chaining
  82. 82. http://jsperf.com/browser-diet-chaining
  83. 83. #9use forao invésde each
  84. 84. while reverso for $.each for in #9
  85. 85. for é mais rapidofor ( var i = 0, len = a.length; i < len; i++ ) { e = a[i];} #9
  86. 86. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
  87. 87. http://jsperf.com/browser-diet-jquery-each-vs-for-loop
  88. 88. #8não use jquery
  89. 89. jquery$(a).on(click, function() { console.log( $(this).attr(id) );}); #8
  90. 90. js puro$(a).on(click, function() { console.log( this.id );}); #8
  91. 91. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
  92. 92. http://jsperf.com/browser-diet-this-attr-id-vs-this-id
  93. 93. imagens
  94. 94. css sprites#7
  95. 95. imagem #7
  96. 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. 97. http://wearekiss.com/spritepad
  98. 98. http://www.spritecow.com/
  99. 99. http://compass-style.org/help/tutorials/spriting/
  100. 100. não escaleas imagensdireto nocódigo #6
  101. 101. html<img width="100" height="100"src="logo.jpg" alt="Logo"> #6
  102. 102. otimize asimagens#5
  103. 103. lossless jpg png 8png 24 gif #5
  104. 104. servidor
  105. 105. habilite ocaches dosarquivos#4
  106. 106. .htaccess #4ExpiresActive OnExpiresByType 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. 107. gzip#3 #4 - Habilite o cache dos arquivos
  108. 108. .htaccess #3AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript
  109. 109. ^bonus
  110. 110. ferramentasde análise#2
  111. 111. http://yslow.org/
  112. 112. https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
  113. 113. http://www.webpagetest.org/
  114. 114. performance deve ser pensada no projeto como um todo
  115. 115. e não só deixar pratestar no finalzinho
  116. 116. lembre-se
  117. 117. o preguiçosotrabalha dobrado
  118. 118. quero aprender mais,aonde eu vou?
  119. 119. https://developers.google.com/speed/docs/best-practices/rules_intro
  120. 120. http://developer.yahoo.com/performance/rules.html
  121. 121. nada emportuguês?
  122. 122. e se a gentejuntasse...
  123. 123. renato mangini- google
  124. 124. sérgio lopes - caelum
  125. 125. mike taylor- opera
  126. 126. marcel duran - twitter
  127. 127. “Pica voando das galáxiascriado em cativeiro” browserdiet.com
  128. 128. http://github.com/zenorocha/browser-diet
  129. 129. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  130. 130. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  131. 131. 2º Encontro - 2011
  132. 132. fim. zenorocha.com#1 browserdiet.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×