A performance budget you can keep

A performance budget that nobody checks is a wish. A budget you can check in two seconds, in your head, while you ship, is a habit. Here is the second kind.

The three numbers

For a content site, almost everything that matters is captured by three metrics. Pick ceilings, write them down, and treat them as a contract.

Where the budget leaks

Almost every budget violation on a blog comes from the same three sources: fonts, images, and third-party scripts.

const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Fonts

Reserve the heavy weights for headings only. Body text in four weights is four round trips the reader never asked for.

Images

A .webp at the displayed width is cheaper than any responsive framework. The responsive framework exists to serve large images; if you do not have large images, you do not have the problem.

Enforce it

A budget you enforce at build time is the only kind that survives a deadline.

const budget = { lcp: 1200, cls: 0.05, tbt: 150 };
const result = await measure(buildOutput);
for (const [k, ceiling] of Object.entries(budget)) {
  if (result[k] > ceiling) throw new Error(`budget breached: ${k}`);
}

Fail the build when a number crosses its ceiling. Everything else is optional. The reader never opted in to slow.