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

Web Performance: Não deixe o usuário desistir do seu site

Web Performance: Não deixe o usuário desistir do seu site

Talk apresentada no JS Day Recife 2019

Amanda Vilela

December 14, 2019
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

Transcript

  1. Web Performance
    Não deixe o usuário desistir do seu site

    View Slide

  2. Amanda Vilela
    Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas
    comunidades de Sorocaba.
    ● amandavilela.com
    ● @amandavilela___
    Oi :)
    2

    View Slide

  3. Importância da performance

    View Slide

  4. Usuários não gostam de coisas lentas

    View Slide

  5. Como melhorar a performance?

    View Slide

  6. View Slide

  7. View Slide

  8. First Contentful Paint (FCP)

    View Slide

  9. Time To Interactive (TTI)

    View Slide

  10. View Slide

  11. Carregar o mínimo e mostrar algo
    relevante para o usuário

    View Slide

  12. 1. Remova o que não tem
    importância

    View Slide

  13. View Slide

  14. Minifique o código

    View Slide

  15. View Slide

  16. - 12,4 KB

    View Slide

  17. ● Minifier: An online tool minifies JavaScript or CSS via copy and paste.
    ● Grunt: An NPM minification package that integrates into the Grunt workflow.
    ● Gulp: An NPM minification package that integrates into the Gulp workflow.
    ● Frameworks: Separe o modo desenvolvimento de produção

    View Slide

  18. Revise a necessidade de certas
    libs

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Só envie o código que o usuário
    precisa

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. - 7,5 KB

    View Slide

  27. View Slide

  28. View Slide

  29. - 43,3 KB

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Remova imagens desnecessárias

    View Slide

  34. View Slide

  35. Otimize as imagens que restarem

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. ● SVG no que for possível, mas não esqueça de otimizar também: svgomg
    ● Substitua GIFs por vídeos: WebM e MP4, ffmpeg

    View Slide

  41. Não redimensione imagens no
    HTML nem no CSS

    View Slide

  42. Imagens responsivas

    View Slide

  43. Antes:
    Depois:

    View Slide

  44. 2. Use Lazy Load

    View Slide

  45. First-View e o Above the Fold

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. Cuidado com o reflow!

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. 3. Evite carregar a fonte no CSS

    View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. Self host para melhor
    performance

    View Slide

  59. View Slide

  60. 4. Reduza a quantidade de
    requests

    View Slide

  61. View Slide

  62. CSS Inline

    View Slide

  63. sim, CSS Inline

    View Slide

  64. Above the Fold

    View Slide

  65. View Slide

  66. View Slide

  67. - 44,1 KB
    Antes:
    Depois:

    View Slide

  68. Cuidado com o tamanho do DOM!

    View Slide

  69. 5. Ative o GZip

    View Slide

  70. View Slide

  71. 6. Reduza os scripts bloqueantes

    View Slide

  72. Uma tag que:<br/>● Está no <head> do documento;<br/>● Não tem um atributo defer;<br/>● Não tem um atributo async;<br/>

    View Slide

  73. Carregamento assíncrono de CSS

    View Slide

  74. View Slide

  75. 7. Lazy load no JS

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. Comparação

    View Slide

  81. 8. Adapte com base
    na qualidade da rede

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. 9. Faça cache dos recursos
    estáticos

    View Slide

  87. HTTP cache headers

    View Slide

  88. View Slide

  89. Service Worker

    View Slide

  90. View Slide

  91. View Slide

  92. 10. Código transpilado e mais
    bytes

    View Slide

  93. View Slide

  94. View Slide

  95. 11. Use HTTP2

    View Slide

  96. Monitorando Métricas

    View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. Performance Budgets

    View Slide

  104. budget.json

    View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. Lighthouse Bot

    View Slide

  109. View Slide

  110. Referências
    ● https://www.awwwards.com/brain-food-perceived-performance
    ● https://developers.google.com/web/fundamentals/performance/why-performance-matters
    ● https://developers.google.com/web/tools/chrome-devtools/coverage
    ● https://developers.google.com/web/tools/chrome-devtools/evaluate-performance
    ● https://web.dev/fast/
    ● https://www.filamentgroup.com/lab/inlining-cache.html
    ● https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/

    View Slide

  111. Slides: speakerdeck.com/amandavilela

    View Slide

  112. Pull Request em: https://github.com/JSdayBR/recife

    View Slide

  113. http://bit.ly/toptal-amanda

    View Slide

  114. Obrigada!

    View Slide