In the spirit of the content-to-markup ratio bookmarklet, here's another one that gives you some more data points to help you judge the quality of a page's markup and help answer the old question - where does all this page weight go.
Install the statsy bookmarklet
Drag this link to your bookmarks:
Once you run the bookmarklet it alerts these stats points:
JS attributes (e.g. onclick)- this is the sum of all
onmouseoverand so on including the attribute names. So for example
CSS style attributes- the sum of all
Inline JS- the sum of all the contents of all script tags (excluding the tag itself)
Inline CSS- sum of all
All innerHTML- this is
document.documentElement.innerHTML.length, it should be close to the ungzipped size of a page, provided the page is not doing a lot of DOM manipulation
# DOM elements- the total number of elements on the page is counted simply using
Here's example output:
The code is here for your tweaking pleasure
Hope you'll find this bookmarklet useful when looking at a page as a companion to YSlow/PageSpeed.
What else should I add to this bookmarklet? # of font tags, # of table tags...?