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

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

3ab1d4a265ad9289afe10956a78271df?s=47 Amanda Vilela
December 14, 2019
Programming
1
160

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

Talk apresentada no JS Day Recife 2019

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

December 14, 2019
Tweet

More Decks by Amanda Vilela

See All by Amanda Vilela
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
38
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
14
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
29
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
33
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
35
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
74
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
34
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
1
39
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
1
37

Other Decks in Programming

See All in Programming
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
210
8983704dd55e6dbd15b012f744b86927?s=48 adachi
0
340
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
0
270
33b8caffacdb02e62cd9141a8aeb35aa?s=48 tanakahiroki1
0
430
C400a6dc29b681f0284fd33c468e396e?s=48 shimotaroo
0
140
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
290
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
420
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
PRO
2
2.7k
B61a8b5e5ce71ea4796afaea614bbb19?s=48 nein37
1
1.4k
52dd8c5774366205f72a1644172b7423?s=48 shohata
0
120
D964b48ba3c3366cc967250087401257?s=48 deors
0
180
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
1
120

Featured

See All Featured
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
7
600
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
410k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
30
5.4k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.4k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
308
33k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
249
22k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
800

Transcript

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

  2. Amanda Vilela Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas

    comunidades de Sorocaba. • amandavilela.com • @amandavilela___ Oi :) 2

  3. Importância da performance

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

  5. Como melhorar a performance?

  6. None
  7. None

  8. First Contentful Paint (FCP)

  9. Time To Interactive (TTI)

  10. None

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

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

  13. None

  14. Minifique o código

  15. None

  16. - 12,4 KB

  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

  18. Revise a necessidade de certas libs

  19. None
  20. None
  21. None

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

  23. None
  24. None
  25. None

  26. - 7,5 KB

  27. None
  28. None

  29. - 43,3 KB

  30. None
  31. None
  32. None

  33. Remova imagens desnecessárias

  34. None

  35. Otimize as imagens que restarem

  36. None
  37. None
  38. None
  39. None

  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

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

  42. Imagens responsivas

  43. Antes: Depois:

  44. 2. Use Lazy Load

  45. First-View e o Above the Fold

  46. None
  47. None
  48. None

  49. Cuidado com o reflow!

  50. None
  51. None
  52. None
  53. None

  54. 3. Evite carregar a fonte no CSS

  55. None
  56. None
  57. None

  58. Self host para melhor performance

  59. None

  60. 4. Reduza a quantidade de requests

  61. None

  62. CSS Inline

  63. sim, CSS Inline

  64. Above the Fold

  65. None
  66. None

  67. - 44,1 KB Antes: Depois:

  68. Cuidado com o tamanho do DOM!

  69. 5. Ative o GZip

  70. None

  71. 6. Reduza os scripts bloqueantes

  72. Uma tag <script> que: • Está no <head> do documento;

    • Não tem um atributo defer; • Não tem um atributo async;

  73. Carregamento assíncrono de CSS

  74. None

  75. 7. Lazy load no JS

  76. None
  77. None
  78. None
  79. None

  80. Comparação

  81. 8. Adapte com base na qualidade da rede

  82. None
  83. None
  84. None
  85. None

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

  87. HTTP cache headers

  88. None

  89. Service Worker

  90. None
  91. None

  92. 10. Código transpilado e mais bytes

  93. None
  94. None

  95. 11. Use HTTP2

  96. Monitorando Métricas

  97. None
  98. None
  99. None
  100. None
  101. None
  102. None

  103. Performance Budgets

  104. budget.json

  105. None
  106. None
  107. None

  108. Lighthouse Bot

  109. None

  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/

  111. Slides: speakerdeck.com/amandavilela

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

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

  114. Obrigada!