The Illusion of Speed

or: How to improve the speed of your site without making it faster.

Transcript

1. The Illusion of Speed http://paulbakaus.com | @pbakaus The Illusion of Speed or: How you can fix the speed of your site without making it faster.
2. The Illusion of Speed http://paulbakaus.com | @pbakaus
3. The Illusion of Speed http://paulbakaus.com | @pbakaus #perfmatters 3
4. Performance ∝ Engagement
7. New = Amazing! Smartphone Buyer
9. The Illusion of Speed http://paulbakaus.com | @pbakaus Squeeze out that last millisecond! 9
10. The Illusion of Speed http://paulbakaus.com | @pbakaus 10
11. Perceived Performance > Actual Performance
12. The Illusion of Speed http://paulbakaus.com | @pbakaus ? 1. Time to first paint (automatic) 2. Time to first useful paint (manual) 3. Time to first viewport (semi-manual) 4. Time to interactive 5. Page load
13. The Illusion of Speed http://paulbakaus.com | @pbakaus Illusion of Motion 13 The Illusion of Motion https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/
14. The Illusion of Speed http://paulbakaus.com | @pbakaus Why Performance Matters by Denys Mishunov https://goo.gl/X4SxHH
15. The Illusion of Speed http://paulbakaus.com | @pbakaus 15 Actual time Perceived time
16. The Illusion of Speed http://paulbakaus.com | @pbakaus –Apple “The perception of performance is just as effective as actual performance in many cases.”
17. The Illusion of Speed http://paulbakaus.com | @pbakaus Perceived Reality Past, Present and Future
18. The Illusion of Speed http://paulbakaus.com | @pbakaus Live in the moment.
19. The Illusion of Speed http://paulbakaus.com | @pbakaus Live in the moment.
20. The Illusion of Speed http://paulbakaus.com | @pbakaus –David Eagleman “we are all living in the past: Our consciousness lags 80 milliseconds behind actual events. When you think an event occurs it has already happened,”
21. The Illusion of Speed http://paulbakaus.com | @pbakaus Live in the moment that was 80ms ago.
22. Yes, our brains have a time buffer!
23. 30m
24. 80ms vs. 81ms
25. https://www.flickr.com/photos/rednuht/479370088/
26. The Illusion of Speed http://paulbakaus.com | @pbakaus Never let the memories of the past define your view of the future.
27. The Illusion of Speed http://paulbakaus.com | @pbakaus Never let the memories of the past define your view of the future.
28. The Illusion of Speed http://paulbakaus.com | @pbakaus No future without the past. 26 Our whole concept of future is dependent upon being able to draw from memory and visualize the past. People who cannot recall long term memories cannot envision the future.
29. The Illusion of Speed http://paulbakaus.com | @pbakaus How you remember it 27 How it actually was
30. The Illusion of Speed http://paulbakaus.com | @pbakaus Remembered as long. 28 Remembered as short. Lots of moments in a short activity One long continuous activity
31. The Illusion of Speed http://paulbakaus.com | @pbakaus 29 We suck at being a clock. ≠
32. The Illusion of Speed http://paulbakaus.com | @pbakaus 30 60fps 100ms 1s
33. The Illusion of Speed http://paulbakaus.com | @pbakaus < 200ms < 1s < 5s < 10s Instant Immediate Part of user flow Attention span
34. The Illusion of Speed http://paulbakaus.com | @pbakaus < 200ms < 1s < 5s Instant Immediate Part of user flow Attention span < 8.25s!
35. The Illusion of Speed http://paulbakaus.com | @pbakaus 32 Web performance developer
36. The Illusion of Speed http://paulbakaus.com | @pbakaus 33 Don’t worry, it get’s worse!
37. The Illusion of Speed http://paulbakaus.com | @pbakaus 1 second load time 34
38. 02/28/2014
39. 02/28/2014
40. 02/28/2014
41. 02/28/2014
42. The Illusion of Speed http://paulbakaus.com | @pbakaus Train station 10s Context Wait time + = Home console 1m Context Wait time + =
43. The Illusion of Speed http://paulbakaus.com | @pbakaus 40 Context matters.
44. The Illusion of Speed http://paulbakaus.com | @pbakaus “It takes 5 seconds to switch channels on my TV.” 41
45. The Illusion of Speed http://paulbakaus.com | @pbakaus “This guy made me a burrito in 5 seconds.”
46. 02/28/2014 Wait, what? Too fast? https://www.flickr.com/photos/cliche/3388550873/
47. The Illusion of Speed http://paulbakaus.com | @pbakaus 44 More: http://goo.gl/527lnx Sometimes speed decreases the value of a service.
48. 02/28/2014 Wait for it..
49. 02/28/2014 Longer wait times can build up anticipation. More: http://goo.gl/Gxffj7
50. The Illusion of Speed http://paulbakaus.com | @pbakaus 47 Picture via https://www.flickr.com/photos/jeepersmedia/16528506652
51. The Illusion of Speed http://paulbakaus.com | @pbakaus 48
52. The Illusion of Speed http://paulbakaus.com | @pbakaus 1. “If something is fast, it must be easy” 2. “If something is easy, it must be cheap”
53. The Illusion of Speed http://paulbakaus.com | @pbakaus
54. The Illusion of Speed http://paulbakaus.com | @pbakaus Active vs. passive waiting 51
55. The Illusion of Speed http://paulbakaus.com | @pbakaus Time is perceived as much longer in the passive phase. 52 on average, people in passive wait mode overestimate their waiting time by about 36%
56. The Illusion of Speed http://paulbakaus.com | @pbakaus One way to improved perception:
 Shorten the passive phase, and lengthen the active phase. 53
