Speed is a feature: setting a performance budget
Engineering
By Ali
Fast websites do not happen by accident, and they do not stay fast without a plan. A performance budget turns speed from a vague goal into a number every team member can check.
Pick metrics customers feel
We budget for Largest Contentful Paint under two seconds, Interaction to Next Paint under 200 milliseconds and almost no layout shift, measured on a mid-range phone on a 4G connection.
Budget the weight of every page
- JavaScript under 170 KB compressed for marketing pages
- Images served in modern formats and sized for the screen
- No more than two web fonts, loaded with a fallback
Check it on every change
Our build pipeline fails when a change breaks the budget, so slow code never reaches customers. A weekly report shows real-user data from the live site.
Say no to the expensive extras
Autoplay videos, chat widgets and tag managers full of old scripts are the usual suspects. Each one must earn its weight in conversions.
Images do most of the damage
On the sites we audit, images are usually more than half of the page weight. Serve them in AVIF or WebP, give every image explicit dimensions to prevent layout shift, lazy-load everything below the fold and never ship a 4,000-pixel photo to a phone. These four habits alone often halve load time.
Make the budget visible
Put the three numbers on the team dashboard next to conversion rate. When designers and marketers can see that a new hero video costs 0.8 seconds, the conversation changes from opinion to trade-off.
On our last ten launches, the median page loaded in 1.2 seconds. Customers noticed, and so did search engines.