Web site performance budgets link list
If you have started any ambitious web site projects the last year a topic that might have surfaced is ”performance budgets”.
The term means that you decide which performance metrics matter for a web site and set limits for each metric. It can be metrics like response time, PageSpeed score or the total file size of JavaScript and CSS files. This gives you a ”budget” for each metric. Every time something new is added to the web site you have to make sure it doesn’t break the performance budget.
By setting up a performance budget and continuously monitor that you stay within budget you ensure a project where high performance is a key consideration.
What to read/watch/listen to on the topic
I have researched performance budgets a bit recently and I thought I should share the resources I have found interesting on the topic. Hopefully these will give you a good idea of what a performance budget is, how to implement one and why they matter.
1. Start out with these
- Just One Second Delay In Page-Load Can Cause 7% Loss In Customer Conversions
- Performance As Design
- Performance Budget Metrics
2. On working with performance budgets
- Improving Smashing Magazine’s Performance: A Case Study
- Yesenia Perez-Cruz ”Design Decisions Through The Lens Of A Performance Budget”
- RWD podcast episode #21 : Patrick Hamann
- Responsive Design on a Budget
- Improving performance on twitter.com
3. Technical side of things and tools
- Automate Performance Testing with Grunt.js
- Performance Budgeting With Grunt
- Paul Irish ”Delivering the goods”
- WebPageTest
- How Speed Index on webpagetest.org works
- WebPageTest API wrapper for NodeJS
- Google PageSpeed Insights API
- grunt-asset-monitor
Let me know if you have any link suggestions on the topic.