Is it in the Budget?! Performance Budgets and Website Optimization

Maggie Newberg // October 2017

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 coming back from a particularly rough day stuffed with meetings, budgeting, and fund allocations, 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 Denis’s wise words resonate with you, don’t worry - you’re in good hands, as this article focuses on ways to improve a budget and not restrictions for creating a bottom-line cutting budget.

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.

Why a Performance Budget 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 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.

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.

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

If you enjoyed this piece, but are more of a media-based learner or want to share what you’ve learned via multimedia, feel welcome to check out our quick 2-minute YouTube video on performance budgets!

Want to learn more?

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.

Maggie Newberg Headshot

Maggie Newberg

Marketing Specialist

Working in marketing & dabbling in operations, I experience the best of both worlds by leading marketing campaigns, content initiatives, and conference sponsorships, as well as overseeing day-to-day activities such as time tracking management, invoicing, and corporate level communication.