Set Budgets for Bundles, Layout Shift, Images, Fonts, and Routes

A giant dependency, a button that moves mid-tap, a four-megabyte photo, a jumping web font, and a dashboard bundle on the login route are different problems. This pack gives each one its own budget and failing check.

This guide belongs to reel R098. Comment BUNDLE or SHIFT or IMAGES or FONTS or SPLIT for the matching module and runnable starter.

Define the boundary before building

Input: deployed route URLs, viewport targets, full bundle report, unstable layout regions, image inventory, font files, route chunks, network profile, and performance traces.

Output: a full-bundle module, layout stability module, image module, font stability module, route bundle module, budgets, measurements, and regression tests.

The starter keeps exact checks in code and gives Claude only the reviewable drafting work. Dry-run is the default. Live mode can call Anthropic's Messages API, but it still returns a draft and performs no external action.

Paste this boundary into Claude Code before asking for implementation:

Workflow: Set Budgets for Bundles, Layout Shift, Images, Fonts, and Routes
Input: deployed route URLs, viewport targets, full bundle report, unstable layout regions, image inventory, font files, route chunks, network profile, and performance traces
Output: a full-bundle module, layout stability module, image module, font stability module, route bundle module, budgets, measurements, and regression tests

Map the trigger, strict input fields, deterministic code checks, Claude drafting step, approval gate, failure queue, and saved evidence. Use null for missing facts. Do not change code or call an external service yet.

The modules that matter

R069 full JavaScript bundle budget

Open the bundle analyzer and rank every dependency by transferred bytes and parsed size. Trace the import that pulled it in, check whether tree shaking worked, and record main-thread parse and execution time on a representative phone. A small download can still be expensive JavaScript.

R070 layout stability budget

Reserve space for images, ads, embeds, consent banners, and asynchronous panels before they arrive. Declare width and height or an aspect ratio, then measure layout shift on cold cache and slow network while testing real tap targets.

R098 responsive image budget

Inventory intrinsic size, rendered slot, format, dimensions, srcset, sizes, and lazy-loading behaviour. Set a byte target per slot. Check the visual result before accepting a smaller file.

R099 font stability budget

Subset the glyphs you need, preload only the critical file, choose font-display deliberately, and match fallback ascent, descent, and width. Measure layout shift on cold cache and slow network.

R100 route bundle budget

Generate a bundle report per route. Move dashboard-only code out of login, use dynamic imports at real interaction boundaries, check tree shaking, and fail CI when an entry route exceeds its compressed budget.

Rules worth keeping beside the code

Measure full JavaScript, layout stability, images, fonts, and route chunks as separate modules.
Inspect import cost and main-thread execution on a representative phone.
Reserve dimensions for late-loading images, ads, embeds, and banners.
Size images for their rendered slots and declare dimensions.
Test fallback font metrics and layout shift before preloading more files.
Set a route-level JavaScript budget and fail builds on regressions.

The dangerous version is optimizing synthetic scores without checking users, hiding bytes in lazy chunks, leaving late content without reserved space, preloading every asset, or changing image quality without visual review. The pack deliberately stops at a draft so a person can inspect those boundaries before enabling anything real.

Test the ugly paths

Known oversized dependency breaks the full-bundle budget.
Late image fixture cannot move the tested button.
Known oversized image breaks the image budget.
Correct srcset candidate loads at each viewport.
Cold font load stays under the layout-shift threshold.
Login does not fetch dashboard chunks.
Budget check uses transferred bytes and main-thread time.

The final verification is concrete: Load each target route on the named phone and network profile, record transferred bytes, main-thread time, and layout shift, then make each budget check fail with a known oversized or unstable fixture.

Use this prompt to turn the evidence into acceptance tests:

Design tests for Set Budgets for Bundles, Layout Shift, Images, Fonts, and Routes using only the attached fictional fixtures.
Cover the normal path, missing input, malformed input, a repeated event, a permission failure, a dependency failure, and the named safety boundary.
For each test return: input, expected state, prohibited side effect, and evidence to save.
Do not execute external actions.

Run the pack locally

The ZIP is a complete Node 22 starter with no third-party npm dependency. It includes an importable n8n webhook, Docker Compose, GitHub Actions validation and manual-run workflows, deterministic samples, and tests.

npm test
npm run validate
npm run sample
cp .env.example .env
docker compose up --build

Only set WORKFLOW_MODE=live, ANTHROPIC_API_KEY, and ANTHROPIC_MODEL after the dry-run output and tests make sense for your system. Keep real secrets in the environment, never in the n8n export.

Download the runnable pack

Start with the fictional dry-run. It validates the input and returns a reviewable draft without changing code, production data, customer accounts, or an external service.

Before enabling a real action

Replace every fictional fixture, assign the approval owner, define the duplicate key, set a timeout and retry rule, and save the original evidence. Then test one failure on purpose. If the workflow cannot stop visibly and replay safely, it is not ready to act.