zeman/perfmap

PerfMap is a bookmarklet and Chrome extension that overlays a color-coded performance heatmap on any webpage. It shows you, at a glance, how long each image and visual resource on a page took to load before it appeared to the user. The tool uses the Resource Timing API, a feature built into modern browsers that records detailed timing information about every resource the browser fetches. To use it, you add the bookmarklet to your browser's bookmark bar or install the Chrome extension. After a page has finished loading, you click the bookmark or extension icon, and PerfMap draws colored overlays directly on top of each image on the page. The color indicates how far into the page load that resource finished loading. A number shown on each overlay tells you at what point the image became visible to the user (for example, 3450ms means the user waited 3.4 seconds before seeing that image), and a second number in brackets shows how long that individual resource took to download. A legend at the bottom of the page shows timing information for the full page load. Hovering over any colored area moves a timeline indicator to mark exactly when that resource finished loading. The tool works in Chrome without any configuration. In Firefox, it requires enabling a setting in the browser's advanced configuration page. The project originated as a data visualization experiment by Mark Zeman of SpeedCurve and was presented at Velocity New York in 2014. The repository shows active development from October 2014 and lists a handful of planned improvements, such as better support for fixed-position elements and resources loaded inside iframes.