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. 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
  2. 11.
  3. 23.

    Four types of metrics 1. Quantity Based 2. Rule Based

    3. Milestone Timings 4. Speed Index
  4. 25.
  5. 28.
  6. 29.

    Quantity Based Easy to understand Clear tie to design/ development

    decisions Almost no connection to user experience
  7. 30.
  8. 34.
  9. 35.
  10. 38.
  11. 43.

    Time to First Byte When does the browser receive the

    first byte of the first response
  12. 44.
  13. 54.

    Easy to track Easy to communicate User timing allows for

    very specific metrics Milestone Timings
  14. 55.

    Easy to track Easy to communicate User timing allows for

    very specific metrics Milestone Timings Limited view of the user experience
  15. 58.
  16. 59.
  17. 68.
  18. 69.
  19. 71.
  20. 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" } ]
  21. 77.
  22. 78.
  23. 81.
  24. 82.
  25. 83.
  26. 85.
  27. 89.
  28. 90.
  29. 91.
  30. 92.
  31. 93.
  32. 94.
  33. 96.
  34. 99.
  35. 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
  36. 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
  37. 102.
  38. 103.
  39. 104.
  40. 105.
  41. 106.
  42. 107.
  43. 108.
  44. 109.
  45. 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);
  46. 113.
  47. 114.
  48. 115.
  49. 116.
  50. 117.
  51. 118.
  52. 120.

    perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: ‘MY_API_KEY’,

    runs: '3', connectivity: '3G', mobile: '1', budget: { 'visualComplete': '4000' } } } },
  53. 121.

    perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: ‘MY_API_KEY’,

    output: 'wpt-results.json', budget: { 'visualComplete': '4000' } } } },
  54. 123.

    perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: 'MY_API_KEY',

    budget: { 'bytesIn': ‘250’, 'SpeedIndex': ‘1000’, 'visualComplete': ‘1500’ } } } }
  55. 124.
  56. 126.
  57. 129.
  58. 130.
  59. 132.
  60. 133.
  61. 134.
  62. 135.
  63. 140.
  64. 142.
  65. 144.
  66. 145.
  67. 146.
  68. 147.
  69. 148.
  70. 151.
  71. 152.
  72. 153.
  73. 154.
  74. 155.
  75. 156.
  76. 159.

    function myNonEssentialWork (deadline) { while (deadline.timeRemaining() > 0 && tasks.length

    > 0) doWorkIfNeeded(); if (tasks.length > 0) requestIdleCallback(myNonEssentialWork); }
  77. 163.