September 8, 20251 min read
Shipping less JavaScript
performancenextjs
Every dependency you add is a tax every visitor pays — on a fast laptop you will never notice it, and on a five-year-old phone it is the whole experience.
Set a budget and enforce it
Pick a per-route JavaScript budget and fail the build when a change blows past it. A budget nobody enforces is a wish; a budget in CI is a constraint that shapes decisions.
// route budget, checked in CI
export const budgets = {
"/": 90, // kB
"/checkout": 75,
};
Render on the server by default
Reach for a client component only when you actually need interactivity. Most pages are mostly static; let the server do that work and ship the difference, not the whole framework.
Performance is not a pass you do at the end. It is a budget you spend all along.