Performance Budget Planner
Set page weight budgets for scripts, images, and fonts to keep your site fast.
Load Timeline
Phase Allocations (ms)
| Phase | Time | % of Total | Cumulative |
|---|---|---|---|
| DNS Lookup | 50ms | 3.2% | 50ms |
| TCP/TLS | 80ms | 5.1% | 130ms |
| TTFB (Server) | 200ms | 12.7% | 330ms |
| Download | 800ms | 50.6% | 1130ms |
| Parse/Compile | 300ms | 19.0% | 1430ms |
| Render/Paint | 150ms | 9.5% | 1580ms |
| Total | 1580ms | 100% | 1580ms |
How to Use Performance Budget Planner
- 1
Define your budget
Set limits for JavaScript, CSS, images, and total page weight.
- 2
Add page resources
List all assets and their sizes for the page.
- 3
Monitor usage
Track how close each resource category is to its budget limit.
- 4
Optimize as needed
Follow suggestions to reduce oversized resource categories.
Related Tools
Checklist Maker
Create customizable checklists with groups, due dates, and priorities for any project.
Daily Planner Creator
Design a printable daily planner with time blocks, goals, and priority sections.
Typing Speed Test
Measure your typing speed in WPM and accuracy with real-time feedback and stats.
Note-Taking Scratch Pad
A quick scratch pad for jotting down notes, ideas, and snippets with auto-save.
Focus Timer with Ambient Sounds
Pomodoro timer with built-in ambient noise (rain, cafe, forest) generated via Web Audio API oscillators.
Kanban Board
Drag-and-drop Kanban board with To Do, In Progress, and Done columns. Cards persist in localStorage.