Como Perder Peso (no browser)

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

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. hoje vamos falar de
   performance
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. • Economizar 1kb significa:
    • Em 60 segundos = 3.4GB
    Fonte: http://jaydson.org/talks/x-web-performance/
    

    View Slide

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

    View Slide

18. • Economizar 1kb significa:
    • Em 1 dia = 4.2TB
    Fonte: http://jaydson.org/talks/x-web-performance/
    

    View Slide

19. View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

23. html
    CSS
    imagens
    servidor
    jquery
    JS
    

    View Slide

24. View Slide

25. html
    

    View Slide

26. #27
    evite
    códigos
    inline
    

    View Slide

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

    View Slide

28. externo
    #27
    
    + organização
    - tamanho
    + cache
    

    View Slide

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

    View Slide

30. #26
    
    
    
    
    Browser Diet
    
    
    
    

    View Slide

31. #26
    
    Lorem ipsum dolor sit amet.
    
    
    
    

    View Slide

32. comprima
    seu html
    #25
    

    View Slide

33. normal
    #25
    Lorem ipsum dolor sit amet.
    
    
    
    
    
    
    

    View Slide

34. #25
    Lorem ipsum dolor sit amet.
    p>href="#">
    li>
    comprimido
    

    View Slide

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

    View Slide

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

    View Slide

37. #24
    experimente
    async & defer
    

    View Slide

38. #24
    script normal
    
    

    View Slide

39. #24
    script async
    
    +ie10
    

    View Slide

40. #24
    script defer
    
    +ie5
    

    View Slide

41. CSS
    

    View Slide

42. comprima
    seu css
    #23
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. http://www.cssminifier.com/
    

    View Slide

47. https://github.com/jzaefferer/grunt-css
    

    View Slide

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

    View Slide

49. #22
    
    
    
    
    
    vs
    

    View Slide

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

    View Slide

51. http://www.cssminifier.com/
    

    View Slide

52. https://github.com/jzaefferer/grunt-css
    

    View Slide

53. não use
    seletor
    universal
    #21
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. prefira
    ao
    @import
    #20
    

    View Slide

58. 
    #20
    vs
    @import url('style.css');
    

    View Slide

59. pense e
    repense seu
    key selector
    #19
    

    View Slide

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

    View Slide

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
    

    View Slide

62. JAVASCRIPT
    

    View Slide

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

    View Slide

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

    View Slide

65. guarde o
    tamanho
    do array
    #17
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

70. evite o
    document.write
    #16
    

    View Slide

71. html5 boilerplate
    
    window.jQuery || document.write('<script<br/>src="js/vendor/jquery-1.9.0.min.js"><\/<br/>script>')
    #16
    

    View Slide

72. minimize
    repaints
    e reflows
    #15
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. comprima
    seu js
    #14
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. #13
    
    
    
    
    
    vs
    

    View Slide

85. http://gruntjs.com/
    

    View Slide

86. jquery
    

    View Slide

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

    View Slide

88. 
    #12
    vs
    
    

    View Slide

89. seletores
    #11
    

    View Slide

90. #11
    find
    children
    .class
    #id
    context
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. abuse do
    encadeamento
    #10
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

104. não use
     jquery
     #8
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

109. imagens
     

     View Slide

110. css sprites
     #7
     

     View Slide

111. imagem #7
     

     View Slide

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;
     }
     

     View Slide

113. http://wearekiss.com/spritepad
     

     View Slide

114. http://www.spritecow.com/
     

     View Slide

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

     View Slide

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

     View Slide

117. html
     #6
     src="logo.jpg" alt="Logo">
     

     View Slide

118. otimize as
     imagens
     #5
     

     View Slide

119. #5
     lossless
     png 8
     png 24
     jpg
     gif
     

     View Slide

120. servidor
     

     View Slide

121. habilite o
     caches dos
     arquivos
     #4
     

     View Slide

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"
     

     View Slide

123. gzip
     #3
     

     View Slide

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

     View Slide

125. bonus
     ^
     

     View Slide

126. ferramentas
     de análise
     #2
     

     View Slide

127. http://yslow.org/
     

     View Slide

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

     View Slide

129. http://www.webpagetest.org/
     

     View Slide

130. performance deve ser
     pensada no projeto
     como um todo
     

     View Slide

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

     View Slide

132. lembre-se
     

     View Slide

133. o preguiçoso
     trabalha dobrado
     

     View Slide

134. quero aprender mais,
     aonde eu vou?
     

     View Slide

135. View Slide

136. View Slide

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

     View Slide

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

     View Slide

139. nada em
     português?
     

     View Slide

140. e se a gente
     juntasse...
     

     View Slide

141. renato mangini
     - google
     

     View Slide

142. sérgio lopes
     - caelum
     

     View Slide

143. mike taylor
     - opera
     

     View Slide

144. marcel duran
     - twitter
     

     View Slide

145. “Pica voando das galáxias
     criado em cativeiro”
     browserdiet.com/pt
     

     View Slide

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

     View Slide

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

     View Slide

148. 2º Encontro - 2011
     

     View Slide

149. fim.
     zenorocha.com
     browserdiet.com
     #1
     

     View Slide