Deconstructing Performance

As presented at Smashing Conference, San Francisco 2017

Transcript

1. Deconstructing DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
2. PTDBSHPDPN ,FWJO
   8JOUFS(FUUZ
   *NBHFT ,FWJO
   8JOUFS(FUUZ
   *NBHFT ,FWJO
   8JOUFS(FUUZ
   *NBHFT
3. HPPHMSUD6)
5. 2003 2005 2007 2009 2011 2013 2015 "7&3"(&
   #:5&4
   1&3
   1"(& 93,7 kB 2569 kB IUUQHPPHMRKNVN
6. -0"%*/(
   5*.&
   &70-65*0/ 1999 2006 2012 2017 IUUQHPPHMRKNVN 8 s 4 s 2 s 1 s 2569 kB
7. 
   T 
   DPOWFSTJPὝ 
   T 
   SFWFOVF
8. .0#*-&
   53"/4"$5*0/4
   4637&: Harris Interactive for Tealeaf, 2011
9. 
   $634&%
   BU
   UIFJS
   EFWJDF #*@%! .0#*-&
   53"/4"$5*0/4
   4637&:
10. 
    4$3&".&%
    BU
    UIFJS
    EFWJDF .0#*-&
    53"/4"$5*0/4
    4637&:
11. 
    5)3&8
    UIFJS
    EFWJDF .0#*-&
    53"/4"$5*0/4
    4637&:
12. 1&01-&
    )"5&
    8"*5*/(
13. IUUQTHPPHMDE2$& 
    NJMMJPOT 8.143s 14.200s > 15.013s
14. 1&3'
    
    
    
    
    3."/$&
    JT
    OPU
    ."5)&."5*$4
15. 1&3'
    
    
    
    
    3."/$&
    JT
    1&3$&15*0/
17. 14:$)0-0(*$"-
    1&3'03."/$&
    015*.*4"5*0/
20. +/%
    KVTU
    OPUJDFBCMF
    EJ⒎FSFODF 8&#&3'&$)/&3
    -"8
21.  
    36-& &7&/5
22. .&"/*/('6- /05*$&"#-& !==
23. OPTION 1 OPTION 2 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U OPTION 3 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U
24. OPTION 1 OPTION 2 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U OPTION 3 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U 1FSGPSNBODF ."55&34 SMASHING CONFERENCE
    BCTPMVUF
    OVNCFST
    EPO`U і і і
26. 
    36-&
27.  &7&/5 REGRESSION ALLOWANCE 
    36-&
30. 5*.&
    QFSTJTUT
    NFSFMZ
    BT
    B
    DPOTFRVFODF
    PG
    UIF
    &7&/54
    UBLJOH
    QMBDF
    JO
    <TQBDF> Martin Heidegger t u
31. 1"44*7& "$5*7&
32. 1"44*7& "$5*7&
33.  1"44*7& "$5*7&
34. 14:$)0-0(*$"-
    1&3'03."/$&
    015*.*4"5*0/ PASSIVE ACTIVE
35. 1"44*7&
    1)"4&
36. 1"44*7&
    1)"4&
37. "$5*7&
    1)"4& 7JEFP
    TPVSDF
    IUUQSFZLKBWJLTJHIUTFFJOHJT
38. 015*.*45*$
    6*
39. 1-3% 97-99% 4
    6
    $
    $
    &
    4
    4 '
    "
    *
    -
    6
    3
    &
40. $-*$,
    .& 015*.*45*$
    6*
41. ✔ 015*.*45*$
    6*
42. "1* ✔ 015*.*45*$
    6*
43. "1* ✔ error 0)
    .:ʜ 015*.*45*$
    6*
44. 015*.*45*$
    6*
45. 015*.*45*$
    6*
46. 015*.*45*$
    6*
47. MJOL
    SFMlʜ
    ISFGlʜ IUUQTXXXXPSH538%SFTPVSDFIJOUT 3&4063$&
    )*/54
48. SFMlEOTQSFGFUDIz
    SFMlQSFDPOOFDUz
    SFMlQSFGFUDIz
    SFMlQSFSFOEFSz
    SFMlQSFMPBEz
    BTlUZQFz IUUQHPPHM,LR+%
49. SFMlEOTQSFGFUDIz
    SFMlQSFDPOOFDUz
    SFMlQSFGFUDIz
    SFMlQSFSFOEFSz
    SFMlQSFMPBEz
    BTlUZQFz IUUQHPPHM,LR+%
50. HPPHMRKNVN
51. $3*5*$"-
    1"5)
52. $3*5*$"-
    1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 +4 +4 *.( *.(
53. $3*5*$"-
    1"5) $0/5&/5 +4 +4 *.( )5.- $44 $44 *.( *.( +4
54. 14:$)0-0(*$"-
    1&3'03."/$&
    015*.*4"5*0/ PASSIVE ACTIVE
55. HPPHM[G$-IT
59. … a couple of hours SURE! ,FWJO
    8JOUFS(FUUZ
    *NBHFT
60. LA LA WEB The Performance Experiment
61. 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.
63. A COUPLE OF HOURS (REALLY) (REALLY) NO CHANGES TO FUNCTIONALITY CONSTRAINTS PRIORITISE PERCEPTION
64. PASSIVE
65. PASSIVE
66. PASSIVE ACTIVE
67. WAITS FOR ALL ASSETS/SECTIONS REASONS
68. WAITS FOR ALL ASSETS/SECTIONS
69. SOLUTION
70. CRITICAL RENDERING PATH OPTIMISATION SOLUTION
71. CRITICAL
72. LA LA LAND HTML CSS IMAGES FONTS
73. LA LA LAND HTML
74. LA LA LAND HTML…………………MINIFIED
75. LA LA LAND CSS CSS HTML…………………MINIFIED
76. LA LA LAND MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL
77. LA LA LAND FONTS MAIN CSS HTML…………………MINIFIED CSS………INLINE CRITICAL
78. LA LA LAND MAIN CSS 6 FONTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
79. LA LA LAND MAIN CSS 6 FONTS IMAGES FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
80. LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
81. LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE HINTS FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
82. LA LA LAND MAIN CSS 6 FONTS IMAGES…………OPTIMISED + RESOURCE HINTS CACHING FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
83. LA LA LAND JS MAIN CSS 6 FONTS + RESOURCE HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL
84. LA LA LAND JS MAIN CSS 6 FONTS <script async defer src=“defered.js"> </script>
85. LA LA LAND JS MAIN CSS 6 FONTS <script async defer src=“defered.js"> </script> + PREFETCH + PREFETCH
86. LA LA LAND JS MAIN CSS 6 FONTS <script async defer src=“defered.js"> </script> + PREFETCH + PREFETCH + PRELOAD + PRELOAD
87. + RESOURCE HINTS CACHING IMAGES…………OPTIMISED FONTS………….3 (PRELOAD) HTML…………………MINIFIED CSS………INLINE CRITICAL + DEFER & DELAY EVERYTHING ELSE LA LA LAND COOKBOOK
90. PASSIVE ACTIVE
91. SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s HPPHMLL;-V
92. SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s 0.921s > 5.511s 1651 HPPHMFN80p
93. HPPHMFN80p SPEED INDEX 14324 START RENDER TTI 13.879s > 17.516s 0.921s > 5.511s 1651 88% FASTER
94.  
95. 5IF
    QFSDFQUJPO
    PG
    QFSGPSNBODF
    JT
    KVTU
    BT
    F⒎FDUJWF
    BT
    BDUVBM
    QFSGPSNBODF
    ῶ
    NBOZ
    DBTFT t u
96. 5)"/,
    :06 :&4
    5)&
    *--6453"5*0/4
    "3&
    .*/& DENYS MISHUNOV DIGITAL GARDEN AS @mishunov