Performance Budget Calculator and support for `budget.json`

[mitogh]

Feature Description

This feature request is to create/add support for a UI where the user can define their own metrics as some metrics are more important than others depending on the use case or needs of a user.

The UI would be similar to: https://perf-budget-calculator.firebaseapp.com/

Where a user would be able to define their own metrics, once these metrics have been defined a file called budget.json would be created to store all the values from the budget.

The budget.json can be used to perform continuous reviews of the state of the site and can be used in conjunction with

• 63

To provide a reporting mechanism to the owner of the site.

Additionally, the tool should support an existing budget.json similar to how theme.json works for the blocks editor.

[gabriel-detassigny]

If no one has started working on this yet, I would be happy to look into that.

[eclarke1]

If no one has started working on this yet, I would be happy to look into that.

Tagging PoCs @AymenLoukil and @josephscott here for visibility

[AymenLoukil]

Hello @mitogh,

In my opinion, the check against budget should be the role of a measurement tool or a CI such as Lighthouse CI.

Is this going to check every single page? Could you please give more precise context on this?

Thanks,

[mitogh]

Sure @AymenLoukil

In my opinion, the check against budget should be the role of a measurement tool or a CI such as Lighthouse CI.

Agree here, however not all WP installations are deployed using a CI system, so having a tool within WordPress similar to site health where we can provide a record in how things are changing in terms of performance would be helpful so you can have a guide, for example, let's say you install a plugin and you have a defined budget per page once this plugin is installed you can review if this plugin is changing your performance budget.

Is this going to check every single page? Could you please give more precise context on this?

This would be a manual process, where you can enter specific URLs let's say the home page, product page, and so on where the budget might be a bit different and needs to run manually so you have control over when something is tested against this budget.

Additionally having a tool to create a budget.json would be helpful as this plugin itself can use the data from that file to perform automatic audits based on the settings defined by the user.

[josephscott]

I like performance budgets, but I'm not clear on where or how this would be used.

[mitogh]

Specifically, this can be beneficial to keep track of how your site or a specific page performs as changes are applied to the site, due we can set up some high-level metrics those metrics are generic instead of having an owner/developer defining those metrics has a more meaningful impact on the overall page performance, site main goals.

Once the budget.json file is created this file would be used to perform a report or can even be used with external tools to review how specific pages of your site are doing, so basically this is a mechanism in which we can set up a set of metrics that we can compare as time progresses and measure performance instead of using generic metrics.

Based on the quote:

If You Can't Measure It, You Can't Improve It - Peter Drucker

This tool would help with the first part making sure measurements are as specific as possible to the site so improvements can be meaningful for the final users.

[josephscott]

Specifically, this can be beneficial to keep track of how your site or a specific page performs as changes are applied to the site

How? What is being used to take these measurements?

Once the budget.json file is created this file would be used to perform a report or can even be used with external tools to review how specific pages of your site are doing

These are the details I'm missing. If I've got a budget.json file, what reads it? What does the testing and comparison? Where is that data stored? How does it report on that data?

I'm a big fan of performance budgets, and measuring, those are the details I'm missing here though. A budget.json file by itself doesn't do anything, it needs to be in conjunction with other things.

[mitogh]

Great questions @josephscott

Most of the work for measurements should be described in, specifically which tools and different approaches for each:

• 63

• 64

How? What is being used to take these measurements?

The main idea behind this ticket was to add support for the file. As described previously the measurements would be taken from the file itself, the how is described in the next section.

These are the details I'm missing. If I've got a budget.json file, what reads it? What does the testing and comparison? Where is that data stored? How does it report on that data?

A new set of issues should be created with the strategy around the next steps, but here are some personal ideas on how we can go about this in terms of implementation.

• Create a new post type each post type for the reporting.
• Each entry on this post type would represent a unique URL
• Each entry would have N number of reports that would run against the budget.json file using a tool like Lighthouse CLI to compare metrics as time progresses.
• A report would be run against a URL and stored in the URL where was executed.
• A chart can be used as a visual indicator in how the performance changed over time.

I'm a big fan of performance budgets, and measuring, those are the details I'm missing here though. A budget.json file by itself doesn't do anything, it needs to be in conjunction with other things.

Once you have a file you can use it with lighthouse and your browser to run tests as you need to perform analysis in terms how how changes are affecting your defined metrics.

[eugene-manuilov]

IMO 99.9999999% of users know nothing about the performance budget and how to use it. I believe they will be confused and will not understand what they need to select and why.

This is a very technical thing that is needed only for developers. I think even if we want to implement it, it should be done in a similar way to how the robots.txt file is rendered. UI isn't needed for it.

[mitogh]

IMO 99.9999999% of users know nothing about the performance budget and how to use it. I believe they will be confused and will not understand what they need to select and why.

Well, I'm not sure of the percentage but I agree, the majority of users won't know about this, in the same way as for other Core Web Vitals metrics but in this case, the aim of the plugin would be to help educate about those metrics the meaning, usage, and impact.

This is a very technical thing that is needed only for developers. I think even if we want to implement it, it should be done in a similar way to how the robots.txt file is rendered. UI isn't needed for it.

well not quite, but if you are using the performance plugin and a report is failing because of a defined metric that is not meaningful in your case would be helpful to adjust the metric from a single place. Agree with the fact that maybe the UI it can be too much but at this point, this issue was mostly to discuss this type of concern.

[peterwilsoncc]

My reading of the docs in that the budget.json file is a local file only and it is not possible to use a remote URL --budget-path=http://eg.w.org/budget.json.

If this is correct then referring people to https://perf-budget-calculator.firebaseapp.com/ in docs is certainly helpful but I don't think it needs to be reproduced in the plugin.

Please correct me if I am wrong and the budget-path switch does accept remote URLs.

[adamsilverstein]

Thanks for opening the ticket @mitogh - interesting discussion and I learned about a feature in Lighthouse.

We discussed this in the bug scrub today and agreed with @peterwilsoncc's last comment: this doesn't really need to be reproduced in the plugin.

That said, I am going to close this ticket out. A great place to follow up to educate developers about performance budgets would be a post to the WordPress developers blog.