Deconstructing Performance

A presentation at Smashing Conference Freiburg 2016 in September 2016 in Freiburg, Germany by Denys Mishunov

Slide 1

DENYS MISHUNOV • DIGITAL GARDEN AS • @MISHUNOV

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”