Deconstructing Performance

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 *

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 *

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 36%

PSYCHOLOGICAL PERFORMANCE OPTIMISATION ACTIVE PASSIVE

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

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

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 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>

PRELOAD MAIN CSS + PREFETCH 6+ PREFETCH FONTS JS + PRELOAD

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