Introducing the Enhance Performance Budget Plugin — Begin Blog

By admin
Over at Begin, we don’t just talk the talk, we walk the walk as well. You may have noticed that we like to be thoughtful about how much JavaScript we use on the client side. To that end, we are introducing a new plugin that can be used in your Enhance application to warn you when your application routes are nearing or exceeding the limits you have set.

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
ORG

), a custom metric (e.g.

Time
ORG

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

Limits on

JavaScript
PRODUCT

and CSS

It’s the last point that we will focus on for the

first
ORDINAL

release of

the Enhance Performance Budget Plugin
ORG

.

How to install the plugin?


First
ORDINAL

, 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 e n h a n c e / e n h a n c e – p l u g i n – p e r f o r m a n c e – b u d g e t @performance-budget p a y l o a d – s i z e

20000
CARDINAL

This will enable the plugin and set a total

JavaScript
PRODUCT

payload size to

20 kb
QUANTITY

.

What does the plugin measure?

The plugin is active when you are locally developing

Enhance
PRODUCT

applications. At sandbox startup, the plugin loops through each page in your app/pages and measures how much JavaScript is included in each page. It doesn’t matter if your script tag is in the head, page or

Enhance
PRODUCT

component.

Then, the plugin reports the

JavaScript
ORG

used in each route in a table.

The plugin also watches your project for any changes and re-runs its check. In the example below, I added jQuery to the / route, which adds

129 kb
QUANTITY

of

JavaScript
PRODUCT

, blowing by my

20
CARDINAL

kb limit!

Next Steps