PerfMap
A bookmarklet and Chrome extension that overlays a performance heatmap on web pages using the Resource Timing API.
What is PerfMap?
PerfMap is a front-end performance heatmap tool that overlays a visual timeline on web pages to show when images and resources finished loading. It uses the browser's Resource Timing API to collect data and color-codes elements based on their load completion time, helping developers identify rendering bottlenecks and understand the user's visual experience during page load.
Front-end developers, web performance engineers, and UX designers who need to quickly diagnose and visualize page load performance issues directly in the browser.
PerfMap provides an intuitive, visual alternative to complex waterfall charts by overlaying performance data directly on the page, making it easy to correlate load times with actual page content without switching to external tools.
Overview
Front-end performance heatmap bookmarklet.
Use Cases
Best For
- Quickly identifying which images are delaying page render
- Visualizing front-end performance bottlenecks during development
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.