zeman/perfmap
Perfmap
Perfmap is a web performance visualization tool and frontend resource loading analyzer. It functions as a diagnostic tool that identifies slow-loading assets by highlighting their completion time and download duration directly in the browser.
The project is delivered as a bookmarklet that overlays color-coded heatmaps on page elements. It translates Resource Timing API data into a visual spectrum to represent the chronology of how images and background assets load.
The tool maps resource download metrics and loading timelines directly onto the document object model using a dynamic CSS overlay. This process links specific network resource URLs to their corresponding visual elements to profile the sequence of the loading process.
Features
- Frontend Performance Monitoring - Provides a specialized tool for frontend performance monitoring by visualizing asset load times and rendering delays.
- Frontend Resource Analyzers - Acts as a diagnostic tool for identifying slow-loading assets by highlighting completion time and duration in-browser.
- Web Performance Visualizers - Provides a visual analysis tool for mapping the load sequence and duration of images and assets.
- Load Sequence Profiling - Maps the timing of resource downloads directly onto page elements to profile the loading sequence.
- Asset Fetch Metrics - Analyzes exact completion timestamps and individual download durations for specific page resources.
- Load Timeline Visualizations - Overlays a color-coded heatmap on the page to map resource load completion relative to total page load time.
- CSS Layout Overlays - Generates a visual heatmap by injecting absolute positioned CSS layout overlays over original page content.
- Temporal Color Mappings - Translates resource load timestamps into a color spectrum to visually represent the chronology of asset loading.
- Browser Performance API Integrations - Extracts precise asset loading timestamps using the browser's native Resource Timing API.
- Page Speed Optimizations - Measures background asset durations to help developers implement page speed optimizations.
- Resource Timing Analysis - Implements resource timing analysis by visualizing network request durations via a color-coded heatmap overlay.
- Resource-to-Element Mappings - Links specific network resource URLs to their corresponding visual elements in the document object model.
- In-Process Overlays - Renders a persistent diagnostic interface directly within the page process as an isolated overlay.
- Bookmarklet Injection Tools - Ships as a bookmarklet that injects JavaScript bundles into the page context to perform performance auditing.
- Performance Bookmarklets - Creates a frontend performance heatmap of loaded resources.
