Pro Yearly is on sale from $80 to $50! »

Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
October 04, 2015

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

October 04, 2015
Tweet

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

  11. None
  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
  25. None
  26. Easy to understand Clear tie to design/ development decisions Quantity

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

  28. None
  29. Quantity Based Easy to understand Clear tie to design/ development

    decisions Almost no connection to user experience
  30. None
  31. Quantity Based

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

    rules or guidelines
  33. http://bit.ly/1Vvkg6p

  34. None
  35. None
  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
  44. None
  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
  58. None
  59. None
  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

  68. 5298

  69. 7990

  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

  77. None
  78. None
  79. http:/ /bit.ly/1FeKy96

  80. Andy Davies @andydavies

  81. None
  82. None
  83. None
  84. visually complete <= 4000ms

  85. None
  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

  89. None
  90. 96 KB/S

  91. None
  92. None
  93. None
  94. None
  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
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  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

  113. None
  114. ENFORCE

  115. None
  116. None
  117. None
  118. None
  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’ } } } }
  124. None
  125. http:/ /bit.ly/1GllSKJ

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

  128. speedcurve.com

  129. None
  130. None
  131. speedcurve.com http:/ /bit.ly/1OQL6qT

  132. None
  133. None
  134. None
  135. None
  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

  146. None
  147. 60fps

  148. 30fps

  149. “…engagement collapsed…”

  150. 1000/60 ~= 16

  151. 16ms

  152. 8-10ms

  153. None
  154. None
  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
  163. None
  164. THANK YOU HighEdWeb Technical Academy, 10/04/15 Tim Kadlec | @tkadlec