awesome-ms — Web Performance Visualizer

See why any page is slow: a live, animated timeline of real load timings for JS, CSS, images, fonts and API calls.

awesome-ms turns any web page's real load performance into a live X-ray. As the page loads, a full-width bar rises from the bottom edge. The top row is a spectrum: one bar per resource, its height the load time, colored on a continuous scale from mint green (fast) through amber to deep red (slow). Below it, a waterfall names the slowest resources and shows exactly when each one started and how long it took. Anything past your threshold slides in as a floating card with its type and transfer size. When the page settles you get a clear verdict — total load time plus a FAST / GOOD / MEDIUM / SLOW badge — and then the whole bar shrinks away into a faded badge in the corner. Click that badge any time to bring the last page load back. WHY YOU'LL LIKE IT • It answers "what made it slow?", not just "how long did it take?" • Continuous color scale — a 210 ms asset and a 480 ms asset read differently, instead of collapsing into one "green" bucket • Real numbers straight from the browser's Performance APIs (Resource Timing and Navigation Timing). No fake progress bars, and no fetch/XHR patching that would distort the very timings being measured • Never in your way: the UI is a pointer-events-none Shadow DOM layer with zero layout shift, isolated from the page's CSS and invisible to it. Click anywhere to tuck it away early • Hover any spectrum bar to identify it — names resolve only on hover, so there is no rendering cost while the page is loading • Minimal mode: prefer no chrome at all? The bar never opens — you just get a corner badge counting the live timing, and you click it when you want the full breakdown • Premium, GPU-friendly motion (transform/opacity only), with full support for the system "reduce motion" preference • Works on single-page apps — React, Vue, Angular, Next.js, Nuxt — starting a fresh read-out on every client-side route change • Configure the thresholds, the notification trigger, how many rows and cards to show, and the auto-hide delay PRIVACY awesome-ms measures locally in your browser. It collects nothing, transmits nothing, and sells nothing. It requests a single permission — storage — purely to remember your own settings. No host permissions, no remote code, no analytics. Open source: https://github.com/farukak/awesome-ms