Advanced

A budget that a person can act on

A budget is a number with a unit and an owner. 'Faster' is not a budget; 'p75 time to readable under 1500 ms on a throttled connection, owned by the CSS file' is. The owner is what makes the next change possible.

What you will see

Exactly 5. A lower count means the measurement broke and the gate would pass on nothing.

About 1 min of reading

Try It

Write one budget and gate on it

Write the budget

printf 'metric: p75 time to readable threshold_ms: 1500 connection: throttled owner: public/css/main.css ' | tee docs/budget.md

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Four lines. Every field is required for the budget to be checkable.

Measure five samples

for i in 1 2 3 4 5; do curl -s -o /dev/null -w '%{time_total}\n' http://localhost:3000/tutorials/lessons; done | sort -n | tail -2 | head -1

Before you run it, say out loud what it will print. Then open the answer.

What it prints

The value near the 75th percentile of five samples.

Gate on it

printf '#!/bin/sh\np=$(perf-measure.sh | sort -n | sed -n "4p")\nawk -v p="$p" "BEGIN{exit !(p*1000 < 1500)}"\necho "p75=$p budget=1500ms"\n' | tee perf-gate.sh && chmod +x perf-gate.sh

Before you run it, say out loud what it will print. Then open the answer.

What it prints

A gate that exits non-zero when the p75 exceeds the threshold.

Assert the sample count

perf-measure.sh | wc -l

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Exactly 5. A lower count means the measurement broke and the gate would pass on nothing.

Never let a gate pass on an empty sample set. Assert the count first, then compare the number.

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

Budget to a gate result

1 Name the metric and threshold

↓

2 Run the measurement N times

↓

3 Assert the sample count is right

↓

4 Compare p75 to the threshold

↓

5 Exit non-zero on a miss

Why this works

How to pick a threshold

Start from what the user perceives, then subtract what you already measure. The gap is the work. A threshold you cannot name a reason for is a wish.

Where budgets rot

A budget that passes because the measurement script broke is worse than a failing budget. Assert the sample count and the connection setting in the gate.

Examples

Three parts per budget

The metric, the threshold, and the owner. A budget missing any of the three cannot be checked, cannot be failed, and cannot be fixed.

Budgets are per interaction

One budget for first paint, one for the interaction, one for the response to an action. A single site-wide number hides which interaction is slow.

Fail the release on the budget

The gate runs the measurement and exits non-zero on a miss. A budget nobody is forced to meet is a document, not a budget.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Compression, minification, and what not to compress

Previous Lesson

Compression, minification, and what not to compress

Next Lesson

Attributing a regression to one owner

Attributing a regression to one owner →