Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015

Performance is a critical component of the user experience of any site or application. Making sure what we build is fast and lightweight requires more than just technical tweaks—we have to find ways to prioritize performance from start to finish. Setting and maintaining a performance budget is one of the most effective ways of keeping performance up front in center. In this session, we’ll do a deep dive on performance budgets: how do you determine your budget, what metrics should you use, what tools can you use to enforce one, and how can you use your budget to inform design and start building sites that perform as well as they look.

Presented at HighEdWeb Technical Academy, in Milwaukee, WI on October 4th, 2015.

Transcript

1. GETTING STARTED WITH
   PERFORMANCE
   BUDGETS
   HighEdWeb Technical Academy, 10/04/15
   Tim Kadlec | @tkadlec
   

   View Slide

2. MINIMIZE JS & CSS
   OPTIMIZE IMAGES
   GZIP
   JS AT BOTTOM
   ASYNC SCRIPTS
   AVOID REDIRECTS
   

   View Slide

3. Weight: +44%
   onLoad: +46%
   Requests: +21%
   Speed Index: +34%
   

   View Slide

4. performance is a
   CULTURAL ISSUE
   

   View Slide

5. lack of
   PERFORMANCE
   lack of
   PLANNING
   =
   

   View Slide

6. “I doubt anyone really wants to
   release a site that doesn't
   perform well, it's just a product
   of not being afforded the luxury
   of time and top-down pressure.”
   A friend
   

   View Slide

7. BEAUTIFUL
   ROBUST
   FAST
   

   View Slide

8. BEAUTIFUL
   DONE ON TIME
   

   View Slide

9. is the root of all evil
   PRE-OPTIMIZATION
   

   View Slide

10. is the root of all evil
    POST-OPTIMIZATION
    

    View Slide

11. View Slide

12. http://flic.kr/p/5pp76g
    

    View Slide

13. http://flic.kr/p/9roSGx
    Hint: This is not juice
    

    View Slide

14. Only a problem
    if it’s broken
    

    View Slide

15. 100ms 1%
    revenue
    

    View Slide

16. 400ms 9%
    traffic
    

    View Slide

17. 2.2s 15.4%
    conversions
    

    View Slide

18. 12%
    bounce rate
    160kb
    

    View Slide

19. 500ms 25%
    searches
    

    View Slide

20. GZip 43%
    bandwidth bill
    

    View Slide

21. overall traffic
    revenue
    engagement
    page views
    customer satisfaction
    conversions
    cost
    bounce rate
    

    View Slide

22. Performance budget
    A clearly defined performance
    goal used to guide design & development
    

    View Slide

23. Four types of metrics
    1. Quantity Based
    2. Rule Based
    3. Milestone Timings
    4. Speed Index
    

    View Slide

24. Quantity Based
    Metrics related to the quantity of requests,
    bytes, etc of a page
    

    View Slide

25. View Slide

26. Easy to understand
    Clear tie to design/
    development
    decisions
    Quantity Based
    

    View Slide

27. http://bit.ly/1Jw2jj7
    

    View Slide

28. View Slide

29. Quantity Based
    Easy to understand
    Clear tie to design/
    development
    decisions
    Almost no connection
    to user experience
    

    View Slide

30. View Slide

31. Quantity Based
    

    View Slide

32. Rule Based
    Metrics based on adherence to a set of rules
    or guidelines
    

    View Slide

33. http://bit.ly/1Vvkg6p
    

    View Slide

34. View Slide

35. View Slide

36. http:/
    /bit.ly/1DQ1eBC
    http://yslow.org
    

    View Slide

37. Great checklist of
    basic optimizations
    Easy to understand
    Rule Based
    

    View Slide

38. Great checklist of
    basic optimizations
    Easy to understand
    Rule Based
    Almost no connection
    to user experience
    

    View Slide

39. Weight: +44%
    onLoad: +46%
    Requests: +21%
    Speed Index: +34%
    

    View Slide

40. Weight: +44%
    onLoad: +46%
    Requests: +21%
    Speed Index: +34%
    Page Speed: +1
    

    View Slide

