A neat little trick to speed up perceived performance by giving the user feedback of his action a bit earlier.

This article is quite old.Time flies when you're having fun. I've been writing for my blog for a long time. Stuff changes fast, especially in the Ruby world. That's why I've put this warning on old posts. The article might still be valid, though.

Cheating Performance With A Little Javascript

This little trick works with most websites with a menubar. When you have a menu that changes color pending on which page you are, you can cheat a bit on the perceived performance of loading pages. And all with just a little bit of Javascript. Intercept the links to change the state to active, before actually loading the page. The menu will feel much more responsive!

Imagine you add a class to the menu item that is active, like this:

<nav id="menu">
  <ul>
    <li><a href="foo.html">Foo</a></li>
    <li class="active"><a href="bar.html">Bar</a></li>
    <li><a href="baz.html">Baz</a></li>
  </ul>
</nav>

Then all you would need to do is something like this with jQuery:

$(function() {
  $('nav#menu a').click(function(){
    $('nav#menu li').removeClass('active');
    $(this).blur().parents('li').addClass('active');
  });
});

I've added a blur()-command in between, so the dotted lines disappear earlier.

Try it out, you can really notice the difference. It works best when the menu items don't move, but only change appearance.

Update

Because I switched to Disqus, some nice comments have gone. Stefan Borsje, of Pressdoc fame, replied with this concern:

To be honest, I don’t like it very much. It really changes a basic way the web works; you click on something, the page loads (and optionally shows an activity indicator) and you get to see the result. With this method you already get see part of the result even before the actual loading fase, which could easily confuse users by letting them think the page is already done but nothing has changed.

I agree that you should be careful applying this technique. But the clicking of the link is done instantly, so the user would see the page loading immediately, thus he/she wouldn't think the page is done. This technique works best if your pages are speedy enough, but can use just a bit more oomph.

comments powered byDisqus