Web optimization with performance budget | frontendhouse.com

We should get familiarized with the term of performance budget if we want to plan a weight reduction strategy for our website. Such expertise will help us to avoid slow page loading and a poor performance.

‘I want my website to be fast’. That's a typical utterance of a non-technical c-level executive who is trying to define the goal regarding the web speed optimization. Performance budget will help us to define the goals more precisely. This is how our sample budget may look like.

• Our website should weigh less than 1MB
• Our main page must load a maximum of 150KB in the mobile version
• Our website must contain less than 4 MB of photos on the desktop and 2MB on mobile.
• Our website must load and allow interaction in less than 5 seconds on a free 3G
• Lighthouse score must be above 85 points.

The main idea of performance budget is to assume minimum criteria for:

1. page loading time for 3G/4G
2. the maximum size of the JS file
3. maximum image size
4. scores from Lighthouse or other similar tools that the team cannot cross
5. time for first user interaction
6. and all the other numbers that can be easily measured by using a performance budget.

Any piece of code that, for some reasons, exceeds one of these criteria, should be rejected in the PR review process. To speed up the merging process, we have a set of tools that could be easily integrated into the repository and even block the creation of pull requests.

It is worth mentioning that defining and describing such pull requests should be prepared at the very beginning of the project, at the time of establishing the minimum requirements. It is an ideal way to communicate with businesspeople and designers. For them, it is a clear sign not to overload the page with HD movies, carousel photos or and an excessive number of fonts.

Tools to help track criteria

Webpack version 2.2RC +

It introduces support for performance budget. It warns us when JS bundle exceeds a certain size. If you would like to adjust it to your project, try to set it this way:

performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 300000,
    hints: 'warning'
 }

What's more, support for code splitting and correct content loading patterns has also been introduced.

SpeedCurve

SpeedCurve provides feedback on how the code affects the performance of the website. It allows tracking the web performance and shows how the website compares to the competition. In SpeedCurve, you can also receive performance budget alerts. It is a great tool to check the performance of the website as it relates to business data. It allows measuring the bounce rate of the site. Thus, the tool helps us to understand the users experience better. While setting the budget, we have a wide range of indicators which could be related to the categories from Lighthouse.

These types of alerts inform, for example, about exceeding a fixed budget for JavaScript.

Performancebudget.io

Performancebudget.io is a useful tool, especially at the first stage of planning the website's performance budget. It will help to calculate and visualize the budget, taking into account different page loading times.

Should we change the budget or adjust to it?

The fact that adding new functionality or changing requirements may affect your budget is nothing new. Unfortunately, not all requirements will allow developing the application without budget changes. However, there are always several moves we can make in this case:

1. Code optimization. That's the right time to focus on improving the quality of the code!
2. We have to answer the question if this new functionality is worth changing the budget, which in turn will affect the performance and the page loading speed.
3. Giving up the theoretically heavy functionalities in favour of the new one. Sometimes it does not have to be a complete resignation. We can switch-off loading a given piece of code from one of the subpages, where we don't need a given functionality,
4. Adjusting the budget to new changes.

How to stay within the budget?

• Optimize the code
• Give up heavy functionalities
• Do not add new ones

Summary

Well-managed performance budget is a powerful tool in the PR review process. It will allow us to keep an eye on all the major performance issues from the very beginning of the software development process. At Frontend House, this system saves a lot of time on possible corrections in the QA process. The code is clean and efficient, the applications load quickly, and they are responsive to users' actions. I recommend you to try out this methodology on your own.