Como Perder Peso (no browser)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Como Perder Peso (no browser)

on

  • 4,030 views

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

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

Statistics

Views

Total Views
4,030
Views on SlideShare
3,580
Embed Views
450

Actions

Likes
14
Downloads
36
Comments
0

2 Embeds 450

http://www.jimmyti.com.br 419
http://www.jimmyffw.com 31

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Como Perder Peso (no browser) Presentation Transcript

  • 1. hoje vamos falar deperformance
  • 2. “Otimize a performance dofront-end primeiro, é onde80/90% do tempo de respostaao usuário é gasto.” - Steve Souders
  • 3. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
  • 4. • Economizar 1kb significa:• Em 60 segundos = 3.4GB Fonte: http://jaydson.org/talks/x-web-performance/
  • 5. • Economizar 1kb significa:• Em 1 hora = 180GB Fonte: http://jaydson.org/talks/x-web-performance/
  • 6. • Economizar 1kb significa:• 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 JSCSS servidor
  • 11. html
  • 12. #27evitecódigosinline
  • 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> <!-- CSS --> <link rel="stylesheet" href="style.css"></head>
  • 17. #26<body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script></body></html>
  • 18. comprimaseu html#25
  • 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. 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. https://code.google.com/p/htmlcompressor/
  • 22. https://github.com/jney/grunt-htmlcompressor
  • 23. #24 experimenteasync & 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. comprimaseu css#23
  • 29. normal #23.center { width: 960px; margin: 0 auto;}/* --- Structure --- */.intro { margin: 100px; }
  • 30. comprimido #23.center{width:960px;margin:0auto;}.intro{margin:100px;position:relative;}
  • 31. http://yui.github.com/yuicompressor/
  • 32. http://www.cssminifier.com/
  • 33. https://github.com/jzaefferer/grunt-css
  • 34. combine váriosarquivosem 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 seletoruniversal
  • 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. #20prefira<link> ao@import
  • 42. #20<link rel="stylesheet" href="style.css"> vs @import url(style.css);
  • 43. pense erepense seukey selector #19
  • 44. key selector >> aheader nav ul li a {} #19
  • 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. JAVASCRIPT
  • 47. códigos de #18terceiros?sempreassíncronos
  • 48. async #18var script = document.createElement(script), scripts =document.getElementsByTagName(script)[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script,
  • 49. guarde otamanhodo array #17
  • 50. ruim... #17var arr = new Array(1000);for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000}
  • 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. 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(<scriptsrc="js/vendor/jquery-1.9.0.min.js"></script>)</script>
  • 56. minimizerepaintse 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. comprimaseu js#14
  • 62. normal #14BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } };};
  • 63. comprimido #14BrowserDiet.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áriosarquivosem 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. #12use semprea últimaversã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 doencadeamento#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. #9use forao invésde each
  • 84. while reverso for $.each for in #9
  • 85. for é mais rapidofor ( 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. #8nã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 escaleas imagensdireto nocódigo #6
  • 101. html<img width="100" height="100"src="logo.jpg" alt="Logo"> #6
  • 102. otimize asimagens#5
  • 103. lossless jpg png 8png 24 gif #5
  • 104. servidor
  • 105. habilite ocaches dosarquivos#4
  • 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. gzip#3 #4 - Habilite o cache dos arquivos
  • 108. .htaccess #3AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript
  • 109. ^bonus
  • 110. ferramentasde 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 pratestar no finalzinho
  • 116. lembre-se
  • 117. o preguiçosotrabalha 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 emportuguês?
  • 122. e se a gentejuntasse...
  • 123. renato mangini- google
  • 124. sérgio lopes - caelum
  • 125. mike taylor- opera
  • 126. marcel duran - twitter
  • 127. “Pica voando das galáxiascriado em cativeiro” browserdiet.com
  • 128. http://github.com/zenorocha/browser-diet
  • 129. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  • 130. “Pica voando das galáxiascriado em cativeiro” - Bernard de Luna
  • 131. 2º Encontro - 2011
  • 132. fim. zenorocha.com#1 browserdiet.com