A performance budget is three numbers written into the proposal before design starts. For Maison Verre they were 900 kilobytes on the homepage, 35 requests, and a Largest Contentful Paint under 1.8 seconds on a mid-range Android phone over 4G.
The site launched at 640 kilobytes, 22 requests and 1.3 seconds. Nobody argued about it during the project, because the argument had happened in week one.
Why the numbers come first
Most agencies measure performance at the end, when the design is approved and the client has fallen in love with a full-bleed video. At that point every fix is a negotiation, and the agency loses most of them.
We do it the other way around. The budget is set in Discovery, from three inputs:
- The audience’s devices, read from the client’s existing analytics.
- The business number the site is supposed to move. A checkout site gets a tighter budget than a brochure.
- What the competition ships. We test the five sites the client named as references and publish the results in the brief.
The numbers are then a constraint the design has to satisfy, the same way a print designer works to a page size.
What happens when a client wants the video
They usually do, and the answer is not no. The answer is: here is what it costs.
A hero video at acceptable quality weighs between two and six megabytes. Against a 900-kilobyte budget it does not fit, so we show the trade. Either the video plays only on desktop, above a certain connection speed, replaced by a still frame elsewhere. Or the budget moves, and we show what that does to the load time on the phone their customers use.
In nine years, four clients have chosen to move the budget. Every one of them knew the number they were paying for.
How the budget is enforced
The build fails if the homepage exceeds the weight. Not a warning in a dashboard nobody opens, a red build that stops the deploy. Images are converted to WebP before they reach the repository, fonts are subset to the characters the site actually uses, and third-party scripts are listed in the proposal with their weight next to them.
After launch, Clara’s team measures the real Largest Contentful Paint from field data for ninety days. If it drifts, we know which release did it.
The uncomfortable part
A budget means saying no to things that look good in a design review. A second web font. A carousel library. A chat widget that weighs more than the rest of the page combined.
We have found that clients accept every one of those refusals when the number was agreed before the design existed. They reject almost all of them when it appears afterwards. The budget is not a technical document. It is the thing that lets the design review stay about design.
