Deep dive: setting a performance budget for a lander, step by step

Deep dive: setting a performance budget for a lander, step by step

Page speed and conversion are linked, but the relationship is non-linear and most-cited badly. The defensible version: Google's aggregated mobile data found bounce probability rises sharply as load time grows past a few seconds, and the marginal damage per added second increases — the first second of delay hurts less than the third. A performance budget turns that curve into an enforceable constraint instead of a vague aspiration.

The budget playbook:

— Step 1: Pick the metric that matches the goal. For landers, Largest Contentful Paint (time until the main content is visibly rendered) tracks perceived load better than total load time. Set a target — many teams anchor near 2.5 seconds on mobile as a working ceiling.
— Step 2: Convert the time budget into a weight budget. Total transfer size is the lever you can actually control; cap it (a few hundred kilobytes is aggressive but achievable for a focused lander).
— Step 3: Allocate the weight. Give each category a slice — images, fonts, scripts — and treat the budget like a wallet: adding to one means cutting from another.
— Step 4: Attack images first; they're usually the heaviest line item. Serve modern formats, size to the actual display dimensions, and lazy-load anything below the fold.
— Step 5: Audit third-party scripts. Each tag (chat widgets, trackers, A/B tools) adds weight and a render-blocking risk you don't fully control. Justify every one.
— Step 6: Enforce in CI. A budget nobody checks is a wish. Fail the build when a page blows its weight cap.

Mechanism: speed sets the ceiling on conversion. A slow page loses visitors before any persuasion fires — you can't convince someone who already left during the spinner.

The nuance: perceived speed beats measured speed. A page that paints meaningful content fast "feels" quick even if assets finish loading later. Optimize the visible-first-paint sequence, not just the total.

TL;DR
— Set an LCP target (~2.5s mobile), convert it to a transfer-weight cap, allocate per asset type.
— Images first, then justify every third-party script; enforce the budget in CI.
— Perceived speed beats measured speed — prioritize fast first paint.