Why your web site needs a Performance Budget

You may have never heard of the term "Web Performance Budget" but I believe it is probably one of the most important features any website can and should have. If you are currently looking at building or updating your website, then this is something you need to look at.

So what is a web performance budget?

Simply put, it is a guideline that you create and (try to) follow, to ensure that any page in website loads within a chosen period of time. You take into account how quickly you would like a page to load and what you need to do this by setting the file sizes for all the assets that make up your web pages. Your designers, developers and content creators can then be given the freedom to do what they want so long as they follow the performance budget.

Why is this important?

The faster a potential client can interact with your website, the more likely they are to convert into a paying customer. Creating and following a performance budget is the best way to make this happen.

While it sounds simple in practice, implementing a performance budget can be a complicated process, requiring owners, designers, and developers to think out the box and to understand the primary purpose of your website.

The first and possibly biggest hurdle in creating a performance budget is understanding how a user connects to your site and the speed at which they do.

A popular statement often said is that "Our users have fast internet connections, fast computers, and the latest in smartphones, unfortunately, this argument is severely flawed.

So how fast should we assume an internet connection speed.

That's a tough question to answer. To maximize performance, we would recommend being cautious:

So now what?

Once we have an idea of what type of internet connection speed we should be working with, we can look at how big our website and assets can be, to load within a set period of time.

So assuming we would like our page to load in 5 seconds on a slow 3G connection, we can see that the biggest a page can be is 480KB. If we wanted a page to load within 8 seconds and we are targeting the general population, that maximum size drops to 35KB.

Okay, so that makes sense, what's the problem.

The problem is that the typical design process does not take into account these limits. Often design agencies are unaware of these limits or they are overlooked in favour of design and aesthetics. The overall performance of a project is based on their own computers and internet connections. Speed and overall performance are left to the end and are more of an afterthought. The end design is what is seen as important, The problem is highlighted by the fact that the average website is round about 2.5mb in size and growing. Great when you have high-speed internet, not such a great experience when we don't.

And while I understand design is important, a successful web presence is a combination of many things working together, not just the look and visual aspects. It's the end result that matter most. How the site benefits your business. And while yes, a high res full-screen background can look impressive. When it takes forever to download, because a users smartphone is backup all its images, it's not as impressive.

Yes, some sites can justify a bigger page size. Amazon, for example, can be over 5mb for a single page. But then they did not get there overnight and evolved with their market and generally not a strategy I would recommend following.

It's more than possible to design a good looking website that still loads quickly, it's just not as easy, but worth it.