Introducing the Enhance Performance Budget Plugin
by Simon MacDonald
What is a performance budget?
MDN defines it as:
A performance budget is a limit to prevent regressions. It can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. Time to Interactive), a custom metric (e.g. Time to Hero Element), or a threshold over a period of time.
When should you set a performance budget?
Ideally, you will decide upon a performance budget before starting a project. This will ensure that every decision you make will consider the impact on site performance. Some items you may want to consider when setting your performance budget are:
- Total number of HTTP requests per page
- Maximum image size
- Maximum page weight
It’s the last point that we will focus on for the first release of the Enhance Performance Budget Plugin.
How to install the plugin?
First, install the plugin in your Enhance project.
npm i @enhance/enhance-plugin-performance-budget
Then open your
.arc file and add the following lines.
@plugins enhance/enhance-plugin-performance-budget @performance-budget payload-size 20000
What does the plugin measure?
The plugin is active when you are locally developing Enhance applications. At sandbox startup, the plugin loops through each page in your
The plugin also watches your project for any changes and re-runs its check. In the example below, I added jQuery to the