Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Illusion of Speed

9fb120a88c85d93be416ed62b8ab5e16?s=47 Paul Bakaus
June 02, 2017

The Illusion of Speed

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

9fb120a88c85d93be416ed62b8ab5e16?s=128

Paul Bakaus

June 02, 2017
Tweet

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

  5. None
  6. None
  7. New = Amazing! Smartphone Buyer

  8. None
  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
  85. None
  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