Deconstructing Performance

Slide 1

Slide 1 text

Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov

Slide 2

Slide 2 text

PTDBSHPDPN ,FWJO8JOUFS(FUUZ*NBHFT ,FWJO8JOUFS(FUUZ*NBHFT ,FWJO8JOUFS(FUUZ*NBHFT

Slide 3

Slide 3 text

HPPHMSUD6)

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

2003 2005 2007 2009 2011 2013 2015 "7&3"(&#:5&4 1&31"(& 93,7 kB 2569 kB IUUQHPPHMRKNVN

Slide 6

Slide 6 text

-0"%*/(5*.& &70-65*0/ 1999 2006 2012 2017 IUUQHPPHMRKNVN 8 s 4 s 2 s 1 s 2569 kB

Slide 7

Slide 7 text

T DPOWFSTJPὝ T SFWFOVF

Slide 8

Slide 8 text

.0#*-&53"/4"$5*0/4 4637&: Harris Interactive for Tealeaf, 2011

Slide 9

Slide 9 text

$634&% BUUIFJSEFWJDF #*@%! .0#*-&53"/4"$5*0/4 4637&:

Slide 10

Slide 10 text

4$3&".&% BUUIFJSEFWJDF .0#*-&53"/4"$5*0/4 4637&:

Slide 11

Slide 11 text

5)3&8 UIFJSEFWJDF .0#*-&53"/4"$5*0/4 4637&:

Slide 12

Slide 12 text

1&01-& )"5& 8"*5*/(

Slide 13

Slide 13 text

IUUQTHPPHMDE2$& NJMMJPOT 8.143s 14.200s > 15.013s

Slide 14

Slide 14 text

1&3'3."/$& JTOPU ."5)&."5*$4

Slide 15

Slide 15 text

1&3'3."/$& JT 1&3$&15*0/

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

14:$)0-0(*$"- 1&3'03."/$& 015*.*4"5*0/

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

+/% KVTUOPUJDFBCMFEJ⒎FSFODF 8&3'&$)/&3-"8

Slide 21

Slide 21 text

36-& &7&/5

Slide 22

Slide 22 text

.&"/*/('6- /05*$&"#-& !==

Slide 23

Slide 23 text

OPTION 1 OPTION 2 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPOÙ OPTION 3 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPOÙ 1FSGPSNBODF ."55&34 SMASHING CONFERENCE BCTPMVUFOVNCFSTEPOÙ

Slide 24

Slide 24 text

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

36-&

Slide 27

Slide 27 text

&7&/5 REGRESSION ALLOWANCE 36-&

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

5*.&QFSTJTUTNFSFMZBTB DPOTFRVFODFPGUIF&7&/54 UBLJOHQMBDFJO Martin Heidegger t u

Slide 31

Slide 31 text

1"44*7& "$5*7&

Slide 32

Slide 32 text

1"44*7& "$5*7&

Slide 33

Slide 33 text

1"44*7& "$5*7&

Slide 34

Slide 34 text

14:$)0-0(*$"-1&3'03."/$&015*.*4"5*0/ PASSIVE ACTIVE

Slide 35

Slide 35 text

1"44*7& 1)"4&

Slide 36

Slide 36 text

1"44*7& 1)"4&

Slide 37

Slide 37 text

"$5*7& 1)"4& 7JEFPTPVSDFIUUQSFZLKBWJLTJHIUTFFJOHJT

Slide 38

Slide 38 text

015*.*45*$6*

Slide 39

Slide 39 text

1-3% 97-99% 4 6 $ $ & 4 4 ' " * - 6 3 &

Slide 40

Slide 40 text

$-*$,.& 015*.*45*$6*

Slide 41

Slide 41 text

✔ 015*.*45*$6*

Slide 42

Slide 42 text

"1* ✔ 015*.*45*$6*

Slide 43

Slide 43 text

"1* ✔ error 0).:ʜ 015*.*45*$6*

Slide 44

Slide 44 text

015*.*45*$6*

Slide 45

Slide 45 text

015*.*45*$6*

Slide 46

Slide 46 text

015*.*45*$6*

Slide 47

Slide 47 text

MJOLSFMlʜISFGlʜ IUUQTXXXXPSH538%SFTPVSDFIJOUT 3&4063$&)*/54

Slide 48

Slide 48 text

SFMlEOTQSFGFUDIz SFMlQSFDPOOFDUz SFMlQSFGFUDIz SFMlQSFSFOEFSz SFMlQSFMPBEzBTlUZQFz IUUQHPPHM,LR+%

Slide 49

Slide 49 text

SFMlEOTQSFGFUDIz SFMlQSFDPOOFDUz SFMlQSFGFUDIz SFMlQSFSFOEFSz SFMlQSFMPBEzBTlUZQFz IUUQHPPHM,LR+%

Slide 50

Slide 50 text

HPPHMRKNVN

Slide 51

Slide 51 text

$3*5*$"-1"5)

