Thinking About Performance Budgeting For Web Design And Development

Performance BudgetingThere are many different ways of thinking about web performance. In an earlier article, we looked at time-to-first-byte, and offered a number of suggestions for improving the time it takes for a site to get its initial data to the browser. But web developers need a more expansive conceptual toolbox than something as simple as time-to-first-byte, which is one component of a fast site, but far from the only important consideration. In this article, I’d like to talk about a more overarching way of thinking about performance optimization: the performance budget.

Performance budgets set a hard limit on some metric that impacts a user’s experience of a site. There are many combinations of metrics that can be used, and I’ll link to some resources that go into that in detail at the end of this article, but for simplicity’s sake, I’ll stick to page weight here.

Page weight is the total size of the resources a page loads and it’s most often measured in kilobytes. The simplest way to make a page faster is to reduce its weight. Performance budgeting dictates that a desired maximum weight is decided on at the beginning of a project, and that as the project moves forward, all design decisions are made to conform with that budget.

If you decide that you will budget 1 MB for each page, that will have a significant impact on what that page can contain. It will limit the number of images, number of typefaces, and the sizes of CSS and JavaScript files that can be included. A page’s content will be a considered set of compromises that balance performance optimization and functionality.

That may seem to many an unwelcome set of constraints, but the typical web development process is addictive — gradually adding functionality as required — and without a hard limit that’s a recipe for excessively heavy web pages.

Most web designers and developers have had the “one more thing” talk with their clients. If a client decides at the last minute that they have to have an image-heavy slider on their page, a performance budget gives developers a way to frame a conversation about how that will impact other content on the page. Yes, you can have the slider, but if you do you can’t also have the images further down the page. Is that really a price you want to pay?

More importantly it affects the development process from the start by giving developers a limit that will impact all their design decisions. It’s vital that performance optimization is part of the design process from the very beginning, rather than being hastily carried out at the end. In many ways, constraints can be powerful psychological allies: they force us into thinking more deeply about the solutions we offer and can often be the spur for innovation.

Tim Kadlec has written in depth about appropriate metrics for performance budgeting. Zachary Brady has written about getting started with performance budgeting.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED