DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV
Slide 1
Slide 2
- How long is FOREVER? - Sometimes just 1 SECOND
Slide 3
2001
Slide 4
2016
Slide 5
2001
Slide 6
2016
Slide 7
2003
Slide 8
2016
Slide 9
Slide 10
2446 kB AVERAGE BYTES PER PAGE 93,7 kB 2003 2005 2007 http://goo.gl/qjmum 2009 2011 2013 2015
Slide 11
LOADING TIME 2446 kB EVOLUTION 8s 4s 1999 2006 http://goo.gl/qjmum 2s 2012 1s 2016
Slide 12
1s 2% conversio㎱ 0.1 s 1% revenue
Slide 13
“WEB STRESS” Foviance, 2010
Slide 14
“WEB STRESS” Foviance, 2010 CONCENTRATE UP TO + 50% http://goo.gl/kjTQZR
Slide 15
“MOBILE WEB STRESS” Radware, 2013
Slide 16
“MOBILE WEB STRESS” Radware, 2013 PEAK FRUSTRATION UP TO + 26% http://goo.gl/WPb3GU
Slide 17
“MOBILE WEB STRESS” Radware, 2013 ENGAGEMENT UP TO
8% http://goo.gl/WPb3GU
Slide 18
MOBILE TRANSACTIONS SURVEY Harris Interactive for Tealeaf, 2011
Slide 19
MOBILE TRANSACTIONS SURVEY 23% CURSED at their device
! % @
Slide 20
MOBILE TRANSACTIONS SURVEY 11% SCREAMED at their device
Slide 21
MOBILE TRANSACTIONS SURVEY 4% THREW their device
Slide 22
PEOPLE HATE WAITING
Slide 23
19.913s http://goo.gl/JnXZ2x 19.000s 22.213s
Slide 24
106.8 million views 19.913s 19.000s http://goo.gl/JnXZ2x 22.213s
Slide 25
Slide 26
PERF RMANCE is not MATHEMATICS
Slide 27
PERF RMANCE is PERCEPTION
Slide 28
“ The real thing we are after is to create a user experience that people love and they feel is fast... and so we might be frontend engineers, we might be dev, we might be ops, but what we really are is perception brokers. Steve Souders, “High Performance Web Sites” ”
Slide 29
Slide 30
Slide 31
Slide 32
WEBER-FECHNER LAW JND (just noticeable difference)
Slide 33
20% RULE EVENT
Slide 34
20% RULE EVENT 20%
Slide 35
NOTICEABLE = != MEANINGFUL
Slide 36
OPTION 1 OPTION 2
Slide 37
OPTION 1 OPTION 2 1.6с 2.0с
Slide 38
Slide 39
20% RULE REGRESSION ALLOWANCE EVENT
Slide 40
20% RULE REGRESSION ALLOWANCE EVENT +20%
Slide 41
“ TIME persists merely as a consequence of the EVENTS taking place in [space]. Martin Heidegger ”
Slide 42
ACTIVE PASSIVE Boy, am I busy 36%
Slide 43
ACTIVE Boy, am I busy PASSIVE
Slide 44
PREEMPTIVE START ПРОЦЕСС EVENT EVENT ACTIVE PHASE EVENT
Slide 45
Slide 46
Slide 47
PRELOAD TOP HITS mobile Safari Settings / Safari / Preload Top Hits
Slide 48
RESOURCE HINTS <link rel=“…" href=“…"> https://www.w3.org/TR/2016/WD-resource-hints-20160225/
Slide 49
rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” rel=“preload” as=“TYPE” http://goo.gl/Kk3qJD
Slide 50
EARLY COMPLETION ПРОЦЕСС EVENT EVENT EVENT ACTIVE PHASE
Slide 51
PASSIVE PHASE
Slide 52
PASSIVE PHASE
Slide 53
ACTIVE SMASHING BIRTHDAY! PHASE
Slide 54
OPTIMISTIC UI
Slide 55
OLD DAYS CLICK ME
Slide 56
OLD DAYS CLICK ME API
Slide 57
NOT-OPTIMISTIC UI ✔ API
Slide 58
NOT-SO-OLD DAYS CLICK ME
Slide 59
NOT-SO-OLD DAYS API
Slide 60
NOT-SO-OPTIMISTIC UI ✔ API
Slide 61
OPTIMISTIC UI
Slide 62
OPTIMISTIC UI CLICK ME
Slide 63
OPTIMISTIC UI ✔ API
Slide 64
OPTIMISTIC UI r o r r e OH ✔ MY… API
Slide 65
CRITICAL PATH
Slide 66
CRITICAL PATH CSS IMG JS HTML IMG JS JS IMG CSS JS CONTENT
Slide 67
CRITICAL PATH HTML CONTENT IMG CSS JS IMG JS CSS IMG JS
Slide 68
goo.gl/JnXZ2x
Slide 69
goo.gl/JnXZ2x PASSIVE PHASE ACTIVE PHASE
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
“ The perception of performance is just as effective as actual performance ㏌ many cases ”
Slide 75
- How long is FOREVER? -…
Slide 76
THANK YOU DENYS MISHUNOV • DIGITAL GARDEN AS TWITTER: @MISHUNOV DRAWINGS: DENYS MISHUNOV a.k.a “ME”
