Performance Budgets for Small Sites

A performance budget is a short list of numbers your site is not allowed to exceed. Without one, pages creep heavier with every launch, every campaign and every well-meaning plugin. With one, slowdowns become a failing check instead of a vague feeling.

The budget we start with

These are our default targets for a small business site on a mid-range phone and a typical mobile connection. We adjust them per project, but we never remove them.

Metric	Target	Why it matters
Largest Contentful Paint	2.0 s or less	People judge a page by when the main content appears
Total JavaScript	150 KB or less	Scripts cost far more to run than the same weight in images
Cumulative Layout Shift	0.05 or less	Shifting content causes mis-taps and lost trust
Total page weight	1 MB or less	Keeps pages usable on slow connections

Enforcing it automatically

Budgets only work if something checks them. We run Lighthouse in the build pipeline and fail the deploy when a number slips. The assertion block looks like this:

assertions: {
  "largest-contentful-paint": ["error", { maxNumericValue: 2000 }],
  "total-byte-weight": ["error", { maxNumericValue: 1000000 }],
  "cumulative-layout-shift": ["error", { maxNumericValue: 0.05 }]
}

When the budget fails

A failing check is a conversation, not a crisis. Usually the cause is one oversized image or a third-party script, and the fix takes minutes. Occasionally the budget itself needs to move, and that should be a deliberate, written decision.

What gets measured on every deploy gets fixed. What does not, drifts.