We’ve all ended up on a web page and found it loading unbearably slow.
It’s annoying, it’s counterintuitive and it’s a waste of everybody’s time. Any digital team worth their salt will avoid it at all costs.
While the strength of your signal (be it WiFi or 3G/4G/5G) can be to blame, it’s also much to do with the size of the web page that you’re trying to view. This is why a digital team will employ ‘performance budgeting’ to ensure the web page functions as best possible.
So how does it actually work?
To put it simply, performance budgeting involves setting a budget on a web page and ensuring it doesn’t exceed it.
You could either set the budget by a specific load time (for example: the website must load within 2.5 seconds) or by breaking the budget down by the size of the page. Whether you set the budget by the size of the page or by its load time, the two will always be linked.
For example: in order for a page to load in 2 seconds on a 3G connection, the page needs to have a maximum size of 800 kilobytes.
Kilobyte sizings may not mean much to the layperson, however it’s at this stage that a digital team will make or break the client’s spec.
If a fast load time has been specified, the team will likely break down the various elements of a page to suss out how elaborate the page can be.
Often, clients will want a fast-loading page that also offers advanced elements (such as animations, images, fonts), which requires some compromises.
The below image puts things in perspective.
Using the first breakdown, we’d be able to limit the respective elements of a site and calculate how much the page will be able to offer before going over budget. The second breakdown shows how a product page on the same site might perform - not every page on the site has to stick to the same budget.
How it relates to our clients
A performance budget is determined by the specific requirements and goals of a website, so it’s important to make sure all goals are set clearly from the off, rather than trying to retrofit the website with a new spec towards the end of the project.
The performance budget is agreed towards the start of each project and therefore determines many of the decisions during the design and build, which is why realistic specifications (and expectations) need to be set.
It's referred to by by all members of the team (from the UI Designers to the QA Testing team) over the lifetime of a project, making it one of the most integral parts of the spec.
The right performance budget equals the right product, resulting in a happy client.