Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
A presentation at Smashing Conference, San Francisco in April 2017 in San Francisco, CA, USA by Denys Mishunov
Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
Kevin Winter/Getty Images Kevin Winter/Getty Images oscar.go.com Kevin Winter/Getty Images
goo.gl/rtcUH1
2569 kB AVERAGE BYTES PER PAGE 93,7 kB 2003 2005 2007 http://goo.gl/qjmum 2009 2011 2013 2015
LOADING TIME 2569 kB EVOLUTION 8s 4s 1999 2006 http://goo.gl/qjmum 2s 2012 1s 2017
1s 2% conversio㎱ 0.1 s 1% revenue
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
$2 millions 8.143s 14.200s > 15.013s https://goo.gl/cd3QCE
PERF RMANCE is not MATHEMATICS
PERF RMANCE is PERCEPTION
PSYCHOLOGICAL PERFORMANCE OPTIMISATION
WEBER-FECHNER LAW JND (just noticeable difference)
20% RULE EVENT 20%
NOTICEABLE = != MEANINGFUL
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 *
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 *
20% RULE
20% RULE REGRESSION ALLOWANCE EVENT +20%
“ TIME persists merely as a consequence of the EVENTS taking place in [space]. Martin Heidegger ”
ACTIVE PASSIVE
ACTIVE PASSIVE
ACTIVE PASSIVE 36%
PSYCHOLOGICAL PERFORMANCE OPTIMISATION ACTIVE PASSIVE
PASSIVE PHASE
PASSIVE PHASE
ACTIVE PHASE Video source: http://reykjaviksightseeing.is/
OPTIMISTIC UI
F A I L U R E 1-3% 97-99% S U C C E S S
OPTIMISTIC UI CLICK ME
OPTIMISTIC UI ✔
OPTIMISTIC UI ✔ API
OPTIMISTIC UI r o r r e OH ✔ MY… API
OPTIMISTIC UI
OPTIMISTIC UI
OPTIMISTIC UI
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
rel=“dns-prefetch” rel=“preconnect” rel=“prefetch” rel=“prerender” rel=“preload” as=“type” http://goo.gl/Kk3qJD
goo.gl/qjmum
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
PSYCHOLOGICAL PERFORMANCE OPTIMISATION ACTIVE PASSIVE
goo.gl/zfCLhs
Kevin Winter/Getty Images SURE! … a couple of hours
The Performance Experiment LA LA WEB
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.
CONSTRAINTS A COUPLE OF HOURS (REALLY) NO CHANGES TO FUNCTIONALITY PRIORITISE PERCEPTION
PASSIVE
PASSIVE
PASSIVE ACTIVE
REASONS WAITS FOR ALL ASSETS/SECTIONS
WAITS FOR ALL ASSETS/SECTIONS
SOLUTION
SOLUTION CRITICAL RENDERING PATH OPTIMISATION
CRITICAL
L M T HI MAG LA LA LAND S S C ES FONTS
LA LA LAND HTML
LA LA LAND HTML…………………MINIFIED
LA LA LAND HTML…………………MINIFIED CSS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL MAIN CSS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL MAIN CSS FONTS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) MAIN CSS 6 FONTS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) MAIN CSS 6 FONTS IMAGES
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED MAIN CSS 6 FONTS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS MAIN CSS 6 FONTS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING MAIN CSS 6 FONTS
LA LA LAND HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING MAIN CSS 6 FONTS JS
LA LA LAND <script async defer src=“defered.js"> </script> MAIN CSS 6 FONTS JS
LA LA LAND <script async defer src=“defered.js"> </script> MAIN CSS + PREFETCH 6+ PREFETCH FONTS JS
LA LA LAND <script async defer src=“defered.js"> </script>
LA LA LAND COOKBOOK HTML…………………MINIFIED CSS………INLINE CRITICAL FONTS………….3 (PRELOAD) IMAGES…………OPTIMISED + RESOURCE HINTS CACHING + DEFER & DELAY EVERYTHING ELSE
PASSIVE ACTIVE
goo.gl/kk9ZLu STA RT R EN D ER 13.879s TT I
17.516s SPEED INDEX 14324
goo.gl/emWOfi STA RT R EN D ER 13.879s 0.921s TT I
17.516s > 5.511s SPEED INDEX 14324 1651
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
13.2 3.1
“ The perception of performance is just as effective as actual performance ㏌ many cases ”
THANK YOU YES, THE ILLUSTRATIONS ARE MINE:) DENYS MISHUNOV DIGITAL GARDEN AS @mishunov
