Universal Page Load Waterfall Badge

WHAT IT DOES

Universal Page Load Waterfall Badge tracks page load performance metrics using the Performance API and displays them in a compact, always-visible badge. The badge shows key timings including DOMContentLoaded, load, first paint, and first contentful paint in milliseconds, with color-coding for quick visual assessment — green for fast, yellow for moderate, orange for slow, and red for very slow. A waterfall bar visualization shows the relative timing of DNS lookup, TCP connection, request, and response phases. Clicking the badge reveals a detailed breakdown of all available performance metrics, making it easy to identify performance bottlenecks.

WHERE IT RUNS

This extension works on any website across the entire web. It functions on blogs, news sites, e-commerce pages, web apps, and any page with performance data available. The tool works across all domains and adapts to dynamically loaded content.

HOW TO USE

Install the extension and navigate to any webpage. A compact badge appears showing key page load metrics. Use the overlay panel to customize the experience: toggle the waterfall badge on or off, toggle the detailed breakdown on or off, choose the badge position (Top Right, Top Left, Bottom Right, or Bottom Left), and click "Refresh Metrics" to manually update the data. Click "Show Detailed Breakdown" to open a modal with all available performance metrics in a sortable list. The status area shows how many metrics are being tracked. The badge automatically updates as the page loads and when navigating between pages.

TECHNICAL SECTION — PERFORMANCE API INTEGRATION AND METRICS EXTRACTION

The extension uses the Performance API (window.performance.timing and window.performance.getEntriesByType) to extract page load metrics. It captures navigation timing data including DOMContentLoaded, load, domInteractive, DNS lookup, TCP connection, request, and response times. Paint timing data (first paint and first contentful paint) is extracted from performance entries. The waterfall badge calculates the maximum value among key metrics to determine the color scale, and each metric is color-coded relative to that maximum. The waterfall bar chart visualizes the relative duration of network phases. The detailed breakdown modal displays all available metrics in a clean list format. The tool uses GM_setValue to persist settings and a MutationObserver to re-evaluate metrics on page changes.

THE PANEL — DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The overlay panel is fully interactive and designed for seamless multitasking. Drag it anywhere on the screen using the handle at the top of the panel; the position is saved per site so it stays where you left it across sessions. The panel includes a snap-to-edge feature that gently anchors the overlay to the nearest screen edge when released. Click the collapse button to minimize the panel to a compact pill showing the current performance status; expand it again with a single click. Resize the panel vertically by dragging the bottom-right corner to view more controls. Press the Escape key at any time to instantly close the overlay; it reappears on the next page navigation or refresh.

PLEASE NOTE

This extension requires the free BotGentz companion extension to function, as it provides the underlying content script injection and cross-origin communication framework. No personal data, browsing history, or performance data is stored, transmitted, or shared. Settings are stored locally in your browser using GM_setValue and are never sent to any external server. The extension does not access or store login credentials, financial data, or personally identifiable information. The tool uses the Performance API which is available in modern browsers; some metrics may not be available in older browsers or on pages with certain configurations. The performance data is read-only and does not affect page performance. The tool is for informational and debugging purposes and should be used in conjunction with other performance analysis tools.