Performance budgets have been around for a number of years (since 2013 to be precise) and have proven their worth over and over again. CTOs the world over have achieved and maintained performance targets by adopting one.
The budget in question is not the amount of money that you and many other web developers like you will be spending on achieving optimum performance this year. Rather, we will be taking a detailed look at the notion of ‘performance budget’. It is a concept that deserves to be more widely adopted by web site producers. Once you have set yours, you will probably wonder how you ever lived without it.

What is a performance budget?

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.
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.

Why the need to set a performance budget?

In October 2000, the average page weight was 89KB (including scripts and images). Today, the average page weight has reached 2.6MB, i.e. a thirty-fold increase in 15 years. Meanwhile, the number of requests has increased tenfold.
The drive towards increasing use of Key Performance Indicators (KPIs) has led to a whole array of tracking scripts and widgets being incorporated into web sites, all of which have a huge impact on performance.

Meanwhile, our web use is going ever more mobile. Connections are therefore less stable and increasingly subject to factors associated with network quality and geographical location.
Users have ever higher expectations, with 57% of web users leaving a site after a waiting time of just 3 seconds, 80% of these never to return.

Web site design is therefore not in keeping with typical web use when it comes to performance.

There is an ever more pressing need to streamline and optimise our web sites. The performance budget is key to this optimisation!

How should you set a performance budget?

A number of criteria are key to setting a performance budget:

    • All teams including marketing, design and development 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.
    • 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.
  • Due consideration must be given to the choice of metrics. For instance, you might measure:
    • Milestone timings: such as Start Render or Time To First Click
    • Speed Index: a good indicator of user experience
    • Base metrics: such as number of requests, overall page weight or image weight
    • Implementation-based performance metrics: such as Yslow, Page Speed Insight or webpagetest.

    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.

Needless to say, the further into the project you wait before taking performance on board, the harder any measures will be to implement.

Sticking to a performance budget

Where adding a given component would take you beyond the agreed budget, there are four potential solutions:

  1. Optimize an existing feature or asset.
  2. Remove an existing feature or asset.
  3. Refrain from adding the new feature.
  4. 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).

It’s time you gave performance the attention it deserves. A performance budget will serve as a good starting point, and will stand you in good stead as the Web evolves!

Décrypter et améliorez votre webperf : Livre blanc

Source : Dareboost

Warning: count(): Parameter must be an array or an object that implements Countable in /nas/content/live/fasterizeblog/wp-content/plugins/slickquiz/php/slickquiz-front.php on line 59
Hello SMX Paris !