Perceived Performance

Perceived Performance

393a8afb36c128e762e5130549d22dbe?s=128

Fernanda Bernardo

July 14, 2018
Tweet

Transcript

  1. Perceived Performance Fernanda Bernardo

  2. O que é Perceived Performance?

  3. O que é Perceived Performance?

  4. async PWA lazy loading HTTP2 fonts AMP prefetch CDN .min

    critical rendering path images
  5. DESEMPENHO!

  6. O que é Perceived Performance?

  7. None
  8. Nossa Fê! Você está em TODOS os eventos

  9. FERNANDA BERNARDO Engenheira de Software @Elo7 @help4papers Mentora http://fernandabernardo.com.br @Feh_Bernardo

  10. Nossa Fê! Você está em TODOS os eventos

  11. 3 palestras 2014

  12. None
  13. https://www.youtube.com/watch?v=PB_825k8dI4

  14. 3 palestras 2014 1 palestra 2015 5 palestras 2016 16

    palestras 2017 11ª palestra 2018 + 4 palestras
  15. None
  16. 4 anos ~33 palestras

  17. ÓBVIO que eu não participei de todos os eventos

  18. None
  19. None
  20. None
  21. PARECER mais rápido

  22. Porque nos preocupamos tanto com performance?

  23. None
  24. “1 second of load lag time would cost Amazon $1.6

    billion in sales per year” - Amazon “An extra 0.5 seconds in each search page generation would cause traffic to drop by 20%” - Google
  25. Demora apenas 3s para um usuário abandonar o seu site!

  26. Demora apenas 3s para um usuário abandonar o seu site!

  27. None
  28. O que é Perceived Performance?

  29. None
  30. Tempo é algo legal!

  31. 1987 2017

  32. None
  33. tempo relógio vs tempo da mente

  34. None
  35. None
  36. None
  37. JUST NOTICEABLE DIFFERENCE diferença apenas perceptível

  38. “ Time differences of 20% or less are imperceptible -Steve

    Show, Microsoft
  39. Como percebemos o tempo?

  40. ATIVO e PASSIVO

  41. None
  42. “ Humans tend to overestimate passive time by 36%. -Richard

    Larson, MIT
  43. None
  44. None
  45. EVITE O ESTADO PASSIVO

  46. None
  47. None
  48. Evite usar o spinner

  49. None
  50. None
  51. avisa o usuário que ele tem que esperar coloca em

    estado passivo SPINNER
  52. None
  53. None
  54. não podemos colocar em todas as situações #1

  55. 0,2s 1s 2s instantâneo (0,1 - 0,2s) imediato (0,5-1s) ponto

    de abandono (>2s) Jakob Nielsen, 1993
  56. não dá noção de tempo #2

  57. None
  58. Como fazer o usuário sofrer menos com o tempo?

  59. Feedback Imediato

  60. SEJA OTIMISTA

  61. None
  62. REQUEST REQUEST

  63. REQUEST REQUEST

  64. Usuário demora ~1s para entrar em um estado passivo

  65. Reagir o quanto antes!

  66. REQUEST ABRE MODAL

  67. PREVER A AÇÃO DO USUÁRIO

  68. REQUEST ABRE MODAL

  69. desaceleração https://github.com/SamKnows/futurelink

  70. None
  71. paginação infinita

  72. None
  73. reação rápida…

  74. click: button up vs mousedown: button down

  75. CLICA AQUI! mousedown click

  76. mousedown click CLICA AQUI!

  77. mousedown te dá uma vantagem de 100-150ms

  78. aproveitando os botões ainda…

  79. O ESTADO :active

  80. None
  81. Lições aprendidas

  82. técnicas para lidar com feedback imediato

  83. None
  84. usuário desiste do seu site depois de 3s de espera

  85. None
  86. O que eu uso no lugar?

  87. PROGRESS BA R

  88. MENTIRA!

  89. None
  90. None
  91. None
  92. None
  93. None
  94. mantem o usuário OCUPADO

  95. None
  96. None
  97. None
  98. None
  99. os jogos fazem isso muito bem!

  100. None
  101. None
  102. None
  103. Precisamos manter a atenção do usuário e dar a sensação

    de um feedback mais rápido O que aprendemos?
  104. WARNING

  105. None
  106. None
  107. None
  108. None
  109. None
  110. Portanto, como tudo na vida…

  111. Tome uma decisão! Teste! Valide! Recomece o ciclo!

  112. https://www.youtube.com/watch?v=USH4iPQ44LQ http://blog.teamtreehouse.com/perceived-performance http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/ https://www.nngroup.com/articles/website-response-times/ https://www.keycdn.com/blog/perceived-performance/ https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/ https://blog.marvelapp.com/a-designers-guide-to-perceived-performance/ https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a Referências

  113. http://fernandabernardo.com.br @Feh_Bernardo

  114. bit.ly/front-basico 40% desconto