A presentation at Smashing Conference Freiburg 2016 in in Freiburg, Germany by Denys Mishunov
DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV
2001
2016
2001
2016
2003
2016
2446 kB AVERAGE BYTES PER PAGE 93,7 kB 2003 2005 2007 http://goo.gl/qjmum 2009 2011 2013 2015
LOADING TIME 2446 kB EVOLUTION 8s 4s 1999 2006 http://goo.gl/qjmum 2s 2012 1s 2016
1s 2% conversio㎱ 0.1 s 1% revenue
“WEB STRESS” Foviance, 2010
“WEB STRESS” Foviance, 2010 CONCENTRATE UP TO + 50% http://goo.gl/kjTQZR
“MOBILE WEB STRESS” Radware, 2013
“MOBILE WEB STRESS” Radware, 2013 PEAK FRUSTRATION UP TO + 26% http://goo.gl/WPb3GU
8% http://goo.gl/WPb3GU
MOBILE TRANSACTIONS SURVEY Harris Interactive for Tealeaf, 2011
MOBILE TRANSACTIONS SURVEY 23% CURSED at their device
! % @
MOBILE TRANSACTIONS SURVEY 11% SCREAMED at their device
MOBILE TRANSACTIONS SURVEY 4% THREW their device
PEOPLE HATE WAITING
19.913s http://goo.gl/JnXZ2x 19.000s 22.213s
106.8 million views 19.913s 19.000s http://goo.gl/JnXZ2x 22.213s
PERF RMANCE is not MATHEMATICS
PERF RMANCE is PERCEPTION
“ 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” ”
WEBER-FECHNER LAW JND (just noticeable difference)
20% RULE EVENT
20% RULE EVENT 20%
NOTICEABLE = != MEANINGFUL
OPTION 1 OPTION 2
OPTION 1 OPTION 2 1.6с 2.0с
20% RULE REGRESSION ALLOWANCE EVENT
20% RULE REGRESSION ALLOWANCE EVENT +20%
“ TIME persists merely as a consequence of the EVENTS taking place in [space]. Martin Heidegger ”
ACTIVE PASSIVE Boy, am I busy 36%
ACTIVE Boy, am I busy PASSIVE
PREEMPTIVE START ПРОЦЕСС EVENT EVENT ACTIVE PHASE EVENT
PRELOAD TOP HITS mobile Safari Settings / Safari / Preload Top Hits
RESOURCE HINTS <link rel=“…" href=“…"> https://www.w3.org/TR/2016/WD-resource-hints-20160225/
rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” rel=“preload” as=“TYPE” http://goo.gl/Kk3qJD
EARLY COMPLETION ПРОЦЕСС EVENT EVENT EVENT ACTIVE PHASE
PASSIVE PHASE
PASSIVE PHASE
ACTIVE SMASHING BIRTHDAY! PHASE
OPTIMISTIC UI
OLD DAYS CLICK ME
OLD DAYS CLICK ME API
NOT-OPTIMISTIC UI ✔ API
NOT-SO-OLD DAYS CLICK ME
NOT-SO-OLD DAYS API
NOT-SO-OPTIMISTIC UI ✔ API
OPTIMISTIC UI
OPTIMISTIC UI CLICK ME
OPTIMISTIC UI ✔ API
OPTIMISTIC UI r o r r e OH ✔ MY… API
CRITICAL PATH
CRITICAL PATH CSS IMG JS HTML IMG JS JS IMG CSS JS CONTENT
CRITICAL PATH HTML CONTENT IMG CSS JS IMG JS CSS IMG JS
goo.gl/JnXZ2x
goo.gl/JnXZ2x PASSIVE PHASE ACTIVE PHASE
“ The perception of performance is just as effective as actual performance ㏌ many cases ”
THANK YOU DENYS MISHUNOV • DIGITAL GARDEN AS TWITTER: @MISHUNOV DRAWINGS: DENYS MISHUNOV a.k.a “ME”
As it has been presented at SmashingConf Freiburg 2016, Germany.
for free. You
can too.