Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como Perder Peso (no browser)

Como Perder Peso (no browser)

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

Zeno Rocha

March 09, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Technology

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