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.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
