Perceived Performance

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?
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
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
16. 4 anos ~33 palestras
17. ÓBVIO que eu não participei de todos os eventos
21. PARECER mais rápido
22. Porque nos preocupamos tanto com performance?
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!
28. O que é Perceived Performance?
30. Tempo é algo legal!
31. 1987 2017
33. tempo relógio vs tempo da mente
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
42. “ Humans tend to overestimate passive time by 36%. -Richard Larson, MIT
45. EVITE O ESTADO PASSIVO
48. Evite usar o spinner
51. avisa o usuário que ele tem que esperar coloca em estado passivo SPINNER
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
58. Como fazer o usuário sofrer menos com o tempo?
59. Feedback Imediato
60. SEJA OTIMISTA
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
71. paginação infinita
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
81. Lições aprendidas
82. técnicas para lidar com feedback imediato
84. usuário desiste do seu site depois de 3s de espera
86. O que eu uso no lugar?
87. PROGRESS BA R
88. MENTIRA!
94. mantem o usuário OCUPADO
97. ‘
100. os jogos fazem isso muito bem!
104. Precisamos manter a atenção do usuário e dar a sensação de um feedback mais rápido O que aprendemos?
105. WARNING
111. Portanto, como tudo na vida…
112. Tome uma decisão! Teste! Valide! Recomece o ciclo!
113. 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
114. http://fernandabernardo.com.br @Feh_Bernardo
115. bit.ly/front-basico 40% desconto