41. Rule Based
    Quantity Based
    

    View Slide

42. Milestone Timings
    Timing of a very specific milestone in the
    course of loading a page
    

    View Slide

43. Time to First Byte
    When does the browser receive the first
    byte of the first response
    

    View Slide

44. View Slide

45. Start Render
    When does stuff start showing up
    

    View Slide

46. Start render
    

    View Slide

47. DOMContentLoaded
    How long does it take to execute scripts
    attached to DOMContentLoaded
    

    View Slide

48. DOMContentLoaded
    

    View Slide

49. Document complete
    When document fires onLoad event
    

    View Slide

50. Document complete
    

    View Slide

51. Fully loaded
    Nothing more to see here
    

    View Slide

52. Fully loaded
    

    View Slide

53. http://bit.ly/1Boy5ew
    

    View Slide

54. Easy to track
    Easy to communicate
    User timing allows for
    very specific metrics
    Milestone Timings
    

    View Slide

55. Easy to track
    Easy to communicate
    User timing allows for
    very specific metrics
    Milestone Timings
    Limited view of the
    user experience
    

    View Slide

56. Quantity Based
    Rule Based
    Milestone Timings
    

    View Slide

57. Speed Index
    A representation of the perceived load of a
    page, from start to finish
    

    View Slide

58. View Slide

59. View Slide

60. http://bit.ly/1OfQTXF
    

    View Slide

61. Very closely tied to
    user experience
    Speed Index
    

    View Slide

62. Very closely tied to
    user experience
    Speed Index
    Difficult to
    communicate
    Limited tracking
    

    View Slide

63. Quantity Based
    Rule Based
    Milestone Timings
    Speed Index
    

    View Slide

64. HOW FAST IS
    FAST ENOUGH?
    

    View Slide

65. AS FAST
    AS POSSIBLE
    

    View Slide

66. 100ms: instantaneous
    1000ms: state of flow
    

    View Slide

67. < 1000 Speed Index
    

    View Slide

68. View Slide

69. View Slide

70. https://flic.kr/p/61tcLS
    

    View Slide

71. 20% RULE
    

    View Slide

72. YOUR SITE &
    10-12 COMPETITORS
    

    View Slide

73. webpagetest.org/getkey.php
    

    View Slide

74. http:/
    /bit.ly/1d2ERjH
    

    View Slide

75. [
    {
    "name": "My homepage",
    "url": "http://timkadlec.com/",
    "type": "home"
    },
    {
    "name": "Steve Souders",
    "url": "https://www.stevesouders.com/",
    "type": "away"
    },
    {
    "name": "Filament Group",
    "url": "http://www.filamentgroup.com/",
    "type": "away"
    }
    ]
    

    View Slide

76. wptmap --mapper odf-spreadsheet --key MY_KEY --count 3
    

    View Slide

77. View Slide

78. View Slide

79. http:/
    /bit.ly/1FeKy96
    

    View Slide

80. Andy Davies
    @andydavies
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. visually complete <= 4000ms
    

    View Slide

85. View Slide

86. Performance budget
    A clearly defined performance
    goal used to guide design & development
    

    View Slide

87. Quantity Based
    Rule Based
    Milestone Timings
    Speed Index
    

    View Slide

88. http:/
    /bit.ly/15A74dw
    

    View Slide

89. View Slide

90. 96 KB/S
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. http:/
    /bit.ly/1qtilDT
    

    View Slide

96. 188k 140k
    

    View Slide

97. EMBRACE
    CONSTRAINTS
    

    View Slide

98. Crying pic
    

    View Slide

99. 50
    words
    

    View Slide

100. I worried a budget would
     restrict my vision and suck the
     life out of any potentially-
     totally-awesome ideas I may
     have had.
     — Katie Kovalcin
     http://bit.ly/1QSgT8o
     

     View Slide

