Performance budget is an important topic when you're building a new website, as it will make you think about performance in so many ways that you never thought was actually that complex. Users are expecting fast loading times and search engines are now ranking websites based on performance. You just cannot avoid this topic anymore.
But it's actually not that hard to implement and you should really start getting into it today.
What is a performance budget?
What does it mean to define a performance budget? In practice, it's all about selecting a few metrics and setting upper limits for what should be acceptable values for your projects.
When it comes to a website, web application or e-commerce store, there are three common metrics for performance budgets.
- The first one is a target of time. More than just the time it takes for the page to load in full, you need to optimise the rendering order. For example, you need to measure how long before a user can actually start reading your page. You need to consider the worst-case scenario. For example, someone on an old phone and the slow 3g network and not at home and the latest wifi and fiber internet!
- The second one is a target in the number of resources. This is a bit easier to track because you can easily limit the number of fonts, the size of the images, the number of JavaScript files... There are ways to measure and compress all of those during the development stage.
- The third one is a target based on specific rules of independent or external measures. There are tools like PageSpeed or Google Lighthouse, and you can set targets to aim for a score around 90% for example... That would be a great start!
How to manage a budget?
For all those metrics, you need to think of performance budgets like a financial budget: you have set limits, and you have to decide how you will spend it, like real money.
The tricky part is that you need to consider that throughout the project. It's not just for developers to compress everything at the end, just before deploying the websites to be successful. It needs to start from the user experience definitions early on, and throughout the branding phases, the design, and then the coding.
If you're strict with your targets, you would want to reduce the number of fonts and potentially avoid designing too many interactive features that would require third-party libraries. Only then can the developers optimise the code at the end!
Don't forget marketing
You also need to involve the marketing team and their tracking requirements. One of the main culprits affecting site performance, that we don't speak enough, usually comes from tools such as Google Tag Manager, where everyone in the marketing team can then plug in new tracking scripts. They will slow down the entire experience.
The point is that you must continually test the performance of your site and think about the long-term, not just at a certain point in time when launching the new site.
When you look at your roadmap, you could be adding new features and some extra elements in your content management system. But that may introduce render-blocking scripts that will have an impact on the entire website. Every time you add something, you should have this little bell in your head that reminds you: "what is the performance impact of that feature?"
Start measuring today
To conclude, "you can only control what you measure" is a famous saying, and it applies perfectly here. You need to make sure that you start setting a performance budget with a baseline target. You can then optimise the entire end to end process and keep refactoring to optimise the overall performance.
With a faster loading site, it can only boost your search engine ranking and customer's conversions. So don't delay it any further and make sure all the stakeholders or the project team members are committed to performance.
If you need help with setting up performance budgets, or need to optimise your current site or application, just get in touch. Don't forget to subscribe to my YouTube channel and follow me on Twitter to keep learning with me and grow your career in digital.
Until next time, stay safe and see you soon.
