24 March 2011

HeadJS script? Is it really necessary?

I have read articles and forum posts about HeadJS script and how good it is, how it can speed up your site and basically do miracles with your sites :)

Head.js (http://headjs.com/) is tiny script which improves loading speed of your websites/pages.

The latest version is version 0.9. Demo on the headjs.com has some problems,  I find it really strange that developer has not yet updated javascript links within headjs demos (there are 404 errors and js wont load). So they are basically worthless if you try to measure speed.

I have removed all github links and added various CDN javascript libraries. Now all the libraries are working, return status 200 OK. Point of CDN usage is that scripts wont be slowed by speed of my web server and most of these javascript get loaded from CDN anyway.

Original test is from head.js website, it calculates how long it takes to load page either using classic <script> within <head> or using just one <script src="head.js"> library and rest specifying as javascript call:

head.js("https://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js") .js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js") .js("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js") .js("https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js") .js("https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js") .js("http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js");

You can try amended benchmars here:

HeadJS demo with script src (i am ignoring bottom <script> locations):
http://www.feronovak.com/test/headjs/script.html

HeadJS demo with head.js
http://www.feronovak.com/test/headjs/headjs.html

I have disabled all extensions, addons, plugins for all browsers to make it as fair as possible. Still this is not any scientific test and methods used are pretty lame. But it works for me as this is how normal person browsing a page will see it.

And my results (please feel free to post your times in discussion):

Chrome 10.0.648.151

SCRIPT SRC DEMO

  • 1st  run, empty cache: 261ms
  • 2nd run, cached files: 38ms

HEAD.JS DEMO

  • 1st  run, empty cache: 24ms
  • 2nd run, cached files: 14ms

Results are quite clear, head.js loads page much faster than classic <script> method.


Firefox 4.0

SCRIPT SRC DEMO

  • 1st  run, empty cache: 263ms
  • 2nd run, cached files: 111ms

HEAD.JS DEMO

  • 1st  run, empty cache: 261ms
  • 2nd run, cached files: 108ms

Really interesting this one. FF 4.0 basically wont show any difference with 1st run, same numbers for both first runs. Even more interesting is that cached run is the same speed for both versions. 


Internet Explorer 9.0

SCRIPT SRC DEMO

  • 1st  run, empty cache: 368ms
  • 2nd run, cached files: 116ms

HEAD.JS DEMO

  • 1st  run, empty cache: 18ms
  • 2nd run, cached files: 8ms

This is really surprising result, IE9 loads head.js fastest from all browsers. Yes, I have tried everything, I deleted cache, closed whole IE9, deleted cache and loaded page. Times are very consistent and it really is mega fast. It is even faster than Chrome 10. 


Internet Explorer 8 (IETester)

SCRIPT SRC DEMO

  • 1st  run, empty cache: 361ms
  • 2nd run, cached files: 206ms

HEAD.JS DEMO

  • 1st  run, empty cache: 16ms
  • 2nd run, cached files: 14ms

Again huge time difference. I am only using IEtester but it seems that it really is such a difference when loading site. Again, I am loading page without cache for 1st run, and then cached for 2nd.


Internet Explorer 6 (IEtester)

SCRIPT SRC DEMO

  • 1st  run, empty cache: 670ms
  • 2nd run, cached files: 180ms

HEAD.JS DEMO

  • 1st  run, empty cache: 21ms
  • 2nd run, cached files: 15ms

This is most visible difference when loading the page. Old IE6 just won't die and head.js can quite improve loading time. 

It seems that head.js really can improve webpage loading times. However, I won't be putting it into my projects until I am 100% sure it works well with all the JQuery plugins and javascript codes.  But big thanks to developer for creating such useful tool, I am sure that many sites will use this soon (or in fact use it already).

3 comments:

Anonymous said...

Good article and demo. Thank you.

jamietre said...

Followed to here from one of your SO posts. My anecdotal experience has been the head.js actually does a remarkable job of speeding up the page load. Unfortunately, it is not so remarkable when it comes to older browser compatibility.

While it sort of works in IE6-7 in the sense that there are no errors, and sometimes things work, I found it very unreliable in real-world situations involving a lot of scripts. Page would just freeze and never finish loading for no particular reason, sometimes. So I had to give it up for this reason, since even though I have no love for those browsers, I can't see excluding them just for this benefit.

One possibility is browser-dependencies to use head.js only for newer browsers, but the fact that it's inconsistent worries me and I'm not interested in adding another wildcard to testing.

Anonymous said...

Please include or add Safari/webkit as it is used by many mobile devices that directly relate to this conversation.