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

Deconstructing Performance

Deconstructing Performance

As presented at Smashing Conference, San Francisco 2017

80da88fa0ee72ef38bf344cda8a51d82?s=128

Denys Mishunov

April 10, 2017
Tweet

Transcript

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

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

  3. HPPHMSUD6)

  4. None
  5. 2003 2005 2007 2009 2011 2013 2015 "7&3"(&#:5&4 1&31"(& 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&% BUUIFJSEFWJDF #*@%! .0#*-&53"/4"$5*0/4 4637&:

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

  11.  5)3&8 UIFJSEFWJDF .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."/$& JTOPU ."5)&."5*$4

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

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

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

  21.  36-& &7&/5

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

  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
  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 і і і
  25. None
  26. 36-&

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

  28. None
  29. None
  30. 5*.&QFSTJTUTNFSFMZBTB DPOTFRVFODFPGUIF&7&/54 UBLJOHQMBDFJO<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& 7JEFPTPVSDFIUUQSFZLKBWJLTJHIUTFFJOHJT

  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. MJOLSFMlʜISFGlʜ IUUQTXXXXPSH538%SFTPVSDFIJOUT 3&4063$&)*/54

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

  49. SFMlEOTQSFGFUDIz SFMlQSFDPOOFDUz SFMlQSFGFUDIz SFMlQSFSFOEFSz SFMlQSFMPBEzBTlUZQFz 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

  56. None
  57. None
  58. None
  59. … a couple of hours SURE! ,FWJO8JOUFS(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.
  62. None
  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
  88. None
  89. None
  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. 5IFQFSDFQUJPOPG QFSGPSNBODFJTKVTUBT F⒎FDUJWFBTBDUVBM QFSGPSNBODFῶNBOZ DBTFT t u

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