Sommaire

Why is a performance budget key to your web performance success?

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:

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:

  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), in order to give web performance the attention it deserves for a faster website! 

Want to know more about how to read, understand and improve your web performance KPIs?

Download our white paper

Sommaire
Partagez !
Recevoir la newsletter

Publié par

Partagez !

Découvrez d’autres articles…

Sur beaucoup de sites web, les pages ne peuvent pas être mises en cache à cause de la personnalisation du contenu, ou de produits dans le panier sur un site Ecommerce. Mais lorsque l'utilisateur arrive sur une page pour la première fois, il accède à une page qui n’est pas encore personnalisée, et celle-ci peut donc être mise en cache.
Tout le monde le sait : la vitesse de chargement est cruciale pour l’engagement de vos visiteurs. Au-delà de 3 secondes, ils perdent patience et s’en vont… sur les pages de vos concurrents ! La vitesse d’affichage n'est pas qu'une préoccupation d'expert webperf, c'est aussi une exigence de vos utilisateurs.

Mais restez informé !

S’inscrire !

Chaque mois, pas plus, recevez :

🆕 Les dernières publications sur notre blog : évolutions de la plateforme, nouvelles fonctionnalités, événements, conseils techniques, analyses…

💡 Une sélection d’articles de veille : actualités techniques, tips, tutos, et autres trouvailles sur la webperf…

Solutions