Is it in the Budget?! Performance Budgets and Website Optimization
Budgeting has never been my favorite activity. Allocating time and resources can be constricting and difficult to accommodate everything and everyone. In fact, once after a particularly rough e-board meeting of event planning and fund allocation, my flatmate found a Claire Denis quote,“freedom is not having a budget”, and stuck it to the fridge right next to my “I’m in shape. Round is a shape” Peter Griffin quote. But enough about Family Guy, and more about budgeting. If the Denis quote resonates with you, don’t worry — this article focuses on improvement based budget recommendations, and not bottom-line cutting to fit a budget restrictions.
Site Performance & Performance Budgets:
If you’ve read our post on website performance, or you can take a self-defining term and define it, you know that site performance is how a site performs- usually on a scale of poorly to optimized. This article will take that knowledge and bring it to the next step: How to measure and optimize performance to create a competitive advantage for your website (hint- think “performance budget”). To bring you to this next step, we’ll cover something called (as you’ve probably guessed!) a performance budget: what a performance budget is and does, what its metrics are, a practical application example of a performance budget, and how it can be used to grow.
What a Performance Budget is and Does:
A performance budget is a tool used to measure different aspects and factors of site performance. It is measured in units of bytes and seconds, letting you compare how your website is performing historically or within an industry.
Performance Budget Terminology:
A performance budget is presented in a chart form, and references varying factors that make up site performance. Since reading and understanding the chart is a huge part of implementing a budget, below are a couple of key words and terms that show up frequently:
- Start render- how long it takes (in seconds) for a web page to first display something on a screen after being clicked — this is not necessarily the page content, it might just be a background color, but it’s the first indication that something is loading
- Document complete- how long (in seconds) until the browser considers the page to take to load (may not include content loaded via javascript)
- Page Weight- all of the files that are used to create the web page: the HTML document, any included images, stylesheets, scripts, and other media (this is the total amount of data that must be transferred to the viewer’s system)
- Speed index- how long, on average, it takes for visible parts of a page (text, or images) to be displayed (in milliseconds)
- Fully loaded- this is the total amount of time (in seconds) that it takes to load every bit of HTML, styles, images, videos, etc. on the page
Each of the terms is used as a benchmark to compare site metrics with other peer websites, or historical self-data, and helps to indicate where improvements need to be made for site optimization. Generally speaking, the goal is to have lower numbers for the aforementioned factors than your peers or historical data.
Why a Performance Budgets is Important
Knowing what a performance budget is and what it does is great, but it doesn’t actually tell why you should care about it. At Isovera we like to establish a performance budget because it helps us to guide design, content, and development for our clients. The budget also enables them to identify, target, and optimize key metrics of a site, including total page size, download speed, a number of distinct content assets, and page render time. This allows for a more optimized website performance.
An example of this is when our team worked with Boston Dynamics — we set the budget and beat the targets :)
When we designed the new BostonDynamics.com, we began by benchmarking competitors, colleagues, and others in the robotics space. We kept the performance budget numbers firmly in hand while designing, and that helped guide not only design but also content decisions. By keeping focused on the budget — and the spirit behind it — we were able to deliver on performance, and the resulting site beat expectations by a fair margin. In this particular example, we felt that the best way to show off our client was with video, but we had to find a way to do so while still being mindful of site visitors’ time. By implementing a small JavaScript speed test we were able to enhance site visitor’s experience with the video if visitor bandwidth was fast enough, all while minding the budget.
That combination gave us a really fast experience across the board. While we didn’t quite best every measure, we beat the overall targets for low and high bandwidth experiences by a lot. Low-bandwidth visitors got a 564kb page in about 6 seconds, and high-bandwidth visitors are treated to full-width video robot highlights with a ‘document complete’ mark just a hair over 3 seconds, and a full page load a full 7.5 seconds faster than the closest competition.
Performance Budget Conclusions, Takeaways, and Recap
Overall, the key point of a performance budget is to compare aspects of your web performance to historical, competitor, and industry data, helping you to identify what slows down a site and how you can improve a site’s performance. This lets you set performance goals — both against competitors and against yourself, reducing load time and page weight, and giving you a leaner website and a competitive advantage.
To recap, in this post, we have covered:
- What a performance budget is and does: measures site performance and offers insight to performance optimization
- What a performance budget is made up of: terminology and meanings
- How a performance budget is helpful: practical applications and benefits
We hope you’ve learned more about a performance budget and, over this five-minute read, grown to appreciate more about what a performance budget can do for you. If you’ve jumped the “performance budget” boat early and are interested in website performance, feel free to check out our piece on website performance.
Comments, questions, or suggestions? Things we missed? Favorite quotes? We’d love to hear your what you have to say below!
This article was originally published by Maggie Newberg on our Isovera blog.
