Setting and Calculating a Web Performance Budget
When it comes to web performance, it's always a give and take game. Do you really need that script or third party asset, and if so, what purpose or functionality does it serve? Is it something you can live without? There is always a good balance that must be found between performance, functionality, UX, and design. That is why it is important to calculate and set what we call a web performance budget and try to stick to it as close as possible.
On average, 39 percent say speed is more important than functionality for most websites.
Web performance budget
What is a web performance budget? A web performance budget is a group of limits to certain values that affect site performance that should not be exceeded in the design and development of any web project. This could be the total size of a page, size of images you are uploading, or even the number of HTTP requests that your webpage generates.
The term "performance budget" has come up quite a few times in the past as bridging the gap between design and performance is always a tricky one. Brad Frost touched on the subject in his post about performance as design. Tim Kadlec discussed the importance of setting a performance budget and Zachary Brady talked about where to start when setting a performance budget.
Performance should never be sacrificed for the sake of presentation.
Setting a web performance budget
The easiest and probably the most effective way to set a web performance budget is at the very beginning of a project to ensure collaboration between your UX designer, visual designer and developer. This way you have input on each and every component. Here are a couple different budget ideas and limits you might set:
- Maximum size of the images you are willing to upload to your website (before or after compression) to maintain as small page weight as possible
- Total number of HTTP requests allowed per page
- Maximum page weight totals
- Setting a threshold to achieve using Speed Index
- Limits on segmented scripts such as JavaScript, CSS, web fonts
- Total load time not to exceed a certain number (seconds or ms)
- Google fonts, local fonts, or system fonts (read our case study on web font performance)
- Number of external resources (perhaps you choose to migrate some third party assets, if possible, to your own CDN)
- Migrate Google Fonts to your CDN
- Host Analytics Locally and on your CDN
Another great way to get an idea of where to start is to also check out what your competitors are doing. Most likely there are one or two that are doing well when it comes to performance, so possibly use them as a benchmark to start or beat.
Measure and calculate performance budget
There are a lot of different website speed test tools you can use to calculate your web performance budget and analyze things such as your total page weight, HTTP requests, and overall load times. Some of the popular ones of course are WebPageTest, Pingdom, GTmetrix, and KeyCDN's speed test tool. However, today we want to share with you a couple other unique ones that you might not have heard of.
Performance budget
The first one is the free website based performance budget tool, created by Jonathan Fielding, which helps you calculate a performance budget. Simply input how fast in seconds you want your site to load, and pick the connection speed.
On the next page you can adjust the sliders based on the HTML, CSS, JS, Images, Video, and font usage on your website. And set your approximate budget in KB. Notice it will give you a warning if your total assets are exceeding your total budget.
On the last page it gives you a performance budget breakdown and estimated load times across the board for different connection types. Again these are all estimates but it can be useful to see how much spread there is between all the connection speeds. Don't forget to optimize for mobile and slower devices. According to Cisco's 2016 VNI report, 2G devices still made up for over 13% of all global mobile connections. It is important to remember that not everyone has access to 4G and soon to be 5G.
Browser calories
Another great free little tool is called Browser Calories, created and developed by Zeno Rocha. This comes in the form of a browser extension, available for Chrome, Firefox, and Opera. On his site he emphasizes that the web is getting fatter and if you take a look at the top 1 million sites, you will see that median page weight is now bigger than SimCity 2000. At first glance the extension appears to be quite humorous in nature as it compares your performance to more of a food diet, but it actually is a very handy little extension.
With the Chrome extension you can run it on any page and it will display the "performance facts." This will show you the amount per serving and see where your load is distributed. The values are based on the top 100 websites from HTTP Archive.
You can also change your performance budget and set different values based on the project and or website you are working on. You can do quick fixes on your site and re-run it very fast to see if you are staying within your budget. At the moment it doesn't work on local sites.
Summary
Using a web performance budget can be a great point of reference for helping you figure out what should and shouldn't go on your website. If something is slowing down your site, either figure out a way to optimize it or if it doesn't serve a useful purpose, perhaps it is time to drop it altogether. The main idea is to set goals for your website so that you can better balance the performance you are wanting, without harming the functionality or user experience.
Do you have any thoughts on setting or calculating a web performance budget? If so, we would love to hear about them below. Together we can make the web faster!