Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deconstructing Performance

Deconstructing Performance

As presented at Smashing Conference, San Francisco 2017

Denys Mishunov

April 10, 2017
Tweet

More Decks by Denys Mishunov

Other Decks in Technology

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