Arnor’s Handy Bookmarklet for Measuring Page Scroll Performance

December 11, 2011 in Web Development

I’ve been dealing with some unfortunate scroll performance issues at work lately, and to aid me in that task I started using a handy CSS stress test bookmarklet made by Andy Edinborough. It works by iterating through all your classes and measuring the performance improvement you get from dropping them – thus helping you find out which classes are making your page scroll speed slow. It’s handy but the use case too constrained for my needs.

Another approach for measuring page scroll performance

I wanted to be able to simply run a test anywhere on the page just for a single run, and I didn’t really care about the classes, since I was manually disabling styles and moving things around, unbinding event etc to find out where the biggest performance improvements could be had.

So I ended up writing this snippet of Javascript to aid me in my work. Drag this link to your bookmark bar / toolbar to try it out:

Arnor’s scroll performance test

You can find the bookmarklet-ready gist here: https://gist.github.com/1459352

Requirements

  • The jQuery object ($) must be present on the page (I could make it non-jquery dependent, if anybody is interested enough)
  • A browser that has a javascript console

How to use it

Visit any webpage that has the jquery object available and click your new bookmarklet. When it finishes running, it will display the stats in the javascript console of your browser, in ms. You can modify the code and add more runs if you want more consistent results.

The hacked up code

This is what the code looks like, if you’re interested:

How does it work

It basically scrolls a few hundred down and up 100 pixels, measuring the total time it takes to do that.

I had to make a hack to get the thing to get triggered more often – I believe that it’s because the browser is optimizing scroll events somehow – making sure the scroll event isn’t triggered way too often. So I wrapped the thing that triggers the page to scroll in a timeout thing. It’s probably not super super reliable, but at least I had pretty much consistent results.

Finally

If you have any questions, suggestions, bug reports or whatever, feel free to let me know by commenting or pinging me on Twitter.

I don’t expect to be maintaining this much or putting any more effort in it, unless there’s somebody else out there that will find this useful.

  • http://twitter.com/gummisig Guðmundur Bjarni Sig

    Brilliand stuff Arnór, will come in handy

  • http://twitter.com/gummisig Guðmundur Bjarni Sig

    Not being a developer I’m not sure how to use it, it scrolled our site franticly and then zip. Is that what’s supposed to happen? Gotta help me out mate :)

    Recognize the design? ;)

    http://kosmosogkaos.is/

    • http://arnorhs.com/ arnorhs

      oops.. looks like i missed this comment buddy. It will display a number in the chrome/firefox developer console. you can then make changes, run it again and compare the new number to the old one.

  • sam3k

    This is a really cool script. Is it open source?

    • http://arnorhs.com/ arnorhs

      yeah, for sure. feel free to use it, abuse it and make your own changes to the gist