Deconstructing Performance

As presented at Smashing Conference, San Francisco 2017

Transcript

1. Deconstructing
   DENYS MISHUNOV • DIGITAL GARDEN AS • @mishunov
   

   View Slide

2. PTDBSHPDPN
   ,FWJO8JOUFS(FUUZ*NBHFT
   ,FWJO8JOUFS(FUUZ*NBHFT
   ,FWJO8JOUFS(FUUZ*NBHFT
   

   View Slide

3. HPPHMSUD6)
   

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

7. T
   DPOWFSTJPὝ
   T
   SFWFOVF
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. IUUQTHPPHMDE2$&
    NJMMJPOT
    8.143s 14.200s > 15.013s
    

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

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

    View Slide

18. View Slide

19. View Slide

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

    View Slide

21. 
    36-&
    &7&/5
    

    View Slide

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

    View Slide

23. OPTION 1 OPTION 2
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    OPTION 3
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    

    View Slide

24. OPTION 1 OPTION 2
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    OPTION 3
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    1FSGPSNBODF
    ."55&34
    SMASHING CONFERENCE
    
    BCTPMVUFOVNCFSTEPO`U
    і
    і
    і
    

    View Slide

25. View Slide

26. 36-&
    

    View Slide

27. 
    &7&/5
    REGRESSION ALLOWANCE
    36-&
    

    View Slide

28. View Slide

29. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. 1"44*7&
    1)"4&
    

    View Slide

36. 1"44*7&
    1)"4&
    

    View Slide

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

    View Slide

38. 015*.*45*$6*
    

    View Slide

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

    View Slide

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

    View Slide

41. ✔
    015*.*45*$6*
    

    View Slide

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

    View Slide

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

    View Slide

44. 015*.*45*$6*
    

    View Slide

45. 015*.*45*$6*
    

    View Slide

46. 015*.*45*$6*
    

    View Slide

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

    View Slide

48. SFMlEOTQSFGFUDIz
    SFMlQSFDPOOFDUz
    SFMlQSFGFUDIz
    SFMlQSFSFOEFSz
    SFMlQSFMPBEzBTlUZQFz
    IUUQHPPHM,LR+%
    

    View Slide

49. SFMlEOTQSFGFUDIz
    SFMlQSFDPOOFDUz
    SFMlQSFGFUDIz
    SFMlQSFSFOEFSz
    SFMlQSFMPBEzBTlUZQFz
    IUUQHPPHM,LR+%
    

    View Slide

50. HPPHMRKNVN
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. HPPHM[G$-IT
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

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

    View Slide

60. LA LA WEB
    The Performance Experiment
    

    View Slide

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.
    

    View Slide

62. View Slide

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

    View Slide

64. PASSIVE
    

    View Slide

65. PASSIVE
    

    View Slide

66. PASSIVE ACTIVE
    

    View Slide

67. WAITS FOR
    ALL
    ASSETS/SECTIONS
    REASONS
    

    View Slide

68. WAITS FOR
    ALL
    ASSETS/SECTIONS
    

    View Slide

69. SOLUTION
    

    View Slide

70. CRITICAL
    RENDERING
    PATH OPTIMISATION
    SOLUTION
    

    View Slide

71. CRITICAL
    

    View Slide

72. LA LA LAND
    HTML
    CSS
    IMAGES FONTS
    

    View Slide

73. LA LA LAND
    HTML
    

    View Slide

74. LA LA LAND
    HTML…………………MINIFIED
    

    View Slide

75. LA LA LAND
    CSS
    CSS
    HTML…………………MINIFIED
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. LA LA LAND
    JS
    MAIN CSS
    6 FONTS
    async
    defer
    src=“defered.js">
    
    

    View Slide

85. LA LA LAND
    JS
    MAIN CSS
    6 FONTS
    async
    defer
    src=“defered.js">
    
    + PREFETCH
    + PREFETCH
    

    View Slide

86. LA LA LAND
    JS
    MAIN CSS
    6 FONTS
    async
    defer
    src=“defered.js">
    
    + PREFETCH
    + PREFETCH
    + PRELOAD
    + PRELOAD
    

    View Slide

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

    View Slide

88. View Slide

89. View Slide

90. PASSIVE ACTIVE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. 
    

    View Slide

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

    View Slide

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

    View Slide