What is a performance budget?

Performance budget is a pre-set limit on the "weight" and load time of a site's key resources, meant to prevent performance from degrading.

---

#What a performance budget can limit

• the total page weight (for example, ≤ 170 KB for mobile)
• the JS/CSS size (for example, JS ≤ 150 KB, CSS ≤ 50 KB)
• the number of HTTP requests
• load time (for example, TTI ≤ 3 s, LCP ≤ 2.5 s)
• Web Vitals (LCP, FID, CLS)
• the number of fonts, images, third-party scripts

---

#Example

The team is told:

• no more than 100 KB of JS
• LCP no longer than 2.5 seconds
• FID < 100 ms

If these limits are exceeded, the build fails or is produced with a warning.

---

#Why this is needed

• keeps the site from "bloating" as it grows
• makes performance part of CI/CD
• keeps UX fast through any changes
• simplifies communication between designers, frontend, and managers: everyone works from the same numbers

---

#Conclusion

A performance budget is like a diet for a site: strict, measurable limits that keep it from becoming slow, heavy, and sluggish.