Deconstructing Performance

DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV

How long is FOREVER? - Sometimes just 1 SECOND

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

“MOBILE WEB STRESS” Radware, 2013 ENGAGEMENT UP TO

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

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 ”

How long is FOREVER? -…

THANK YOU DENYS MISHUNOV • DIGITAL GARDEN AS TWITTER: @MISHUNOV DRAWINGS: DENYS MISHUNOV a.k.a “ME”

DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV