Performance Budgets and Continuous Improvement
Turn performance optimisation into a repeatable maintenance process with budgets, prioritisation, before-and-after measurement, and documented decisions.
Start Here
Performance is not a one-time clean-up performed just before launch.
Websites change. Content gets added. Libraries grow. Analytics tools appear. Images get uploaded. Features accumulate.
That is why performance needs a repeatable improvement process.
- Where have you already seen performance budgets and continuous improvement in a real interface?
- Which part of this topic currently feels most important to test in a real page?
Turn performance optimisation into a repeatable maintenance process with budgets, prioritisation, before-and-after measurement, and documented decisions.
Learning Objectives
By the end of this lesson, you'll be able to:
- create a performance budget
- prioritise improvements
- compare before and after measurements
- identify performance regression
- document decisions
Why This Matters:
Turn performance optimisation into a repeatable maintenance process with budgets, prioritisation, before-and-after measurement, and documented decisions.
Performance budget
A performance budget defines acceptable boundaries.
It may include:
- Core Web Vital targets
- maximum page weight
- image limits
- JavaScript limits
- number of third-party services
- requirements to rerun audits after major changes
Do not invent universal limits. The correct budget for an online magazine, restaurant site, interactive application, and photography portfolio will not necessarily be identical.
Students should justify targets according to project needs.
Prioritisation matrix
Use evidence to choose which problems matter most.
| Issue | User impact | Effort | Risk | Priority |
|---|---|---|---|---|
| 6 MB hero photo | High | Low | Low | High |
| Small duplicate CSS rule | Low | Medium | Medium | Low |
| Blocking third-party script | High | Medium | Medium | Investigate |
| Unused font weights | Medium | Low | Low | Medium/High |
Final performance audit
Return to the website measured earlier.
- Use the existing baseline.
- Identify findings.
- Prioritise issues.
- Implement targeted changes.
- Retest using the same tools and conditions.
- Compare before and after.
- Reflect on decisions.
| Measurement | Before | After | Change |
|---|---|---|---|
| Lighthouse Performance | |||
| LCP | |||
| INP if available | |||
| CLS | |||
| Transfer size | |||
| Requests | |||
| Image bytes | |||
| JavaScript bytes |
Documenting decisions
A useful audit record explains:
- biggest improvement
- least useful change
- unexpected result
- changes deliberately rejected
- future monitoring requirement
This prepares learners for the later Black Swan Bistro audit, where performance will be combined with accessibility, responsive testing, SEO, and deployed-site analysis.
Check Your Understanding
Before moving forward, can you answer these?
- 1. What is a performance budget?
- 2. Why should budgets differ between projects?
- 3. Why compare before and after measurements?
Check Your Answers
- A set of agreed limits or targets that define acceptable performance boundaries for a specific project.
- Different sites have different goals, media needs, interactivity, audiences, and risks.
- Comparison shows whether a change improved the measured experience under similar conditions.
How confident are you with this concept?
Still confused | Getting there | Got it | Could explain it to a friend
Guided Practice
Create a starter performance budget.
Step 1 - Choose the page
Use the page you measured earlier in the pathway.
Step 2 - Set sensible limits
Choose limits for Core Web Vitals, total transfer size, image bytes, JavaScript bytes, and third-party services.
Step 3 - Prioritise findings
Place at least three findings into the prioritisation matrix.
Step 4 - Retest one improvement
Make one targeted improvement, retest with the same conditions, and record the change.
Independent Practice
Complete a final performance audit for one website you have built.
Your Task:
Complete a final performance audit for one website you have built.
Requirements:
- include baseline measurements
- list findings
- prioritise issues by user impact, effort, and risk
- implement targeted improvements
- retest using the same conditions
- document rejected changes and future monitoring
Success Criteria:
| Criteria | You've succeeded if... |
|---|---|
| your audit separates evidence from opinion | Completed clearly and correctly in your solution. |
| improvements are prioritised rather than random | Completed clearly and correctly in your solution. |
| before and after data is compared | Completed clearly and correctly in your solution. |
| decisions are documented clearly | Completed clearly and correctly in your solution. |
Before you continue
- I created a performance budget.
- I completed an audit.
- I prioritised issues rather than fixing everything.
- I measured before and after.
- I documented my decisions.
- I can explain why performance requires ongoing monitoring.
Extension activity
Create a reusable audit worksheet for your own future projects. Include URL, date, browser/device, baseline, Lighthouse measurements, Network findings, image notes, CSS notes, JavaScript notes, font notes, caching notes, priority recommendations, before/after results, and reflection.
Closure
Key Takeaways:
- Performance is not a one-time clean-up.
- The optimisation cycle returns repeatedly to measure, investigate, prioritise, improve, and measure again.
- The most valuable skill in this pathway is learning to make performance decisions from evidence.
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- create a performance budget Check!
- prioritise improvements Got it!
- compare before and after measurements Can explain it!
- identify performance regression Could teach this!
- document decisions Check!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
Pause and reflect
- Which idea from this lesson now feels practical rather than abstract?
- What would you build or test next to make this stick?
Looking Ahead:
- Performance is not a one-time clean-up.
- The optimisation cycle returns repeatedly to measure, investigate, prioritise, improve, and measure again.
- The most valuable skill in this pathway is learning to make performance decisions from evidence.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
SEO & AnalyticsRelated Topics
Explore these related tutorials to expand your knowledge:
Additional Resources
Deepen your understanding with these helpful resources:
- Chrome DevTools - Inspect and validate website behaviour throughout an audit.
- Lighthouse - Run repeatable audits before and after targeted improvements.
- PageSpeed Insights - Review lab measurements and available field data.
- WebPageTest - Run detailed tests across varied devices, networks, and locations.
- web.dev: Learn Performance - A structured course covering practical web performance work.
- MDN: Web performance - Reference material for performance APIs, concepts, and techniques.