What is a Web Performance Budget?
A web performance budget for a website basically dictates how much of your effort and time you should spend on items that affect website performance, not money. 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. It is a give-and-take game that you can lose and lose hard if not properly budgeted for.
Google values speed 39% more important than functionality for most websites.
Think about it as a financial budget that you set up for your household over a certain period of time. While creating a household budget, you carefully analyze your needs and expenses. After calculation, you finally determine how your budget will be broken down. You decide to spend more in one area and cut down the spending in other areas so that you can stay within your pre-determined budget. The same rule applies when you establish a performance budget for your website. Like your household budget, it is important to calculate and set your web performance budget and try to stick to it as close as possible or risk losing new visitors or slowing down your website to pre-90s era speeds.
How to Establish a Performance Budget for Your Website
Here are some tips, ideas, and limits to help you allocate the right amount of budget to each of the important elements of your website.
- 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 Google’s Speed Index
- Total load time not to exceed a certain number (seconds or ms)
- Google fonts, local fonts, or system fonts
- Number of external resources (perhaps you choose to migrate some 3rd party assets, if possible, to your own CDN)
1. Establishing the overall limit for your website’s size
The budget of a website consists of a variety of elements that make up the website’s pages, including CSS files, HTML files, images, scripts, fonts and many more. Just like the financial budget, the first step is always to identify the overall limit of your website’s size. You can always work backward from that point in order to determine the amount you should spend on individual items.
There is a 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.
As a rule of thumb, try to keep all the pages of the website between 600K to 1Mb in size. Even the higher end of this range still provides a sizable download. Not all the pages of your website have the same weight. So, for an optimized performance, you should try to make the page as light as possible.
If using WordPress, there are plugins that can help with this automatically or some of the better ones that require an understanding of caching, CDN usage, minifying scripts, and CSS, etc.
Here are a few to consider if going this route:
These are some of the best, but be careful…if not set up correctly, your styles and scripts could stop working and you could even get 500 errors making your website unusable. There are plenty of documentation out there to follow that can help with setup and usage.
2. Creating and Testing a list of items
When you have an overall budget in mind, the next step is to break down your budget according to the elements of your page (HTML, CSS, Images, Scripts, and Fonts etc.). After that distinguish the most important element of your page and allocate maximum budget here. Following this order, just list down the elements in the priority manner and allocate the required percentage of the budget to each one of them.
Once you have built up your website’s page, it is always a good option to test its download speed and overall performance. Many online tools are available to help you for this purpose where you can also make improvements in the speed.
Here are a few to get you started testing:
Basically, performance testing does not end once your website goes live. It is a never-ending process so you should keep evaluating your website continuously. Every time you create a new post, a new page, integrate a new script, add new CSS…you should test your website. The more you add, the slower your website becomes. Keep it up to date to ensure your hard work is not hurting your SEO.
3. Making cuts and sacrifices
Like any household budget, there will be times when your requirements will exceed your budget. In such times, you should learn to make some cuts in the budget. It is always a better option to make a sacrifice in one area so that you can spend more in another that really needs your consideration at that particular time. Think peacefully in such situations and make a wise decision on page-by-page basis depending on the situation.
Speed = more customers. It is win/win for your company.
Having a fast website that is optimized for not only SEO but for your visitors if a must in this modern age. When you are calculating your web performance budget, you need to find what is required and what is not. There are simple ways to accomplish a web performance budget that does not sacrifice your overall design and brand. It is best to start from the beginning with speed in mind and move forward, testing the whole way. The better your website is built, the faster it is, the more Google likes it.
If you are interested in learning more about how this topic can help your business, please contact our agency on our contact page or call us at 1-888-964-4991. We publish a new article once or twice per month so make sure to follow us on social media and allow for push notifications if you want to stay in the loop with our agency and digital marketing.
Posted In: Information
If you want to see more of our blog articles and have them delivered directly to you, you are in luck. Sign up below and you will get emails when we publish new articles.
Don't worry, we hate spam as much as you and will not send you junk. Just informative articles.
About the Author
Director of Website Development
With over a decade of experience designing and developing websites, Eric has worked in every position of the agency ladder. He is fluent in multiple backend and front end programming languages and has written multiple international best selling plugins for WordPress. He has been part of or is still part of many startups. He is the Director of Website Development for Future Design Group and one of it's founding partners.