Finding balance

Expectations for dynamic webpages, responsive design, and delightful experience have shaped the files used to build the modern web. While lovely images and clever JavaScript fit the bill, eating up kilobytes and chomping on massive file size metrics is no way to maintain a performant site.

Luckily size is not necessarily an indicator of how pleasant your users will find your site. Balancing performance with beautiful usability is more doable than ever.

Creating context for your performance

While Blue Triangle is known for tracking page speed and site performance, we do more than just tie performance improvements to revenue increases, track errors, manage third-party tags, and dice metrics for custom reports. We also monitor the amount of data it takes to build a page.

Trending file size and performance metrics is useful, but difficulty arises when those trends have no context. How do those trends compare to accepted industry values?

So we worked with Google to figure out how to help our customer set boundaries, and in doing so, analyze how to make the improvements needed to meet company-wide goals.

Google calls these collective boundaries a ‘performance budget.’ We call it the same thing to keep this consistent for you, because we think you will find them useful.

What can a performance budget do for you?

“A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent.”

So maybe your development team wants to reduce CSS delivered size to keep pages light, or marketing wants to see a lower measured First Input Delay. Now, Blue Triangle has performance budgets to keep teams accountable.

Setting up performance budgets

1. Pick a metric
   
   
   
   We offer views of timings and assets for performance budget configuration. When you chose a timing metric, it will report on a specific amount of time that the average of traffic must experience. When you choose an asset to report on, it will show you the average delivered size of that asset. 
   
   
2. Set Your Target
   
   
   
   You can decide whether to measure your chosen metric in real or synthetic data. You can also set a specific target. For timings, this will be a certain number of milliseconds. For assets, this will be a certain amount of data in either kilobytes or megabytes. By default Blue Triangle has set these measurements to our standards but they are completely customizable.
   
   
3. Save your configuration and track performance 
   
   
   

   Once you have saved a configuration, it will add to the overall monitoring on the page. 

   This performance budget page will allow you to view all your configurations simultaneously, in several views. 

   The first is a quick snapshot of how the site is performing, and whether the budget targets you set are being met. 

   
   

   From there, you can drill down into more detail about each of these targets, see whether they are being exceeded, and if so, by how much over time. 
   
   You will also be able to view a breakdown of some of the content loading on your site, usually the slowest files. That way you can drill down with ease into issues with 1st Party and 3rd Party content.
   

   
   

   We have additional widgets you can use for monitoring content too, all on this Performance Budgets dashboard in Blue Triangle. 

Going on the performance budget diet 

While you continue to monitor your performance budgets on the page where you completed the setup, sometimes you want to monitor while you sleep so that your site stops consuming that overnight data and experiencing bloated timings. 

We have built in additional functionality for filtering the data for analysis, exporting the report, and even setting alerts so you know what is happening with your metrics when you cannot watch them directly. 

All of this is to help you budget – and go on that performance diet your site needs.  

Want to learn more? Let us demo some metrics for you!