Running the snippet against www.aol.com for example results in a mess of rectangles because it includes a bunch of content that is not visible.

When hovering over the legend hide the page timings and show the time range for each step in the heatmap.

If the bookmarklet is run against the same site multiple times, the overlays stack on top of themselves and get darker (maybe it's a feature).

can you please add bower support 👍

Preview

couldn't find a handy fixed position image so i tested it on bootstrap fixed navbar: http://getbootstrap.com/examples/navbar-fixed-top/

Solution

Paste the following code in the console.

    var $el = document.querySelectorAll('.navbar-fixed-top');
    var template = '<div class="perfmap" data-ms="1808" style="position: absolute; box-sizing: border-box; color: rgb(255, 255, 255); padding-left: 10px; padding-right: 10px; line-height: 14px; font-size: 26px; font-weight: 800; font-family: Helvetica Neue, sans-serif; text-align: center; opacity: 0.95; top: 0; left: 0; width: 100%; height: 100%; padding-top: 25%; z-index: 4000; background: rgb(215, 48, 39);">1808ms (12ms)</div>';

    function elementIsFixed(element) {
        var $element = $(element);
        var isFixed = false;

        if ($element.css("position") == "fixed") {
            isFixed = true;
        }

        return isFixed;
    }

    for (var i = 0; i < $el.length; i++) {
        var $elIsFixed = elementIsFixed($el[i]);
        if ($elIsFixed == true) {
            var eleHeight = $($el[i]).outerHeight();
            var paddTop = (eleHeight - 14) / 2;

            template = $(template).css({
                "position": "fixed",
                    "height": eleHeight,
                    "padding-top": paddTop
            });
            $($el[i]).before(template);
        }
    }

If Image details is bigger than the image itself may be showing the details in a tooltip would solve this case:

I get this error when I try to use PerfMap in Firefox 33:

TypeError: performance.getEntriesByName is not a function
https://zeman.github.io/perfmap/perfmap.js
Line 36

I can't reproduce in Chrome.

Add a padding-bottom: 25px; to the parent element of perfmap to show hidden elements.

I know this kind of hard but it's worth investigating :)

Hi, I'd like some pointers to try to run perfmap on phantomjs/casperjs to store a screenshot of the test. I did some testing following my experience on phantomjs but it seems that just injecting the element wont work:

https://gist.github.com/gleicon/bfc006ab267cf3f6dc76

On Chrome version 38.0.2125.101, Running the code throws this error:
Refused to load the script 'https://zeman.github.io/perfmap/perfmap.js' because it violates the following Content Security Policy directive: "script-src assets-cdn.github.com collector-cdn.github.com".

hi there,
I like this tool very much,and it's really awesome.
But I only show the bookmarks bar in a new tab.
So,I just convert it to a Chrome extension.
If you like it, you can just recommend it.
Thank you.

I'm getting First Paint NaNms in Safari on Yosemite.

For pages with background images, the huge overlay obscures most of the page content overlays (twitter's stream for example).

Detecting overlaps would also work but would be harder.

It would be great if you could describe in the readme with 2-3 sentences why there is this difference between the 2 timings one sees for each resource, so people get the point more clearly what those numbers are about.

a few examples of why those differences exist would be awesome.

There should be an option to close the Perfmap

Should be able to use logic similar to the RUM Speed Index code: https://github.com/WPO-Foundation/RUM-SpeedIndex/blob/master/src/rum-speedindex.js#L86

Duration from resource timing includes blocking time if multiple images from same domain.

Remove duration?

Nice work, however not license is specified.
Could you add a license to the repo? it may help to know what we can and cannot do with the source.

Thanks so much.

Hi!
Are you aware that your bookmarklet doesn't work with CSP implemented?

Ask if you need some help on that...

Red is used for early loading images and it transitions to green for late-loading. Red usually implies "bad" so it feels like the colors are in the opposite order from what they should be.