Paths/Frontend Engineer/Performance & Accessibility / Core Web Vitals
Set a Performance Budget
Pick the numbers you are willing to ship with, and write them down where the CI job can read them.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/perf exists○
- File ~/frontend/perf/budget.json exists○
- The budget states the LCP, INP and CLS limits○
- The budget states the device the numbers were measured on○
02Walkthrough
3 steps- 01
Write the budget
The three vitals, their limits, and the device the limits were measured on. Without the device the number means nothing.
echo '{"device": "moto-g-power", "network": "slow-4g", "budgets": {"LCP": 2500, "INP": 200, "CLS": 0.1}}' > ~/frontend/perf/budget.json - 02
Verify the budget
cat prints the budget. Compare it with the numbers your analytics actually report.
cat ~/frontend/perf/budget.json - 03
Submit for validation
The validator checks the three vitals and the device.
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list