Performance Timing Viewer

WHAT IT DOES

Performance Timing Viewer reads the browser's built-in Navigation Timing and Resource Timing APIs to show you exactly how fast (or slow) the current page loaded. It displays key metrics including total load time, DOM interactive, DOM complete, first contentful paint, DNS lookup duration, TCP connection time, SSL/TLS handshake time, request duration, and response duration. It also breaks down all page resources (scripts, stylesheets, images, fonts, XHR/fetch, etc.) by type—showing count, average load time, and total size. Color-coded thresholds (fast/medium/slow) make it easy to spot performance issues at a glance. Export metrics as CSV or JSON to share or analyze further.

WHERE IT RUNS

Any webpage—the script reads the browser's performance APIs which are available on every page. No server-side data collection, no external dependencies, no site-specific configuration. Works on local pages, development environments, production sites, and even pages behind authentication.

HOW TO USE

Install the script and open any page. The panel automatically displays performance metrics after the page loads. Click "Refresh" to re-read timing data (useful for single-page apps that load content dynamically). Adjust the color thresholds (Fast, Medium, Slow in milliseconds) to match your performance standards—settings persist globally. Use "Export CSV" to copy tabular data to your clipboard, or "Copy JSON" to get the full raw data for analysis. Keyboard shortcut: Ctrl+Shift+R to refresh metrics without opening the panel.

TECHNICAL MECHANISM

The script uses performance.getEntriesByType('navigation') to access the Navigation Timing API, which provides detailed timing data for the main page navigation including fetchStart, domainLookupStart/End, connectStart/End, secureConnectionStart, requestStart, responseStart/End, domLoading, domInteractive, domContentLoadedEventStart/End, domComplete, loadEventStart/End, and duration. Derived metrics are calculated from these timestamps: DNS lookup (domainLookupEnd - domainLookupStart), TCP connect (connectEnd - connectStart), SSL/TLS (connectEnd - secureConnectionStart), request (responseStart - requestStart), and response (responseEnd - responseStart). The script also uses performance.getEntriesByType('paint') to capture first-paint and first-contentful-paint, and performance.getEntriesByType('resource') to enumerate all fetched resources—aggregating by initiatorType (script, link, img, css, fetch, xmlhttprequest, etc.) and computing counts, total durations, and sizes. All values are rendered in a compact dashboard with color-coded tags based on user-configurable thresholds.

THE PANEL

The tool runs inside BGPanel, a lightweight UI system built into the BotGentz extension. Drag the panel by its header to reposition it anywhere on screen—it snaps to edges and remembers its position per site. Click the header to collapse the panel into a small bubble; click again to expand. Resize the panel by dragging its bottom-right corner. Press Escape at any time to close the panel. The panel stays out of your way but is always accessible via the extension's toolbar.

PLEASE NOTE

Requires the free BotGentz browser extension to run—this script does not work standalone. Timing data is available only after the page has loaded; initial metrics appear within 500ms of page load. The script reads only the browser's performance APIs—it does not send data anywhere, does not store page content, and does not access other tabs or browser history. Single-page applications may need a manual refresh to capture metrics after dynamic content loads. Sites change over time, but this script relies on standard Web APIs, not site-specific selectors, so it remains robust across most pages.