Compare Chrome extensions: Perfmap vs CSS Dig

Stats Perfmap Perfmap CSS Dig CSS Dig
User count 5,557+ 10,000+
Average rating 4.69 2.86
Rating count 13 51
Last updated 2014-10-25 2019-05-08
Size 148.48K 179.20K
Version 1.2 1.2.7
Short description
Heatmap of resources loaded in the browser using the Resource Timing API Collect and analyze CSS.
Full summary

A front-end performance heatmap of resources loaded in the browser using the Resource Timing API.

The heatmap colours and the first ms value indicate at what point in the page load did the image finished loading. It's a good indicator of user experience. "It took 3450ms before the user saw this image." The second value in brackets is the time it took the browser to load that specific image.

The legend attached to the bottom of the page shows timings for the full page load and hovering over a coloured area on the heatmap will move the timeline indicator to show you when that image was fully loaded.

Code: https://github.com/zeman/perfmap

CSS Dig finds and groups stylesheets and style blocks on most websites, providing an easy way to analyze the code and plan refactors.

Properties: Take a look at all your CSS properties, their frequency and variations. Have too many shades of blue? Inconsistencies often means confusion for your developers and irregularities for your end users.

Selectors & Specificity: Are your selectors long? Using lots of IDs? Specificity wars are frustrating and piling on new CSS will only make the situation worse. Find potential problem areas and make a plan to fix.