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?

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. ‘

98. None
99. None

100. os jogos fazem isso muito bem!

101. None
102. None
103. None

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

106. None
107. None
108. None
109. None
110. None

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