Slide 52

Slide 52 text

$3*5*$"-1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 +4 +4 *.( *.(

Slide 53

Slide 53 text

$3*5*$"-1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 *.( *.( +4

Slide 54

Slide 54 text

14:$)0-0(*$"-1&3'03."/$&015*.*4"5*0/ PASSIVE ACTIVE

Slide 55

Slide 55 text

HPPHM[G$-IT

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

… a couple of hours SURE! ,FWJO8JOUFS(FUUZ*NBHFT

Slide 60

Slide 60 text

LA LA WEB The Performance Experiment

Slide 61

Slide 61 text

LA LA WEB The Performance Experiment DISCLAIMER: This experiment contains copyrighted material. The material is provided for non- profit educational purposes, comments, criticismsm and research. 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 62 text

No content

Slide 63

Slide 63 text

A COUPLE OF HOURS (REALLY) (REALLY) NO CHANGES TO FUNCTIONALITY CONSTRAINTS PRIORITISE PERCEPTION

Slide 64

Slide 64 text

PASSIVE

Slide 65

Slide 65 text

PASSIVE

Slide 66

Slide 66 text

PASSIVE ACTIVE

Slide 67

Slide 67 text

WAITS FOR ALL ASSETS/SECTIONS REASONS

Slide 68

Slide 68 text

WAITS FOR ALL ASSETS/SECTIONS

Slide 69

Slide 69 text

SOLUTION

Slide 70

Slide 70 text

CRITICAL RENDERING PATH OPTIMISATION SOLUTION

Slide 71

Slide 71 text

CRITICAL

Slide 72

Slide 72 text

LA LA LAND HTML CSS IMAGES FONTS

Slide 73

Slide 73 text

LA LA LAND HTML

Slide 74

Slide 74 text

LA LA LAND HTML…………………MINIFIED

Slide 75

Slide 75 text

LA LA LAND CSS CSS HTML…………………MINIFIED

Slide 76

Slide 76 text

LA LA LAND MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 77

Slide 77 text

LA LA LAND FONTS MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 78

Slide 78 text

LA LA LAND MAIN CSS 6 FONTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 79

Slide 79 text

LA LA LAND MAIN CSS 6 FONTS IMAGES FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 80

Slide 80 text

LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 81

Slide 81 text

LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE HINTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 82

Slide 82 text

LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE HINTS CACHING FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 83

Slide 83 text

LA LA LAND JS MAIN CSS 6 FONTS + RESOURCE HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL

Slide 84

Slide 84 text

LA LA LAND JS MAIN CSS 6 FONTS

Slide 85

Slide 85 text

LA LA LAND JS MAIN CSS 6 FONTS + PREFETCH + PREFETCH

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

+ RESOURCE HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL + DEFER & DELAY EVERYTHING ELSE LA LA LAND COOKBOOK

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

PASSIVE ACTIVE

Slide 91

Slide 91 text

SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s HPPHMLL;-V

Slide 92

Slide 92 text

SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s 0.921s > 5.511s 1651 HPPHMFN80p

Slide 93

Slide 93 text

HPPHMFN80p SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s 0.921s > 5.511s 1651 88% FASTER

Slide 94

Slide 94 text

Slide 95

Slide 95 text

5IFQFSDFQUJPOPG QFSGPSNBODFJTKVTUBT F⒎FDUJWFBTBDUVBM QFSGPSNBODFῶNBOZ DBTFT t u

Slide 96

Slide 96 text

5)"/,:06 :&4 5)&*--6453"5*0/4"3&.*/& DENYS MISHUNOV DIGITAL GARDEN AS @mishunov