As guarantors of web performance, any IT and Marketing team should set up a Performance Budget.
This concept first appeared in 2013. When we refer to a Performance Budget, we are not talking about a budget in the financial sense of the word. A Performance Budget means setting a performance threshold that you hope to stay within. Hence, it is not expressed in pounds or dollars but in terms of a metric such as seconds, page weight or number of files. Have you never established one yet? Now may be the time to get started, we’ll explain why and how.
A Performance Budget to address the evolution of uses towards mobile
In October 2000, the average size of a web page was 89 KB (images and scripts included). Today, the average weight is 2.5 MB, a thirty-fold increase in 20 years. Meanwhile, the number of requests has increased tenfold.
Also, navigation is increasingly done via mobile – at least 50% for many markets (some of our retail customers even see their traffic coming from 80% from mobile). Connections are therefore less stable and increasingly subject to factors associated with network quality (4G, 3G, and at worst Edge) and geographical location, but also to the devices performance.
At the same time, the requirements of Internet users are increasingly high: after 3 seconds of waiting, 57% of Internet users leave a site and 80% of them will never return.
However, the drive towards increasing Key Performance Indicators (KPIs) has led to a whole array of trackers, tags and widgets being incorporated into websites, all of which have a huge impact on performance.
So, as odd as it may seem, website design is therefore not in keeping with typical web use when it comes to performance. So let’s see how a Performance Budget can help you back on track.
But then … what is a Performance Budget?
The performance budget has nothing to do with hard currency. It consists in defining a threshold not to be exceeded to keep a website efficient. It is therefore not expressed in Euro, but in page weight or in number of files.
By setting a Performance Budget, you will be able to safeguard the speed of your web site and detect any regression in performance.
This then ensures that you keep a continual eye on performance and it becomes a factor that is never overlooked. This is the reason why Performance Budget must remain a reference before undertaking content developments or modifications.
How should you set a Performance Budget?
A number of criteria are key to setting a performance budget:
-
- All teams including marketing, design and IT should be involved, working together to set the technical thresholds and indicators that need to be monitored and adhered to. Everyone involved needs to understand that performance is not the preserve of developers alone: it is a fundamental design feature, UX as UI.
-
- The performance budget must be set at the very outset of the project. Setting a performance budget once the look and feel of your web site has been finalised will limit how effective it can be. One solution is to incorporate performance and monitoring into the initial specification. You need to think “web performance by design”.
Due consideration must be given to the choice of metrics. For instance, you might measure:
- Milestone timings: such as Start Render, FCP or Time To First Byte
- Speed Index: which indicates the speed at which above-the-fold content is displayed to the user
- Base metrics: such as number of requests, overall page weight or image weight
- Implementation-based performance metrics: such as PageSpeed Insights or WebPageTest.
Here are some suggested tools that will help you track your Performance Budget:
- Free (and all the more interesting as they can be used as part of a continuous integration to validate your Performance Budget before production starts):
- Paid:
When it comes to choosing which metrics to set your budget against, it is important to look beyond server performance. Choose as close an indicator as possible of user experience!
Gauging your web site against your competitors’ is one way to set your performance threshold. According to Tim Kaldec, we only perceive a difference between two timings where there is a greater than 20% difference between the two. Thus, you might decide that your budget is equivalent to ensuring that your Speed Index remains 20% below that of your main competitor.
And you can also use HTTP Archive to assess your situation in relation to the state of the web in general.
Sticking to a performance budget
Where adding a given component would take you beyond the agreed budget, there are four potential solutions:
- Optimize an existing feature or asset.
- Remove an existing feature or asset.
- Refrain from adding the new feature.
- Or, as a last recourse, amend your Performance Budget to one which sets more suitable boundaries. Obviously, this is not the solution that should be immediately adopted when faced with the slightest hurdle.
The Performance Budget is intended to serve as a point of reference throughout the lifetime of your web site. It provides a means to assess the implications of each additional component (script, image, widget, etc), in order to give web performance the attention it deserves for a faster website!