57. The Illusion of Speed http://paulbakaus.com | @pbakaus Preemptive start - Start work before the user realizes it Total duration of task / wait time Perceived by user
58. The Illusion of Speed http://paulbakaus.com | @pbakaus Early completion - Show stuff before all of it is ready Total duration of task / wait time Perceived by user
59. The Illusion of Speed http://paulbakaus.com | @pbakaus • Preemptive start • Early completion • Optimistic UI – Showing an action as completed that really hasn’t. • Precognition – Visualising the future before it happens. • Visual illusion – sometimes enough to change time perception
60. 02/28/2014 Enough theory.
61. 58 Early completion Progressive images
62. 59 Early completion Static layout IN AMP) AMP always knows how big any element on the page will be.
63. 60 Early completion Youtube Video isn’t loaded, but starts playback right away
64. 61 Preemptive start Multi-page forms Email Password Preload all of this (minus user data)! While user spends time here…
65. 62 Preemptive Start Viewport Prefetching AMP can preload the first viewport (for multiple AMP docs at once)! This is why the Google Search AMP Carousel feels instant.
66. 63 Preemptive Start Resource Hints
67. 64 Optimistic UI Instagram Instagram always pretends to work. Clicking the like button always “works”, even when you’re temporarily offline or a server request is pending. Instagram just gives you a promise that what you intended to do will happen, eventually.
68. 02/28/2014
69. 66 Precognition Time to Glass No matter what, touch events are always delayed due to hardware limitations (sensor, display refresh).
70. 67 Absolute best potential result: 16ms lag Precognition Time to Glass
71. 68 see also http://www.idownloadblog.com/2015/06/15/ios-9-predictive-touch/ Best potential result: 0ms lag! Precognition Time to Glass
72. Visual Illusion Easing http://easings.net/
73. Visual Illusion Easing http://easings.net/
74. 02/28/2014 Some situations are trickier than others.
75. The Illusion of Speed http://paulbakaus.com | @pbakaus Browsers only unload the current page after the new page has started rendering. 71 More: http://www.stevesouders.com/ blog/2012/12/03/the-perception-of-speed/
76. The Illusion of Speed http://paulbakaus.com | @pbakaus A.It makes the load of the next page feel faster than it actually is B.But regresses responsiveness, in that we don’t get an immediate reaction upon link click
77. The Illusion of Speed http://paulbakaus.com | @pbakaus But when we reverse, we reverse the benefits and regressions! 73
78. The Illusion of Speed http://paulbakaus.com | @pbakaus Ugh.
79. The Illusion of Speed http://paulbakaus.com | @pbakaus Potential solution • Animate seamlessly from previous page to new page • Originally proposed as Navigation Transitions in 2014, but no progress has been made (help me revive it!)
80. The Illusion of Speed http://paulbakaus.com | @pbakaus Potential solution • Animate seamlessly from previous page to new page • Originally proposed as Navigation Transitions in 2014, but no progress has been made (help me revive it!)
81. The Illusion of Speed http://paulbakaus.com | @pbakaus 76
82. The Illusion of Speed http://paulbakaus.com | @pbakaus 76
83. The Illusion of Speed http://paulbakaus.com | @pbakaus 77 A.Smart skeleton UIs B.Viewport pre-rendering C.Service Worker caching D.Seamless transitions
84. The Illusion of Speed http://paulbakaus.com | @pbakaus 77 A.Smart skeleton UIs B.Viewport pre-rendering C.Service Worker caching D.Seamless transitions
86. The Illusion of Speed http://paulbakaus.com | @pbakaus Nobody cares how fast your site is. Just how fast it feels.
87. The Illusion of Speed http://paulbakaus.com | @pbakaus Thanks! Stay in touch: @pbakaus