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
2. MINIMIZE JS & CSS
   OPTIMIZE IMAGES
   GZIP
   JS AT BOTTOM
   ASYNC SCRIPTS
   AVOID REDIRECTS
3. Weight: +44% onLoad: +46% Requests: +21% Speed Index: +34%
4. performance is a CULTURAL ISSUE
5. lack of PERFORMANCE lack of PLANNING =
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
7. BEAUTIFUL ROBUST FAST
8. BEAUTIFUL DONE ON TIME
9. is the root of all evil PRE-OPTIMIZATION
10. is the root of all evil POST-OPTIMIZATION
12. http://flic.kr/p/5pp76g
13. http://flic.kr/p/9roSGx Hint: This is not juice
14. Only a problem if it’s broken
15. 100ms 1% revenue
16. 400ms 9% traffic
17. 2.2s 15.4% conversions
18. 12% bounce rate 160kb
19. 500ms 25% searches
20. GZip 43% bandwidth bill
21. overall traffic revenue engagement page views customer satisfaction conversions cost bounce rate
22. Performance budget A clearly defined performance goal used to guide design & development
23. Four types of metrics 1. Quantity Based 2. Rule Based 3. Milestone Timings 4. Speed Index
24. Quantity Based Metrics related to the quantity of requests, bytes, etc of a page
26. Easy to understand Clear tie to design/ development decisions Quantity Based
27. http://bit.ly/1Jw2jj7
29. Quantity Based Easy to understand Clear tie to design/ development decisions Almost no connection to user experience
31. Quantity Based
32. Rule Based Metrics based on adherence to a set of rules or guidelines
33. http://bit.ly/1Vvkg6p
36. http:/ /bit.ly/1DQ1eBC http://yslow.org
37. Great checklist of basic optimizations Easy to understand Rule Based
38. Great checklist of basic optimizations Easy to understand Rule Based Almost no connection to user experience
39. Weight: +44% onLoad: +46% Requests: +21% Speed Index: +34%
40. Weight: +44% onLoad: +46% Requests: +21% Speed Index: +34% Page Speed: +1
41. Rule Based Quantity Based
42. Milestone Timings Timing of a very specific milestone in the course of loading a page
43. Time to First Byte When does the browser receive the first byte of the first response
45. Start Render When does stuff start showing up
46. Start render
47. DOMContentLoaded How long does it take to execute scripts attached to DOMContentLoaded
48. DOMContentLoaded
49. Document complete When document fires onLoad event
50. Document complete
51. Fully loaded Nothing more to see here
52. Fully loaded
53. http://bit.ly/1Boy5ew
54. Easy to track Easy to communicate User timing allows for very specific metrics Milestone Timings
55. Easy to track Easy to communicate User timing allows for very specific metrics Milestone Timings Limited view of the user experience
56. Quantity Based Rule Based Milestone Timings
57. Speed Index A representation of the perceived load of a page, from start to finish
60. http://bit.ly/1OfQTXF
61. Very closely tied to user experience Speed Index
62. Very closely tied to user experience Speed Index Difficult to communicate Limited tracking
63. Quantity Based Rule Based Milestone Timings Speed Index
64. HOW FAST IS FAST ENOUGH?
65. AS FAST AS POSSIBLE
66. 100ms: instantaneous 1000ms: state of flow
67. < 1000 Speed Index
70. https://flic.kr/p/61tcLS
71. 20% RULE
72. YOUR SITE & 10-12 COMPETITORS
73. webpagetest.org/getkey.php
74. http:/ /bit.ly/1d2ERjH
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" } ]
76. wptmap --mapper odf-spreadsheet --key MY_KEY --count 3
79. http:/ /bit.ly/1FeKy96
80. Andy Davies @andydavies
84. visually complete <= 4000ms
86. Performance budget A clearly defined performance goal used to guide design & development
87. Quantity Based Rule Based Milestone Timings Speed Index
88. http:/ /bit.ly/15A74dw
90. 96 KB/S
95. http:/ /bit.ly/1qtilDT
96. 188k 140k
97. EMBRACE
    CONSTRAINTS
98. Crying pic
99. 50 words
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
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
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);
111. http:/ /bit.ly/1blfVCP
112. http:/ /bit.ly/1unluV9
114. ENFORCE
119. http:/ /bit.ly/1QnesMA
120. perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: ‘MY_API_KEY’, runs: '3', connectivity: '3G', mobile: '1', budget: { 'visualComplete': '4000' } } } },
121. perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: ‘MY_API_KEY’, output: 'wpt-results.json', budget: { 'visualComplete': '4000' } } } },
122. perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: 'MY_API_KEY', budget: { 'userTime.CUSTOM_MARK': '1500' } } } }
123. perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: 'MY_API_KEY', budget: { 'bytesIn': ‘250’, 'SpeedIndex': ‘1000’, 'visualComplete': ‘1500’ } } } }
125. http:/ /bit.ly/1GllSKJ
127. http://bit.ly/1sgKKK3
128. speedcurve.com
131. speedcurve.com http:/ /bit.ly/1OQL6qT
136. WHAT HAPPENS AFTER LOAD
137. 100ms: instantaneous 1000ms: state of flow
138. http://livingwithlag.com/
139. RESPONSE ANIMATION IDLE LOAD http://bit.ly/1LWvksF
140. RESPONSE
141. 100ms: instantaneous
142. LOAD
143. 1000ms: state of flow
144. ANIMATION
145. 60fps
147. 60fps
148. 30fps
149. “…engagement collapsed…”
150. 1000/60 ~= 16
151. 16ms
152. 8-10ms
155. IDLE
156. 50ms
157. requestIdleCallback
158. requestIdleCallback(myNonEssentialWork);
159. function myNonEssentialWork (deadline) { while (deadline.timeRemaining() > 0 && tasks.length > 0) doWorkIfNeeded(); if (tasks.length > 0) requestIdleCallback(myNonEssentialWork); }
160. http://bit.ly/1LWvksF
161. THE WEB IS GETTING FATTER
162. STEPS 1. PICK YOUR METRICS 2. DEFINE YOUR BUDGET 3. ENFORCE YOUR BUDGET
164. THANK YOU HighEdWeb Technical Academy, 10/04/15 Tim Kadlec | @tkadlec