Performance Budget for Web Dashboards
Plan a performance budget for data-heavy dashboard applications with charts, tables, and real-time updates. Balance rich interactivity with acceptable initial load times for internal tools.
Detailed Explanation
Performance Budget for Dashboards
Web dashboards are JS-heavy applications that display data visualizations, interactive tables, and real-time updates. While dashboards are typically accessed on fast connections (WiFi/ethernet) by known users (employees), performance still matters for productivity and user satisfaction.
Dashboard Budget Target: 400-700 KB (initial load)
| Category | Budget | Details |
|---|---|---|
| HTML | 20 KB | Minimal shell, app container |
| CSS | 50 KB | Design system, chart styles |
| JavaScript | 300 KB | Framework + charting library + app logic |
| Images | 20 KB | Logo, icons (use SVG inline) |
| Fonts | 50 KB | UI font + monospace for data |
| Other | 30 KB | Auth scripts, error tracking |
Why Dashboard JS Is Large
Dashboards need JavaScript for:
- Charting libraries — D3.js (~80 KB), Chart.js (~60 KB), Recharts (~100 KB), ECharts (~300 KB)
- Data tables — AG Grid (~150 KB), TanStack Table (~15 KB)
- State management — Redux, Zustand, or MobX
- Real-time updates — WebSocket handling, data polling
- Date handling — date-fns or Day.js for time-series data
Code Splitting for Dashboards
Dashboards benefit enormously from route-based code splitting:
Login page: 50 KB (auth only)
Overview: 120 KB (summary charts)
Analytics: 180 KB (complex visualizations)
Settings: 60 KB (forms)
Admin: 100 KB (user management tables)
The initial load only needs the login or overview page. Heavy chart pages load their visualization libraries on demand.
Data Loading Strategy
The performance budget focuses on asset weight, but dashboards also need a data-loading strategy:
- Skeleton screens — Show the layout immediately while data loads
- Pagination — Load 50 rows at a time, not 5,000
- Virtual scrolling — Render only visible rows in large tables
- Caching — Cache API responses for frequently accessed data
- Progressive loading — Show summary data first, then details on expand
Chart Library Selection
Choose charting libraries based on your budget and needs:
| Library | Size (gzip) | Best For |
|---|---|---|
| Chart.js | ~60 KB | Simple charts, few types |
| Recharts | ~100 KB | React dashboards |
| Lightweight Charts | ~45 KB | Financial/time-series only |
| uPlot | ~35 KB | High-performance time-series |
| ECharts | ~300 KB | Complex, enterprise dashboards |
For a 300 KB JS budget, Chart.js or uPlot leaves more room for application code than ECharts.
Use Case
Dashboard performance budgets matter for enterprise SaaS products where users interact with the application all day. A slow dashboard wastes employee time — if 100 employees each wait 5 extra seconds per page load, and they load 50 pages per day, that is 7 hours of wasted time daily. Setting a 500 KB initial load budget forces teams to code-split chart pages, choose lightweight libraries, and implement progressive data loading.