Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
Slide 1
Slide 2
Kevin Winter/Getty Images Kevin Winter/Getty Images oscar.go.com Kevin Winter/Getty Images
Slide 3
goo.gl/rtcUH1
Slide 4
Slide 5
2569 kB AVERAGE BYTES PER PAGE 93,7 kB 2003 2005 2007 http://goo.gl/qjmum 2009 2011 2013 2015
Slide 6
LOADING TIME 2569 kB EVOLUTION 8s 4s 1999 2006 http://goo.gl/qjmum 2s 2012 1s 2017
Slide 7
1s 2% conversio㎱ 0.1 s 1% revenue
Slide 8
MOBILE TRANSACTIONS SURVEY Harris Interactive for Tealeaf, 2011
Slide 9
MOBILE TRANSACTIONS SURVEY 23% CURSED at their device
! % @
Slide 10
MOBILE TRANSACTIONS SURVEY 11% SCREAMED at their device
Slide 11
MOBILE TRANSACTIONS SURVEY 4% THREW their device
Slide 12
PEOPLE HATE WAITING
Slide 13
$2 millions 8.143s 14.200s > 15.013s https://goo.gl/cd3QCE
Slide 14
PERF RMANCE is not MATHEMATICS
Slide 15
PERF RMANCE is PERCEPTION
Slide 16
Slide 17
PSYCHOLOGICAL PERFORMANCE OPTIMISATION
Slide 18
Slide 19
Slide 20
WEBER-FECHNER LAW JND (just noticeable difference)
Slide 21
20% RULE EVENT 20%
Slide 22
NOTICEABLE = != MEANINGFUL
Slide 23
OPTION 1 OPTION 2 SMASHING CONFERENCE SMASHING CONFERENCE Performance MATTERS * absolute numbers donʼt Performance * MATTERS OPTION 3 SMASHING CONFERENCE Performance MATTERS * absolute numbers donʼt *
- absolute numbers donʼt
Slide 24
OPTION 1 OPTION 2 SMASHING CONFERENCE SMASHING CONFERENCE 1.6с MATTERS Performance * absolute numbers donʼt 2.1с MATTERS Performance * OPTION 3 SMASHING CONFERENCE 2.1с Performance MATTERS * absolute numbers donʼt *
- absolute numbers donʼt
Slide 25
Slide 26
20% RULE
Slide 27
20% RULE REGRESSION ALLOWANCE EVENT +20%
Slide 28
Slide 29
Slide 30
“ TIME persists merely as a consequence of the EVENTS taking place in [space]. Martin Heidegger ”
Slide 31
ACTIVE PASSIVE
Slide 32
ACTIVE PASSIVE
Slide 33
ACTIVE PASSIVE 36%
Slide 34
PSYCHOLOGICAL PERFORMANCE OPTIMISATION ACTIVE PASSIVE
Slide 35
PASSIVE PHASE
Slide 36
PASSIVE PHASE
Slide 37
ACTIVE PHASE Video source: http://reykjaviksightseeing.is/
Slide 38
OPTIMISTIC UI
Slide 39
F A I L U R E 1-3% 97-99% S U C C E S S
Slide 40
OPTIMISTIC UI CLICK ME
Slide 41
OPTIMISTIC UI ✔
Slide 42
OPTIMISTIC UI ✔ API
Slide 43
OPTIMISTIC UI r o r r e OH ✔ MY… API
Slide 44
OPTIMISTIC UI
Slide 45
OPTIMISTIC UI
Slide 46
OPTIMISTIC UI
Slide 47
RESOURCE HINTS <link rel=“…" href=“…"> https://www.w3.org/TR/2016/WD-resource-hints-20160225/
Slide 48
rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” rel=“preload” as=“type” http://goo.gl/Kk3qJD
Slide 49
rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” rel=“preload” as=“type” http://goo.gl/Kk3qJD
Slide 50
goo.gl/qjmum
Slide 51
CRITICAL PATH
Slide 52
CRITICAL PATH CSS IMG JS HTML IMG JS JS IMG CSS JS CONTENT
Slide 53
CRITICAL PATH HTML CONTENT IMG CSS JS IMG JS CSS IMG JS
Slide 54
PSYCHOLOGICAL PERFORMANCE OPTIMISATION ACTIVE PASSIVE
Slide 55
goo.gl/zfCLhs
Slide 56
Slide 57
Slide 58
Slide 59
Kevin Winter/Getty Images SURE! … a couple of hours
Slide 60
The Performance Experiment LA LA WEB
Slide 61
DISCLAIMER: This experiment contains copyrighted material. The material is provided for nonprofit educational purposes, comments, criticismsm and research. The Performance Experiment LA LA WEB This should constitute a “fair use” of any such copyrighted material as provided for in §107 of the U.S. Copyright Act.
Slide 62
Slide 63
CONSTRAINTS A COUPLE OF HOURS (REALLY) NO CHANGES TO FUNCTIONALITY PRIORITISE PERCEPTION
Slide 64
PASSIVE
Slide 65
PASSIVE
Slide 66
PASSIVE ACTIVE
Slide 67
REASONS WAITS FOR ALL ASSETS/SECTIONS
Slide 68
WAITS FOR ALL ASSETS/SECTIONS
Slide 69
SOLUTION
Slide 70
SOLUTION CRITICAL RENDERING PATH OPTIMISATION
Slide 71
CRITICAL
Slide 72
L M T HI MAG LA LA LAND S S C ES FONTS
Slide 73
LA LA LAND HTML
Slide 74
LA LA LAND HTML…………………MINIFIED
Slide 75
LA LA LAND HTML…………………MINIFIED CSS
Slide 76
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL MAIN CSS
Slide 77
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL MAIN CSS FONTS
Slide 78
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) MAIN CSS 6 FONTS
Slide 79
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) MAIN CSS 6 FONTS IMAGES
Slide 80
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED MAIN CSS 6 FONTS
Slide 81
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS MAIN CSS 6 FONTS
Slide 82
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING MAIN CSS 6 FONTS
Slide 83
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING MAIN CSS 6 FONTS JS
Slide 84
LA LA LAND <script async defer src=“defered.js"> </script> MAIN CSS 6 FONTS JS
Slide 85
LA LA LAND <script async defer src=“defered.js"> </script> MAIN CSS + PREFETCH 6+ PREFETCH FONTS JS
Slide 86
LA LA LAND <script async defer src=“defered.js"> </script>
- PRELOAD MAIN CSS + PREFETCH 6+ PREFETCH FONTS JS + PRELOAD
Slide 87
LA LA LAND COOKBOOK HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING + DEFER & DELAY EVERYTHING ELSE
Slide 88
Slide 89
Slide 90
PASSIVE ACTIVE
Slide 91
goo.gl/kk9ZLu STA RT R EN D ER 13.879s TT I
17.516s SPEED INDEX 14324
Slide 92
goo.gl/emWOfi STA RT R EN D ER 13.879s 0.921s TT I
17.516s > 5.511s SPEED INDEX 14324 1651
Slide 93
goo.gl/emWOfi STA RT R EN D ER 13.879s 0.921s TT I SPEED INDEX 88% 14324 1651 FASTER
17.516s > 5.511s
Slide 94
13.2 3.1
Slide 95
“ The perception of performance is just as effective as actual performance ㏌ many cases ”
Slide 96
THANK YOU YES, THE ILLUSTRATIONS ARE MINE:) DENYS MISHUNOV DIGITAL GARDEN AS @mishunov
