Performance
The performance budget playbook: 100KB on every page
Performance budgets are not optional. Here is the playbook we use to hit 100KB on home, 110KB on service detail, 90KB on blog post and 80KB on contact.
By Renish Mithani8 min read
Performance budgets are not optional. They are the difference between a fast site and a slow one. Here is the playbook we use to hit our budgets on every page.
The budgets
- Home: under 100KB gz JS.
- Service detail: under 110KB gz JS.
- Blog post: under 90KB gz JS.
- Contact: under 80KB gz JS.
- Third-party scripts total: under 50KB gz.
How we hit them
- **Server-render everything important.** Headings, body copy, FAQ and schema are all server-rendered. Search engines and AI crawlers see them without JavaScript.
- **One LCP image per page.** Preloaded, marked fetchpriority="high", never lazy-loaded.
- **No inline videos.** When video is needed, embed from YouTube with a written summary.
- **Tree-shake everything.** We use the auto-import optimisation in Next.js to drop unused icon code.
- **Lazy-load below the fold.** Below the fold, code is loaded when needed.
The enforcement
Performance budgets are enforced in CI. A PR that busts a budget without justification is blocked. We run Lighthouse in CI on the top 20 routes per country.
What to do when a budget is bust
- Identify the cost. Use the bundle analyser to find the offender.
- Find the fix. Replace, remove or lazy-load.
- Justify the cost. If you cannot fix it, document the reason in the PR.
Questions
Frequently asked questions
Common questions about the performance budget playbook: 100kb on every page, answered plainly.
A hard cap on the bytes shipped to the browser for each route: HTML, CSS, JavaScript, images and third-party scripts. Ours are in rules.md section 10.
Because every kilobyte is a cost on slow networks, especially mobile in India. Under 100KB gz JS keeps Largest Contentful Paint under 2 seconds on a mid-range Android.
On every PR in CI. The build runs a budget check against the route map and blocks the merge if any route is over its cap.
Document the reason in the PR. The team can override the budget for that one route with a written justification and a date to revisit.
One LCP image per page, AVIF first, preloaded with fetchpriority high. Every other image is lazy-loaded with declared width and height.
Open a budget review. Either the budget is wrong for the route, or the architecture is. The review chooses, in writing, and the next quarter ships to it.
Was this helpful?
One tap. No email, no signup.