Performance Budget Visualizer
Transform performance data into actionable insights with stunning visualizations. Analyze HAR files, Lighthouse reports, and webpack bundles. BETA - Work in progress, the tool partially works, but very conceptual at this moment in time.
100% Private: All analysis happens locally in your browser. Your performance data never leaves your device, ensuring complete privacy.
How to Use the Performance Visualizer
Turn your website's performance data into actionable insights with powerful Canvas-based visualizations. This tool helps you understand loading patterns, identify bottlenecks, and track performance budgets.
Data Sources
HAR Files
How to export:
1. Open Chrome DevTools (F12)
2. Go to Network tab
3. Reload the page
4. Right-click → Save all as HAR
Contains complete timing data for every request.
Lighthouse
How to export:
1. Run Lighthouse in DevTools
2. Click ⋮ menu
3. Save as JSON
Includes Core Web Vitals, screenshots, and detailed metrics.
Webpack Stats
How to generate:
```webpack --json > stats.json```
or use webpack-bundle-analyzer
Shows bundle composition and module sizes.
Visualizations Available
- Waterfall Chart: See request timing, parallelization, and blocking resources. Color-coded by resource type with detailed timing breakdowns.
- Bundle Treemap: Visualize JavaScript bundle composition. Identify large modules and dependencies that impact bundle size.
- Loading Timeline: Watch how your page loads over time. Simulate different network speeds to test performance.
- Resource Breakdown: Pie and bar charts showing distribution of JS, CSS, images, and fonts by size and count.
- Performance Budget: Set budgets for different resource types and see where you exceed limits.
Key Features
- Interactive tooltips with detailed metrics
- Filter by resource type
- Group requests by domain
- Network throttling simulation
- Export visualizations as PNG
- Core Web Vitals tracking
- Third-party impact analysis
- Performance budget alerts