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

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

December 14, 2019
Tweet

Transcript

  1. 2.

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

    comunidades de Sorocaba. • amandavilela.com • @amandavilela___ Oi :) 2
  2. 6.
  3. 7.
  4. 10.
  5. 13.
  6. 15.
  7. 16.
  8. 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
  9. 19.
  10. 20.
  11. 21.
  12. 23.
  13. 24.
  14. 25.
  15. 26.
  16. 27.
  17. 28.
  18. 29.
  19. 30.
  20. 31.
  21. 32.
  22. 34.
  23. 36.
  24. 37.
  25. 38.
  26. 39.
  27. 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
  28. 46.
  29. 47.
  30. 48.
  31. 50.
  32. 51.
  33. 52.
  34. 53.
  35. 55.
  36. 56.
  37. 57.
  38. 59.
  39. 61.
  40. 65.
  41. 66.
  42. 70.
  43. 72.

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

    • Não tem um atributo defer; • Não tem um atributo async;
  44. 74.
  45. 76.
  46. 77.
  47. 78.
  48. 79.
  49. 82.
  50. 83.
  51. 84.
  52. 85.
  53. 88.
  54. 90.
  55. 91.
  56. 93.
  57. 94.
  58. 97.
  59. 98.
  60. 99.
  61. 100.
  62. 101.
  63. 102.
  64. 105.
  65. 106.
  66. 107.
  67. 109.
  68. 114.