Basic

Reading the numbers you collected

A number without a threshold is a fact nobody can act on. The thresholds that matter are the ones a user can perceive: a change in interaction latency that they notice, and a layout shift that moves text under their finger or eyes.

What you will see

A line naming one budget. A line with no budget named is not actionable.

About 1 min of reading

Try It

Turn one page's numbers into a verdict

1

Sample three times

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

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

What it prints
Three numbers. Take the largest as the cold one and the middle as the warm one.
2

Compare to the threshold

node -e 'const a=[0.08,0.12,0.31]; a.sort(); console.log(a[Math.floor(a.length*0.75)])'

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

What it prints
The 75th percentile of your three samples, in seconds.
3

Attribute the gap

curl -s -o /dev/null -w 'ttfb=%{time_starttransfer} total=%{time_total} size=%{size_download}\n' http://localhost:3000/

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

What it prints
If ttfb is most of the total, the network or the server is the budget. If total minus ttfb is most, it is bytes or parse.
4

Write the verdict

printf '%s p75=%ss budget=%s\n' "$(date +%F)" "$P75" "$BUDGET" | tee -a docs/perf-log.md

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

What it prints
A line naming one budget. A line with no budget named is not actionable.
Do not report a mean. A mean of 200 ms with a p75 of 2 s hides the exact problem the field is having.

Data Flow

Samples to a verdict
1 Collect samples across connections
↓
2 Sort and take the 75th percentile
↓
3 Compare to the perceptible threshold
↓
4 Attribute the gap to one budget
Why this works
Report the p75

Report the 75th percentile, not the mean. The mean hides the slow tail, and the slow tail is where the complaints come from.

What to do with a bad number

Attribute it to one of the three budgets, then fix that budget. A bad number with no attribution is a to-do item nobody can start.

Examples

Perceptible thresholds

Under about 100 ms a response feels instant. 100 to 1000 ms feels like a delay but is tolerable. Past 1000 ms the user starts to doubt it worked at all.

Layout shift is a score

Each shift that moves content is a fraction of the viewport it displaced, summed. A score near zero means nothing moved; a score above 0.1 is visible on a phone.

Field data over local data

Local numbers describe your machine. Percentiles from the field describe the users. A p75 number is the one that says most real users are affected.

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.

← Scripts: defer, async, or move
Previous Lesson
Scripts: defer, async, or move
Next Lesson
The network path: connections and negotiation
The network path: connections and negotiation →