Monday, November 30th, 2009

Statsy – find those wasted bytes with a bookmarklet

Category: Performance

>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 all onclick, onmouseover and so on including the attribute names. So for example <a onclick="#"> is 11 characters (bytes) of JavaScript attributes code
  • CSS style attributes – the sum of all style="..."
  • Inline JS – the sum of all the contents of all script tags (excluding the tag itself)
  • Inline CSS – sum of all <style> tag contents
  • 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 document.getElementsByTagName('*').length

On Ajaxian, this is the result:

Statsy on Ajaxian by you.

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.

Related Content:

3 Comments »

Comments feed TrackBack URI

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.

Comment by kangax — November 30, 2009

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

Comment by Punsons — November 30, 2009

thanks

Comment by Aphrodisiac — January 15, 2010

Leave a comment

You must be logged in to post a comment.