Monday, November 30th, 2009
Statsy – find those wasted bytes with a bookmarklet
Stoyan Stefanov is all about the performance of web products. One small tool that gives you a bit of insight as to where you can optimize is a new bookmarklet he released today called statsy.
If you run statsy on a web site you get the following insights:
JS attributes (e.g. onclick)
– this is the sum of allonclick
,onmouseover
and so on including the attribute names. So for example<a onclick="#">
is 11 characters (bytes) of JavaScript attributes codeCSS style attributes
– the sum of allstyle="..."
Inline JS
– the sum of all the contents of all script tags (excluding the tag itself)Inline CSS
– sum of all<style>
tag contentsAll innerHTML
– this isdocument.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 usingdocument.getElementsByTagName('*').length
On Ajaxian, this is the result:
You can install statsy by dragging the following link to your link bar: Statsy and the source is also available.
Nothing earth-shattering but a good tool to use together with YSLow or PageSpeed.





I’ve been using Inline Code Finder (https://addons.mozilla.org/en-US/firefox/addon/9640) for this kind of analysis. It actually highlights offenders and overall works wonderfully.
It should be close to the ungzipped size of a page, provided the page is not doing a lot of DOM manipulation.
http://www.getbestflowers.com
thanks