Performance Budget

Tracks per-resource-type byte budgets for a web page. Each row is one resource category with an actual size and a target budget in KB or MB; the tool renders a live progress bar per row (green / yellow / red), aggregates total size and total budget in MB, and counts how many rows have exceeded their budget. Five default rows ship pre-populated: HTML, CSS, JavaScript, Images, and Fonts.

1. For each row, edit the resource Name (e.g. "HTML"), enter the measured Size, pick a unit (KB or MB), and set the Budget in the same unit. 2. Watch the progress bar under each row fill proportionally to size/budget. 3. Click Add Resource to append a new row (defaulted to "New Resource", size 0, budget 100 KB), or the red X on a row to delete it. 4. Read the summary card at the bottom: Total Size (MB), Budget (MB), and Status — either "All within budget" or "N over budget" in red.

Each row's bar is colored by its fill ratio: - Green when size ≤ budget (healthy). - Yellow when size is over 80% of budget but not yet exceeding it (warning zone). - Red when size > budget (over budget). The fill percentage is capped at 100 for display even when size far exceeds budget. Totals are computed in KB internally — MB rows are multiplied by 1024 before summing — and the displayed Total Size and Budget are divided by 1024 and shown with one decimal place. The Status indicator counts any row where size > budget, regardless of unit, so a 0.4 MB Images entry against a 500 KB budget correctly counts as over.