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

Getting Started with Performance Budgets at Hig...

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.

Tim Kadlec

October 04, 2015
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

  1. “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. Four types of metrics 1. Quantity Based 2. Rule Based

    3. Milestone Timings 4. Speed Index
  3. Quantity Based Easy to understand Clear tie to design/ development

    decisions Almost no connection to user experience
  4. Time to First Byte When does the browser receive the

    first byte of the first response
  5. Easy to track Easy to communicate User timing allows for

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

    very specific metrics Milestone Timings Limited view of the user experience
  7. [ { "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" } ]
  8. 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
  9. 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
  10. 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);
  11. perfbudget: { home: { options: { url: ‘http://stage.mysite.com‘, key: ‘MY_API_KEY’,

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

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

    budget: { 'bytesIn': ‘250’, 'SpeedIndex': ‘1000’, 'visualComplete': ‘1500’ } } } }
  14. function myNonEssentialWork (deadline) { while (deadline.timeRemaining() > 0 && tasks.length

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