101. But, as us designers do, I
     learned to love the challenge
     of solving a problem within
     a set of strict parameters.
     — Katie Kovalcin
     http://bit.ly/1QSgT8o
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. window.performance = window.performance || window.mozPerformance
     || window.msPerformance || window.webkitPerformance || {};
     var timing = window.performance.timing,
     now = new Date().getTime(),
     output, loadTime;
     budget = budget ? budget : 1000;
     var start = timing.navigationStart;
     //create element named results and put on page
     //
     if (loadTime > budget) {
     results.className += ' overBudget';
     } else {
     results.className += ' underBudget';
     }
     document.body.appendChild(results);
     

     View Slide

111. http:/
     /bit.ly/1blfVCP
     

     View Slide

112. http:/
     /bit.ly/1unluV9
     

     View Slide

113. View Slide

114. ENFORCE
     

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. http:/
     /bit.ly/1QnesMA
     

     View Slide

120. perfbudget: {
     home: {
     options: {
     url: ‘http://stage.mysite.com‘,
     key: ‘MY_API_KEY’,
     runs: '3',
     connectivity: '3G',
     mobile: '1',
     budget: {
     'visualComplete': '4000'
     }
     }
     }
     },
     

     View Slide

121. perfbudget: {
     home: {
     options: {
     url: ‘http://stage.mysite.com‘,
     key: ‘MY_API_KEY’,
     output: 'wpt-results.json',
     budget: {
     'visualComplete': '4000'
     }
     }
     }
     },
     

     View Slide

122. perfbudget: {
     home: {
     options: {
     url: ‘http://stage.mysite.com‘,
     key: 'MY_API_KEY',
     budget: {
     'userTime.CUSTOM_MARK': '1500'
     }
     }
     }
     }
     

     View Slide

123. perfbudget: {
     home: {
     options: {
     url: ‘http://stage.mysite.com‘,
     key: 'MY_API_KEY',
     budget: {
     'bytesIn': ‘250’,
     'SpeedIndex': ‘1000’,
     'visualComplete': ‘1500’
     }
     }
     }
     }
     

     View Slide

124. View Slide

125. http:/
     /bit.ly/1GllSKJ
     

     View Slide

126. View Slide

127. http://bit.ly/1sgKKK3
     

     View Slide

128. speedcurve.com
     

     View Slide

129. View Slide

130. View Slide

131. speedcurve.com
     http:/
     /bit.ly/1OQL6qT
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. WHAT HAPPENS
     AFTER LOAD
     

     View Slide

137. 100ms: instantaneous
     1000ms: state of flow
     

     View Slide

138. http://livingwithlag.com/
     

     View Slide

139. RESPONSE
     ANIMATION
     IDLE
     LOAD
     http://bit.ly/1LWvksF
     

     View Slide

140. RESPONSE
     

     View Slide

141. 100ms: instantaneous
     

     View Slide

142. LOAD
     

     View Slide

143. 1000ms: state of flow
     

     View Slide

144. ANIMATION
     

     View Slide

145. 60fps
     

     View Slide

146. View Slide

147. 60fps
     

     View Slide

148. 30fps
     

     View Slide

149. “…engagement
     collapsed…”
     

     View Slide

150. 1000/60 ~= 16
     

     View Slide

151. 16ms
     

     View Slide

152. 8-10ms
     

     View Slide

153. View Slide

154. View Slide

155. IDLE
     

     View Slide

156. 50ms
     

     View Slide

157. requestIdleCallback
     

     View Slide

158. requestIdleCallback(myNonEssentialWork);
     

     View Slide

159. function myNonEssentialWork (deadline) {
     while (deadline.timeRemaining() > 0
     && tasks.length > 0)
     doWorkIfNeeded();
     if (tasks.length > 0)
     requestIdleCallback(myNonEssentialWork);
     }
     

     View Slide

160. http://bit.ly/1LWvksF
     

     View Slide

161. THE WEB IS GETTING
     FATTER
     

     View Slide

162. STEPS
     1. PICK YOUR METRICS
     2. DEFINE YOUR BUDGET
     3. ENFORCE YOUR BUDGET
     

     View Slide

163. View Slide

164. THANK YOU
     HighEdWeb Technical Academy, 10/04/15
     Tim Kadlec | @tkadlec
     

     View Slide