HARflow — Performance-Budget Tracker
Tracks performance budgets across 12 seeded routes / 4 web properties. Per-route p75 LCP / INP / CLS / total JS / image bytes, week-over-week regression detection, and route-by-route recommendations.
What it is
The screen that tells you, every Monday morning, which of your routes blew its performance budget last week — and which one regressed by 8% in LCP since the last sprint.
What it tracks
- 12 seeded routes across 4 properties: marketing site (/, /pricing, /blog), product (/dashboard, /dashboard/analytics, /settings, /billing/invoice/[id]), e-commerce (/, /products/[slug], /checkout), and docs site.
- Per-route p75 Web Vitals: LCP, INP, CLS. Plus total JS bytes and image bytes — both proxies for the rendering work the browser has to do.
- Per-route performance budgets that can exceed Web Vitals “good” thresholds — the product dashboard runs heavier than a marketing page, on purpose. The tool grades against each route’s own budget.
- Week-over-week deltas with regression flags. The /dashboard/analytics route shows the prototype’s worst case: LCP regressed 18% in 7 days as the JS bundle grew 2%.
- 7-day sparkline per route’s LCP trend, with red/green color tied to direction.
- Recommendations tied to which specific metric crossed budget — preload hero, defer non-critical JS, split bundles, image-format migration, layout-shift reservation.
Why this shape
Lighthouse CI gives you per-build numbers. CrUX gives you 28-day averages. The shape you actually want is what changed last week, on which route, by how much, was it the JS bundle or the image set. HARflow is that shape.
How it ships
Single HTML file, ~26KB. Zero dependencies. The 12-route catalog, Web Vitals threshold map, budget rating engine, delta computation, and SVG sparkline are 270 lines of vanilla JavaScript.