PerfMonitor – Web Performance & Core Web Vitals Monitor

Real-time tab performance monitor with floating HUD, Core Web Vitals scorecard, and interactive report generator.

PerfMonitor helps web developers inspect webpage performance directly in the browser. Monitor real-time performance metrics, investigate rendering issues, analyze resource usage, and generate detailed diagnostic reports to understand how webpages behave. Why use PerfMonitor? Slow loading, delayed interactions, unexpected layout shifts, long JavaScript tasks, and excessive resource usage can hurt the user experience. PerfMonitor brings essential web performance measurements and diagnostics together in one place to help developers investigate bottlenecks quickly. Key Features Real-Time Performance Monitoring - Monitor available FPS (frames per second) and JavaScript memory usage. - Inspect supported Core Web Vitals and timing metrics. - Access monitoring data via the extension popup and a draggable on-page HUD. Core Web Vitals & Timing Metrics - Largest Contentful Paint (LCP) - Cumulative Layout Shift (CLS) - Interaction to Next Paint (INP) - First Contentful Paint (FCP) - Time to First Byte (TTFB) - Additional browser timing and diagnostic benchmarks Resource and Rendering Diagnostics - Review network resources by type (scripts, stylesheets, images, fonts). - Identify resource-heavy assets and slow network requests. - Track long JavaScript tasks (>50ms) with script and chunk attribution to identify main-thread blockers. - Inspect automated diagnostic insights and performance suggestions. Detailed Performance Reports - Open a dedicated, comprehensive tab performance report. - Inspect Core Web Vitals scorecards and main-thread timelines. - Export offline performance receipts and reports in HTML and JSON formats. Flexible Monitoring - Choose between All Sites or Custom Sites monitoring scope. - Draggable floating overlay for real-time monitoring during development. - Built-in light and dark themes. Who is it for? - Frontend developers working with React, Angular, Vue, and modern web apps. - Web developers investigating slow pages and rendering delays. - QA engineers measuring web application performance and stability. - Developers and students learning Core Web Vitals and browser internals. How to use it 1. Open the webpage you want to inspect. 2. Click the PerfMonitor icon from the browser toolbar. 3. Enable monitoring and choose your desired monitoring scope. 4. Review live metrics in the popup or on-page HUD. 5. Click "Full Report" to explore in-depth diagnostics or export receipts. Measurement limitations Available metrics depend on browser APIs, page behavior, and testing environment. Certain measurements, such as heap memory usage and interaction-related metrics, may depend on Chromium support and specific permissions. Results are intended to support debugging and optimization; they are diagnostic tools for developers.