Hacking the Human Perception

Hacking you say? Yes, I do, but this type of hacking has nothing to do with hooking in Matrix style or surfing through The Gibson at Ellingson Mineral Company. Nope, this type of hacking involves how we as developers, create the illusion of fast load times for our Web applications. Performance is gaining much visibility in the industry and catering to the needs of the user, there are many things we can do to facilitate that need. This talk will focus on ways we can make things appear to be faster than they are and ways to avoid having to play Houdini entirely.

Transcript

1. 1 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Hacking the Human Perception Chris DeMars • @saltnburnem https://pixabay.com/en/brain-icon-human-background-idea-1710293/
2. 2 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Chris DeMars Front-End Developer
3. 3 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Google Developer Expert Microsoft MVP International Speaker Founder of Vuetroit Co-organizer of the Ann Arbor A11y Group Host of Tales From the Script Tattoos & Horror That’s me!
4. 4 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Twitter: @TaleFTScript | Site: tftscript.com
5. 5 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Why Are We Here Chris?
6. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Let’s Talk!
7. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk!
8. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte
9. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint
10. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive
11. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded
12. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance
13. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS
14. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens
15. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders
16. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders d.) Background Color/Image Replacement
17. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing & Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders d.) Background Color/Image Replacement e.) Fun Distractions
18. 7 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
19. 7 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
20. 8 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
21. 8 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
22. 9 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
23. 9 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
24. 10 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Performance?
25. 11 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Visibility of System Status https://www.nngroup.com/articles/ten-usability-heuristics/
26. 11 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Visibility of System Status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. https://www.nngroup.com/articles/ten-usability-heuristics/
27. 12 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Fast?
28. 12 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Fast? ! Quick Desktop Load
29. 12 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Fast? ! Quick Desktop Load ! Quick Mobile Load
30. 12 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Fast? ! Quick Desktop Load ! Quick Mobile Load ! Time
31. 13 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
32. 13 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
33. 14 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
34. 14 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
35. 15 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Minimal Requests?
36. 15 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Minimal Requests? ! How many?
37. 15 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Minimal Requests? ! How many? ! What does that mean?
38. 16 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load Time?
39. 16 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load Time? ! Desktop
40. 16 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load Time? ! Desktop ! 3G
41. 16 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load Time? ! Desktop ! 3G ! 4G
42. 16 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load Time? ! Desktop ! 3G ! 4G ! 2G
43. 17 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://bit.ly/2Uc47xa
44. 18 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Performance
45. 18 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Performance on the front end # #
46. 19 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Addy Osmani @addyosmani #PerfMatters
47. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
48. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Is it happening?
49. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Is it happening? 2.) Is it useful?
50. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Is it happening? 2.) Is it useful? 3.) Is it useable?
51. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Is it happening? 2.) Is it useful? 3.) Is it useable? 4.) Is it delightful?
52. 21 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Testing & Audits
53. 22 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Lighthouse
54. 23 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
55. 23 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
56. 24 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC WebPageTest
57. 25 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
58. 25 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
59. 26 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
60. 27 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
61. 28 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
62. 29 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
63. 30 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Chrome DevTools
64. 31 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
65. 31 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
66. 32 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
67. 32 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
68. 33 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Paint
69. 34 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://bit.ly/2JGiLZe
70. 35 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Paint & Time to First Contentful Paint
71. 36 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Paint
72. The point where the browser renders anything to the screen. 36 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Paint
73. Time to First Contentful Paint 37 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
74. Time to First Contentful Paint The point where the browser renders the first bit of content from the DOM. 37 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
75. 38 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC First Paint 1.4s First Contentful Paint 1.4s
76. 38 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC First Paint 1.4s First Contentful Paint 1.4s
77. 39 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
78. 40 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Meaningful Paint
79. 41 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://bit.ly/2HVcwvP
80. 42 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Byte
81. 43 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
82. 43 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
83. 44 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://www.keycdn.com/support/what-is-ttfb/
84. 45 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC TTFB 230ms
85. 46 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to Interactive
86. 47 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
87. 47 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
88. 48 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Load & DOMContentLoaded
89. Load 49 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
90. Load All resources have loaded. 49 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC (images, CSS, JS, etc.)
91. DOMContent Loaded 50 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
92. The HTML is fully loaded as well as the DOM tree, external resources like images and CSS may not be loaded yet. DOMContent Loaded 50 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
93. 51 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC • This event typically marks when both the DOM and CSSOM are ready. • The render tree can be built. • If no blocking JS than it will fire immediately after DOMInteractive.
94. 52 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Why measure DOMContentLoaded?
95. 52 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Critical Rendering Path
96. 53 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://bit.ly/2JazYc6
97. 54 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Perceived Performance
98. 55 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Perceived performance is a measure of how quick a user thinks your site is, and that’s often more important than its true speed. - Matt West
99. 56 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Critical CSS
100. 57 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://www.smashingmagazine.com/2015/08/understanding-critical-css/
101. 58 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://www.smashingmagazine.com/2015/08/understanding-critical-css/
102. 59 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
103. 59 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Penthouse criticalCSS Critical
104. 60 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Skeleton Screens
105. 61 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC "A skeleton screen is essentially a blank version of a page into which information is gradually loaded." - Luke Wroblewski
106. 62 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC "Users don't care about performance stats in terminal, they do care about what they see in front of them.” - Callum Hart
107. 63 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
108. 64 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
109. 65 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
110. 66 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
111. 67 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Spinners
112. 67 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Spinners
113. 68 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://uxplanet.org/how-to-make-users-think-your-app-loads-faster-24052fe307bf
114. 68 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://uxplanet.org/how-to-make-users-think-your-app-loads-faster-24052fe307bf
115. 69 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC “Design for operational transparency by providing progress-UX that’s robust and meaningful.” - Nick Babich
116. 70 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://www.mobify.com/insights/ designing-appearance-speed/ Great Info!
117. 71 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Fun Distractions
118. 72 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Offer distractions so users don’t get bored!
119. 72 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Offer distractions so users don’t get bored!
120. 73 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Background Color & Image Replacement
121. 74 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Harry Roberts @csswizardry
122. 75 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Image Color Background Image
123. 76 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1. Open image in Photoshop 2. Filter >> Blur >> Average 3. Use eyedropper to sample block of color 4. Apply color as background color https://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/
124. 77 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Gradients and Background Colors
125. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
126. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
127. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
128. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
129. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
130. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
131. 78 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC https://goo.gl/AWSJ6
132. 79 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Set Gradient in CSS
133. 79 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
134. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we learn?
135. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we learn? Performance matters ✅
136. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we learn? Performance matters ✅ How to test performance on the front end ✅
137. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we learn? Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure ✅
138. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we learn? Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure ✅ Perceived performance ✅
139. 81 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
140. 81 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
141. 82 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Resources https://goo.gl/dqxsXi
142. 83 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Jeremy Wagner @malchata
143. 83 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Jeremy Wagner @malchata
144. 84 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Responsible JavaScript: Part 1 https://bit.ly/2uwST7U
145. Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Chris DeMars • @saltnburnem Thanks!